diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fd9189d..ce2907d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,12 @@
 import type { Metadata } from "next";
+import { Poppins } from "next/font/google";
 import "./globals.css";
 
+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+});
+
 export const metadata: Metadata = {
   title: "Turkish Barbers - Premium Barbering in Westbury",  description: "Experience authentic Turkish barbering tradition with premium craftsmanship in Westbury. Expert barbers, traditional techniques, modern styles."};
 
@@ -11,7 +17,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>
+      <body className={poppins.variable}>
         {children}
       
         <script
diff --git a/src/app/page.tsx b/src/app/page.tsx
index feb880c..f17b5bd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,16 +13,16 @@ import { Scissors, Zap, CheckCircle, Star } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-bubble"
-      defaultTextAnimation="background-highlight"
-      borderRadius="rounded"
-      contentWidth="compact"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
       sizing="largeSizeMediumTitles"
-      background="circleGradient"
-      cardStyle="layered-gradient"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      background="floatingGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
@@ -42,7 +42,7 @@ export default function LandingPage() {
         <HeroLogoBillboardSplit
           logoText="TURKISH\nBARBERS"
           description="Premium Turkish barbering tradition meets modern craftsmanship. Experience authentic grooming excellence in Westbury."
-          background={{ variant: "plain" }}
+          background={{ variant: "floatingGradient" }}
           buttons={[
             { text: "Book Now", href: "#contact" },
             { text: "Learn More", href: "#about" }
@@ -111,7 +111,7 @@ export default function LandingPage() {
           tag="Services"
           tagIcon={Zap}
           textboxLayout="default"
-          animationType="slide-up"
+          animationType="blur-reveal"
           useInvertedBackground={false}
         />
       </div>
@@ -141,7 +141,7 @@ export default function LandingPage() {
             { value: "500+", label: "Happy Clients" },
             { value: "15+", label: "Years Experience" }
           ]}
-          animationType="slide-up"
+          animationType="depth-3d"
           title="What Our Clients Say"
           description="Real experiences from satisfied customers in Westbury and surrounding areas"
           tag="Testimonials"
@@ -155,12 +155,12 @@ export default function LandingPage() {
       <div id="contact" data-section="contact">
         <ContactText
           text="Limited availability this week—reserve your slot now for premium Turkish barbering. Book today to secure your appointment."
-          animationType="entrance-slide"
+          animationType="reveal-blur"
           buttons={[
             { text: "Book Appointment", href: "tel:+441373-XXX-XXX" },
             { text: "Get Directions", href: "https://maps.google.com/?q=Turkish+Barbers+Westbury+Wiltshire" }
           ]}
-          background={{ variant: "plain" }}
+          background={{ variant: "floatingGradient" }}
           useInvertedBackground={false}
         />
       </div>
diff --git a/src/app/styles/base.css b/src/app/styles/base.css
index d97fa01..0f9f89d 100644
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 1c9048c..09f0b29 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
+  /* --background: #f5f4f0;;
   --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1f514c;;
-  --secondary-cta: #ffffff;;
-  --accent: #159c49;;
-  --background-accent: #a8e8ba;; */
+  --foreground: #1a1a1a;;
+  --primary-cta: #2c2c2c;;
+  --secondary-cta: #f5f4f0;;
+  --accent: #8a8a8a;;
+  --background-accent: #e8e6e1;; */
 
-  --background: #f5f5f5;;
+  --background: #f5f4f0;;
   --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1f514c;;
+  --foreground: #1a1a1a;;
+  --primary-cta: #2c2c2c;;
   --primary-cta-text: #f5f5f5;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #f5f4f0;;
   --secondary-cta-text: #1c1c1c;;
-  --accent: #159c49;;
-  --background-accent: #a8e8ba;;
+  --accent: #8a8a8a;;
+  --background-accent: #e8e6e1;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
