src/app/admin/page.tsx

@@ -2,8 +2,6 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useState } from "react";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 
 export default function AdminDashboard() {
   const [bookings, setBookings] = useState([
@@ -28,7 +26,7 @@ export default function AdminDashboard() {
         <h1 className="text-3xl font-bold mb-8">Booking Management Dashboard</h1>
         <div className="grid gap-6">
           {bookings.map((booking) => (
-            <Card key={booking.id} className="p-6 flex justify-between items-center">
+            <div key={booking.id} className="p-6 flex justify-between items-center border rounded-lg">
               <div>
                 <h2 className="text-xl font-bold">{booking.client}</h2>
                 <p className="text-muted-foreground">{booking.service}</p>
@@ -38,12 +36,12 @@ export default function AdminDashboard() {
                   {booking.status}
                 </span>
                 {booking.status === "Pending" && (
-                  <Button onClick={() => setBookings(prev => prev.map(b => b.id === booking.id ? {...b, status: "Confirmed"} : b))}>
+                  <button className="px-4 py-2 bg-blue-600 text-white rounded-md" onClick={() => setBookings(prev => prev.map(b => b.id === booking.id ? {...b, status: "Confirmed"} : b))}>
                     Process Booking
-                  </Button>
+                  </button>
                 )}
               </div>
-            </Card>
+            </div>
           ))}
         </div>
       </div>

src/app/booking/page.tsx

@@ -6,21 +6,35 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 
 export default function BookingPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Services", id: "/services" },
-          { name: "Book Online", id: "/booking" }
-        ]}
-        brandName="Elite Grooming"
-      />
-      <div className="pt-32 pb-20">
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="none"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Book Online", id: "/booking" }
+          ]}
+          brandName="Elite Grooming"
+        />
+      </div>
+      <div id="contact" data-section="contact" className="pt-32 pb-20">
         <ContactCenter
           tag="Appointment"
           title="Schedule Your Visit"
           description="Select your preferred time and barber for your next grooming session."
           background={{ variant: "plain" }}
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>