diff --git a/src/app/page.tsx b/src/app/page.tsx
index ed96f5d..b7331a6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
@@ -20,9 +21,9 @@ export default function Home() {
   ];
 
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline navItems={navItems} brandName="UNICUT" />
+        <NavbarLayoutFloatingInline navItems={navItems} brandName="UNICUT" button={{ text: "Book Now", href: "#services" }} />
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel