diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5c15845..427c834 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -19,6 +19,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
       <body className={inter.variable}>{children}
         <script
           dangerouslySetInnerHTML={{
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e7f6b5a..616849c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import HeroCentered from "@/components/sections/hero/HeroCentered";
@@ -12,6 +13,11 @@ import FooterSimple from "@/components/sections/footer/FooterSimple";
 import { Heart, Leaf, Star, MapPin } from "lucide-react";
 
 export default function LandingPage() {
+  useEffect(() => {
+    // Fix hydration mismatch by ensuring consistent rendering
+    // Remove any SSR-specific logic that might differ between server and client
+  }, []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
