diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index 09b991e..f508cc3 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { SquareArrowOutUpRight } from 'lucide-react';
 import React from 'react';
+import { Button } from './ui/button';
 
 const projects = [
   {
@@ -66,12 +67,12 @@ export default function Projects() {
         ))}
       </div>
       {visibleCount < projects.length && (
-        <button
+        <Button
           onClick={() => setVisibleCount(visibleCount + 3)}
-          className="mt-6 px-4 py-2 bg-muted text-muted-foreground rounded font-medium text-sm hover:bg-muted/80"
+          className="mt-6 bg-muted text-muted-foreground rounded font-medium text-sm hover:bg-muted/80"
         >
           더 불러오기
-        </button>
+        </Button>
       )}
     </section>
   );