diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index ddba24a..00a2a39 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -6,10 +6,14 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 export default function PortfolioPage() {
   const navItems = [{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Portfolio", id: "/portfolio" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }];
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" />
+    <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="SecureFence" button={{ text: "Contact" }} />
+      </div>
       <div className="min-h-[60vh] flex items-center justify-center"><h1 className="text-4xl font-bold">Our Portfolio</h1></div>
-      <FooterLogoEmphasis columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} logoText="SecureFence" />
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis logoText="SecureFence" columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file