diff --git a/components/custom/Frame.tsx b/components/custom/Frame.tsx
index 23d4354..ad6b1f6 100644
--- a/components/custom/Frame.tsx
+++ b/components/custom/Frame.tsx
@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import { CopyPlus, Trash2, Plus, X } from 'lucide-react';
 import { useState } from 'react';
+import { Button } from '@/components/ui/button';
 
 interface Card {
   id: number;
@@ -77,14 +78,15 @@ export default function Frame() {
 
     
         <div className="w-[450px] flex justify-center">
-          <button
+          <Button
             onClick={handleAddCard}
-            className="flex justify-center items-center gap-2 py-2 border-2 rounded-xs text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm"
-            style={{ borderColor: '#D9D7D7', width: 410 }}
+            variant="outline"
+            className="flex justify-center items-center gap-2 py-2 text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm"
+            style={{ width: 410 }}
           >
             <Plus size={20} className="text-[#1A237E]" />
             <span className="text-center text-[16px] font-[400]">Add new page</span>
-          </button>
+          </Button>
         </div>
       </div>
     </div>