diff --git a/ai-trip-creator/src/components/auth/auth.css b/ai-trip-creator/src/components/auth/auth.css
index 49e335c9..df158dd6 100644
--- a/ai-trip-creator/src/components/auth/auth.css
+++ b/ai-trip-creator/src/components/auth/auth.css
@@ -1,86 +1,108 @@
 /* auth.css */
 form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+form div {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #000;
+}
+
+input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  background-color: #0070f3;
+  color: white;
+  border: none;
+  padding: 0.75rem;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: #005bb5;
+}
+
+p {
+  padding: 25px;
+  margin-top: 0;
+  color: #000;
+}
+
+p a {
+  padding: 5px;
+  color: #0070f3;
+}
+
+.splash-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #f0f2f5;
+}
+
+.splash-container h1 {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+}
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  background-color: white;
+  padding: 2rem;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 400px;
+  animation: modalFadeIn 0.3s ease-in-out;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%);
   }
-  
-  form div {
-    width: 100%;
-    margin-bottom: 1rem;
-  }
-  
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: #000;
-  }
-  
-  input {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-  
-  button {
-    background-color: #0070f3;
-    color: white;
-    border: none;
-    padding: 0.75rem;
-    border-radius: 4px;
-    transition: background-color 0.3s;
-  }
-  
-  button:hover {
-    background-color: #005bb5;
-  }
-  
-  p {
-    padding: 25px;
-    margin-top: 0;
-    color: #000;
-  }
-  
-  p a {
-    padding: 5px;
-    color: #0070f3;
-  }
-  
-  .splash-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    background-color: #f0f2f5;
-  }
-  
-  .splash-container h1 {
-    font-size: 2.5rem;
-    margin-bottom: 2rem;
-  }
-  
-  .modal {
-    position: absolute;
-    top: 50%;
-    left: 50%;
+  to {
+    opacity: 1;
     transform: translate(-50%, -50%);
-    z-index: 1000;
-    background-color: white;
-    padding: 2rem;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    width: 20rem;
   }
-  
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 500;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  z-index: 500;
+  animation: overlayFadeIn 0.3s ease-in-out;
+}
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
-  
\ No newline at end of file
+}
diff --git a/ai-trip-creator/src/components/auth/login.js b/ai-trip-creator/src/components/auth/login.js
index 40dc2887..71aba1f1 100644
--- a/ai-trip-creator/src/components/auth/login.js
+++ b/ai-trip-creator/src/components/auth/login.js
@@ -86,17 +86,26 @@ const Login = ({ setIsLoggedIn, closeLogin, openSignup }) => {
     <Box
       component="form"
       onSubmit={handleLogin}
+      className="login-container"
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 3,
         maxWidth: 400,
-        margin: "0 auto",
+        width: '100%',
+        padding: '2rem',
+        backgroundColor: 'white',
+        borderRadius: '16px',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
       }}
     >
-      {error && <Alert severity="error">{error}</Alert>}
-      {resetError && <Alert severity="error">{resetError}</Alert>}
-      {resetSuccess && <Alert severity="success">{resetSuccess}</Alert>}
+      <Typography variant="h4" sx={{ textAlign: 'center', fontWeight: 600, mb: 2 }}>
+        Welcome Back
+      </Typography>
+
+      {error && <Alert severity="error" sx={{ borderRadius: '8px' }}>{error}</Alert>}
+      {resetError && <Alert severity="error" sx={{ borderRadius: '8px' }}>{resetError}</Alert>}
+      {resetSuccess && <Alert severity="success" sx={{ borderRadius: '8px' }}>{resetSuccess}</Alert>}
 
       <TextField
         label="Email"
@@ -106,6 +115,7 @@ const Login = ({ setIsLoggedIn, closeLogin, openSignup }) => {
         fullWidth
         required
         autoComplete="email"
+        sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
       />
       <TextField
         label="Password"
@@ -115,38 +125,65 @@ const Login = ({ setIsLoggedIn, closeLogin, openSignup }) => {
         fullWidth
         required
         autoComplete="current-password"
+        sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
       />
 
-      <Box sx={{ position: "relative" }}>
-        <Button
-          type="submit"
-          variant="contained"
-          color="primary"
-          fullWidth
-          disabled={loading} // Disable button when loading
-        >
-          {loading ? <CircularProgress size={24} /> : "Login"}
-        </Button>
-      </Box>
+      <Button
+        type="submit"
+        variant="contained"
+        fullWidth
+        disabled={loading}
+        sx={{
+          py: 1.5,
+          borderRadius: '8px',
+          textTransform: 'none',
+          fontSize: '1rem',
+          fontWeight: 600,
+          backgroundColor: '#2563eb',
+          '&:hover': {
+            backgroundColor: '#1d4ed8',
+          },
+        }}
+      >
+        {loading ? <CircularProgress size={24} color="inherit" /> : "Sign In"}
+      </Button>
 
-      <Typography variant="body2" sx={{ textAlign: "center" }}>
-        Don't have an account?{" "}
-        <Link
-          component="button"
-          variant="body2"
-          onClick={() => {
-            closeLogin();
-            openSignup();
-          }}
-        >
-          Signup
-        </Link>
-        <br />
-        Forgot your password?{" "}
-        <Link component="button" variant="body2" onClick={handlePasswordReset}>
-          Reset Password
-        </Link>
-      </Typography>
+      <Box sx={{ textAlign: 'center', mt: 2 }}>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          Don't have an account?{' '}
+          <Link
+            component="button"
+            variant="body2"
+            onClick={() => {
+              closeLogin();
+              openSignup();
+            }}
+            sx={{ 
+              fontWeight: 600, 
+              color: '#2563eb',
+              textDecoration: 'none',
+              '&:hover': { textDecoration: 'underline' } 
+            }}
+          >
+            Sign up
+          </Link>
+        </Typography>
+        <Typography variant="body2" sx={{ mt: 1, color: 'text.secondary' }}>
+          <Link
+            component="button"
+            variant="body2"
+            onClick={handlePasswordReset}
+            sx={{ 
+              fontWeight: 600, 
+              color: '#2563eb',
+              textDecoration: 'none',
+              '&:hover': { textDecoration: 'underline' } 
+            }}
+          >
+            Forgot password?
+          </Link>
+        </Typography>
+      </Box>
     </Box>
   );
 };
diff --git a/ai-trip-creator/src/components/auth/signup.js b/ai-trip-creator/src/components/auth/signup.js
index 7a75dab1..154962e0 100644
--- a/ai-trip-creator/src/components/auth/signup.js
+++ b/ai-trip-creator/src/components/auth/signup.js
@@ -5,7 +5,8 @@ import {
   Typography,
   Link,
   Box,
-  InputLabel,
+  Alert,
+  CircularProgress,
 } from "@mui/material";
 import {
   createUserWithEmailAndPassword,
@@ -15,25 +16,38 @@ import {
 import { doc, setDoc } from "firebase/firestore";
 import { auth, firestore } from "../../firebase/firebase-config";
 import { useNavigate } from "react-router-dom";
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs from 'dayjs';
 
 const Signup = ({ closeSignup, openLogin }) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [name, setName] = useState("");
-  const [birthday, setBirthday] = useState("");
+  const [birthday, setBirthday] = useState(null);
   const [showSuccess, setShowSuccess] = useState(false);
   const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
 
   const handleSignup = async (e) => {
     e.preventDefault();
     setError("");
+    setLoading(true);
 
     const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
     if (!password.match(passwordRegex)) {
       setError(
-        "Password must be at least 8 characters long and contain at least one number.",
+        "Password must be at least 8 characters long and contain at least one number."
       );
+      setLoading(false);
+      return;
+    }
+
+    if (!birthday) {
+      setError("Please select your birthday");
+      setLoading(false);
       return;
     }
 
@@ -41,7 +55,7 @@ const Signup = ({ closeSignup, openLogin }) => {
       const userCredential = await createUserWithEmailAndPassword(
         auth,
         email.trim(),
-        password,
+        password
       );
       const user = userCredential.user;
 
@@ -50,18 +64,21 @@ const Signup = ({ closeSignup, openLogin }) => {
       await setDoc(doc(firestore, "users", user.uid), {
         uid: user.uid,
         name: name.trim(),
-        birthday: birthday.trim(),
+        birthday: birthday.format('YYYY-MM-DD'),
         email: email.trim(),
       });
 
       await sendEmailVerification(auth.currentUser);
-
+      setLoading(false);
       setShowSuccess(true);
     } catch (error) {
       console.error("Signup failed:", error);
-      if (error.message === "Firebase: Error (auth/email-already-in-use).")
-        setError("Signup failed: Email already in use");
-      else setError("Signup failed: " + error.message);
+      setError(
+        error.code === "auth/email-already-in-use"
+          ? "Email already in use"
+          : "Signup failed: " + error.message
+      );
+      setLoading(false);
     }
   };
 
@@ -69,109 +86,287 @@ const Signup = ({ closeSignup, openLogin }) => {
     <Box
       component="form"
       onSubmit={handleSignup}
+      className="login-container"
       sx={{
-        maxWidth: "400px",
-        margin: "auto",
-        display: "flex",
-        flexDirection: "column",
-        gap: 2,
-        padding: "1rem",
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 3,
+        maxWidth: 440,
+        width: '100%',
+        padding: '2.5rem',
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        borderRadius: '24px',
+        boxShadow: '0 0 40px rgba(0, 0, 0, 0.12)',
+        position: 'relative',
+        zIndex: 1,
       }}
     >
       {!showSuccess ? (
         <>
-          <InputLabel htmlFor="name">Name </InputLabel>
+          <Typography 
+            variant="h4" 
+            sx={{ 
+              textAlign: 'center', 
+              fontWeight: 700,
+              background: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 100%)',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              mb: 3,
+            }}
+          >
+            Create Account
+          </Typography>
+
+          {error && <Alert severity="error" sx={{ borderRadius: '12px' }}>{error}</Alert>}
+
           <TextField
             fullWidth
-            id="name"
-            label="Name"
+            label="Full Name"
             variant="outlined"
             value={name}
             onChange={(e) => setName(e.target.value)}
             required
+            sx={{
+              '& .MuiOutlinedInput-root': {
+                borderRadius: '12px',
+                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                '&:hover': {
+                  '& fieldset': {
+                    borderColor: '#2563eb',
+                  },
+                },
+              },
+              '& .MuiOutlinedInput-notchedOutline': {
+                borderWidth: '1.5px',
+              },
+            }}
           />
 
-          <InputLabel htmlFor="birthday">Birthday</InputLabel>
-          <TextField
-            fullWidth
-            id="birthday"
-            type="date"
-            variant="outlined"
-            value={birthday}
-            onChange={(e) => setBirthday(e.target.value)}
-            required
-            InputLabelProps={{ shrink: true }}
-          />
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <DatePicker
+              label="Birthday"
+              value={birthday}
+              onChange={(newValue) => setBirthday(newValue)}
+              disableFuture
+              sx={{
+                width: '100%',
+                '& .MuiOutlinedInput-root': {
+                  borderRadius: '12px',
+                  backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                  '&:hover': {
+                    '& fieldset': {
+                      borderColor: '#2563eb',
+                    },
+                  },
+                },
+                '& .MuiOutlinedInput-notchedOutline': {
+                  borderWidth: '1.5px',
+                },
+                '& .MuiInputLabel-root': {
+                  color: 'text.secondary',
+                },
+                '& .MuiIconButton-root': {
+                  color: '#2563eb',
+                  padding: '8px',
+                  position: 'absolute',
+                  right: '8px',
+                  '&:hover': {
+                    backgroundColor: 'rgba(37, 99, 235, 0.1)',
+                  },
+                },
+                '& .MuiInputAdornment-root': {
+                  position: 'absolute',
+                  right: 0,
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  marginLeft: 0,
+                  marginRight: 0,
+                },
+              }}
+              slotProps={{
+                textField: {
+                  required: true,
+                  error: !birthday && error,
+                  helperText: !birthday && error ? 'Birthday is required' : '',
+                },
+                popper: {
+                  sx: {
+                    '& .MuiPaper-root': {
+                      borderRadius: '12px',
+                      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
+                      border: '1px solid rgba(0, 0, 0, 0.08)',
+                    },
+                    '& .MuiPickersDay-root': {
+                      borderRadius: '8px',
+                      '&.Mui-selected': {
+                        backgroundColor: '#2563eb',
+                        color: 'white',
+                        '&:hover': {
+                          backgroundColor: '#1d4ed8',
+                        },
+                      },
+                      '&:hover': {
+                        backgroundColor: 'rgba(37, 99, 235, 0.1)',
+                      },
+                    },
+                    '& .MuiPickersCalendarHeader-root': {
+                      '& .MuiIconButton-root': {
+                        borderRadius: '8px',
+                      },
+                    },
+                    '& .MuiPickersYear-yearButton': {
+                      borderRadius: '8px',
+                      '&.Mui-selected': {
+                        backgroundColor: '#2563eb',
+                        color: 'white',
+                      },
+                    },
+                  },
+                },
+              }}
+            />
+          </LocalizationProvider>
 
-          <InputLabel htmlFor="email">Email</InputLabel>
           <TextField
             fullWidth
-            id="email"
             type="email"
             label="Email"
             variant="outlined"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
+            sx={{
+              '& .MuiOutlinedInput-root': {
+                borderRadius: '12px',
+                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                '&:hover': {
+                  '& fieldset': {
+                    borderColor: '#2563eb',
+                  },
+                },
+              },
+              '& .MuiOutlinedInput-notchedOutline': {
+                borderWidth: '1.5px',
+              },
+            }}
           />
 
-          <InputLabel htmlFor="password">Password</InputLabel>
           <TextField
             fullWidth
-            id="password"
             type="password"
             label="Password"
             variant="outlined"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
+            sx={{
+              '& .MuiOutlinedInput-root': {
+                borderRadius: '12px',
+                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                '&:hover': {
+                  '& fieldset': {
+                    borderColor: '#2563eb',
+                  },
+                },
+              },
+              '& .MuiOutlinedInput-notchedOutline': {
+                borderWidth: '1.5px',
+              },
+            }}
           />
 
           <Button
             type="submit"
             variant="contained"
-            color="primary"
-            sx={{ marginTop: "1rem", borderRadius: "20px", padding: "10px" }}
+            fullWidth
+            disabled={loading}
+            sx={{
+              py: 1.8,
+              mt: 1,
+              borderRadius: '12px',
+              textTransform: 'none',
+              fontSize: '1.1rem',
+              fontWeight: 600,
+              background: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 100%)',
+              boxShadow: '0 4px 12px rgba(37, 99, 235, 0.3)',
+              transition: 'transform 0.2s, box-shadow 0.2s',
+              '&:hover': {
+                background: 'linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%)',
+                transform: 'translateY(-1px)',
+                boxShadow: '0 6px 16px rgba(37, 99, 235, 0.4)',
+              },
+              '&:active': {
+                transform: 'translateY(0)',
+              },
+            }}
           >
-            Signup
+            {loading ? <CircularProgress size={24} color="inherit" /> : "Sign Up"}
           </Button>
-          {error && (
-            <Typography color="error" variant="body2">
-              {error}
-            </Typography>
-          )}
 
-          <Typography
-            variant="body2"
-            textAlign="center"
-            sx={{ marginTop: "1rem" }}
-          >
-            Already have an account?{" "}
-            <Link
-              component="button"
-              variant="body2"
-              onClick={() => {
-                closeSignup();
-                openLogin();
-              }}
-            >
-              Login
-            </Link>
-          </Typography>
+          <Box sx={{ textAlign: 'center', mt: 2 }}>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              Already have an account?{' '}
+              <Link
+                component="button"
+                variant="body2"
+                onClick={() => {
+                  closeSignup();
+                  openLogin();
+                }}
+                sx={{ 
+                  fontWeight: 600, 
+                  background: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 100%)',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                  textDecoration: 'none',
+                  '&:hover': { 
+                    textDecoration: 'underline',
+                  } 
+                }}
+              >
+                Sign in
+              </Link>
+            </Typography>
+          </Box>
         </>
       ) : (
-        <Box textAlign="center">
-          <Typography variant="h6">Signup successful!</Typography>
-          <Typography variant="body2">
+        <Box textAlign="center" sx={{ py: 4 }}>
+          <Typography 
+            variant="h5" 
+            sx={{ 
+              fontWeight: 600,
+              background: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 100%)',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              mb: 2
+            }}
+          >
+            Signup Successful!
+          </Typography>
+          <Typography variant="body1" sx={{ mb: 3, color: 'text.secondary' }}>
             A verification link has been sent to your email.
           </Typography>
           <Button
             variant="contained"
-            color="primary"
-            onClick={() => setShowSuccess(false)}
-            sx={{ marginTop: "1rem" }}
+            onClick={() => {
+              closeSignup();
+              openLogin();
+            }}
+            sx={{
+              py: 1.5,
+              px: 4,
+              borderRadius: '12px',
+              textTransform: 'none',
+              fontSize: '1rem',
+              fontWeight: 600,
+              background: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 100%)',
+              boxShadow: '0 4px 12px rgba(37, 99, 235, 0.3)',
+              '&:hover': {
+                background: 'linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%)',
+              },
+            }}
           >
-            Okay
+            Go to Login
           </Button>
         </Box>
       )}
diff --git a/ai-trip-creator/src/components/splash/splash.css b/ai-trip-creator/src/components/splash/splash.css
index 0c210ee2..3935cdca 100644
--- a/ai-trip-creator/src/components/splash/splash.css
+++ b/ai-trip-creator/src/components/splash/splash.css
@@ -274,6 +274,14 @@ body, html {
 :root {
   --font-family: "Poppins", sans-serif;
   --font-family-body: "Roboto", sans-serif;
+  --primary-color: #1565c0;
+  --secondary-color: #ffb74d;
+  --accent-color: #5c6bc0;
+  --background-color: #f8f9fa;
+  --text-color: #333;
+  --heading1-color: #5A7BB8;
+  --modal-background: white;
+  --modal-shadow: rgba(0, 0, 0, 0.1);
 }
 
 body,
@@ -304,7 +312,7 @@ h1 {
 }
 
 .get-started-button {
-  background-color: #1573d8;
+  background-color: var(--primary-color);
   color: white;
   font-size: 1.5rem;
   padding: 0.5rem 2rem;
@@ -315,7 +323,7 @@ h1 {
 }
 
 .get-started-button:hover {
-  background-color: #0f3d82;
+  background-color: #0d47a1;
 }
 
 .modal {
diff --git a/ai-trip-creator/src/components/splash/splash.js b/ai-trip-creator/src/components/splash/splash.js
index ca8dbf61..1e3b8222 100644
--- a/ai-trip-creator/src/components/splash/splash.js
+++ b/ai-trip-creator/src/components/splash/splash.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo, Suspense } from "react";
 import { ThemeProvider } from "@mui/material/styles";
 import {
   Button,
@@ -13,6 +13,8 @@ import {
   Toolbar,
   IconButton,
   Slide,
+  Fade,
+  CircularProgress,
 } from "@mui/material";
 import { useTheme, createTheme } from "@mui/material/styles";
 import Login from "../auth/login";
@@ -25,6 +27,11 @@ import {
 import { AiOutlineStar, AiOutlineMenu } from "react-icons/ai";
 import { Link } from "react-scroll";
 import CssBaseline from "@mui/material/CssBaseline";
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { keyframes } from '@mui/system';
+import TravelExploreIcon from '@mui/icons-material/TravelExplore';
+import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
+import { throttle } from 'lodash';
 
 const theme = createTheme({
   typography: {
@@ -76,19 +83,49 @@ const reviews = [
 ];
 
 const images = [
-  "https://images.unsplash.com/photo-1519985176271-adb1088fa94c",
-  "https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0",
-  "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e",
-  "https://images.unsplash.com/photo-1521747116042-5a810fda9664",
-  "https://images.unsplash.com/photo-1507525428034-b723cf961d3e",
-  "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40",
-  "https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7",
-  "https://images.unsplash.com/photo-1494526585095-c41746248156",
-  "https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0",
-  "https://images.unsplash.com/photo-1472214103451-9374bd1c798e",
+  {
+    src: "https://images.unsplash.com/photo-1519985176271-adb1088fa94c?w=1200&q=80&format=webp",
+    thumbnail: "https://images.unsplash.com/photo-1519985176271-adb1088fa94c?w=200&q=60&format=webp",
+    alt: "Travel destination 1"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?w=1200&q=80&format=webp",
+    thumbnail: "https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?w=200&q=60&format=webp",
+    alt: "Travel destination 2"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=1200&q=80&format=webp",
+    thumbnail: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=200&q=60&format=webp",
+    alt: "Travel destination 3"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1521747116042-5a810fda9664?w=1200&q=80&format=webp",
+    thumbnail: "https://images.unsplash.com/photo-1521747116042-5a810fda9664?w=200&q=60&format=webp",
+    alt: "Travel destination 4"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200&q=80&format=webp",
+    thumbnail: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=200&q=60&format=webp",
+    alt: "Travel destination 5"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1200&q=80&format=webp",
+    thumbnail: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=200&q=60&format=webp",
+    alt: "Travel destination 6"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1494526585095-c41746248156?w=1200&q=80&format=webp",
+    thumbnail: "https://images.unsplash.com/photo-1494526585095-c41746248156?w=200&q=60&format=webp",
+    alt: "Travel destination 7"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=1200&q=80&format=webp",
+    thumbnail: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=200&q=60&format=webp",
+    alt: "Travel destination 8"
+  },
 ];
 
-const ReviewCard = () => {
+const ReviewCard = React.memo(() => {
   const [currentReviewIndex, setCurrentReviewIndex] = useState(0);
 
   const goToNextReview = () => {
@@ -105,6 +142,17 @@ const ReviewCard = () => {
 
   const currentReview = reviews[currentReviewIndex];
 
+  // Add debounced navigation
+  const debouncedGoToNext = useCallback(
+    throttle(goToNextReview, 300),
+    [goToNextReview]
+  );
+
+  const debouncedGoToPrevious = useCallback(
+    throttle(goToPreviousReview, 300),
+    [goToPreviousReview]
+  );
+
   return (
     <Box
       sx={{
@@ -144,7 +192,7 @@ const ReviewCard = () => {
       </p>
       <Box sx={{ display: "flex", mt: 2 }}>
         <Button
-          onClick={goToPreviousReview}
+          onClick={debouncedGoToPrevious}
           sx={{
             color: "white",
             backgroundColor: theme.palette.primary.main,
@@ -172,7 +220,7 @@ const ReviewCard = () => {
           </svg>
         </Button>
         <Button
-          onClick={goToNextReview}
+          onClick={debouncedGoToNext}
           sx={{
             color: "white",
             backgroundColor: theme.palette.primary.main,
@@ -201,9 +249,9 @@ const ReviewCard = () => {
       </Box>
     </Box>
   );
-};
+});
 
-const ImageCarousel = () => {
+const ImageCarousel = React.memo(() => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
   const goToNextImage = () => {
@@ -285,7 +333,7 @@ const ImageCarousel = () => {
           >
             <Box
               sx={{
-                backgroundImage: `url(${image})`,
+                backgroundImage: `url(${image.src})`,
                 backgroundSize: "cover",
                 backgroundPosition: "center",
                 width: "100%",
@@ -335,59 +383,585 @@ const ImageCarousel = () => {
       </Button>
     </Box>
   );
+});
+
+const optimizedImages = images.map(url => ({
+  original: url,
+  thumbnail: url + '?w=100', // Add query param for smaller thumbnail
+  loading: 'lazy'
+}));
+
+const useIntersectionObserver = (ref, options) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsVisible(entry.isIntersecting);
+    }, options);
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [ref, options]);
+
+  return isVisible;
 };
 
-const SplashPage = ({ setIsLoggedIn }) => {
-  const [visibleLogin, setVisibleLogin] = useState(false);
-  const [visibleSignup, setVisibleSignup] = useState(false);
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
 
-  const openLogin = () => setVisibleLogin(true);
-  const closeLogin = () => setVisibleLogin(false);
-  const openSignup = () => setVisibleSignup(true);
-  const closeSignup = () => setVisibleSignup(false);
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  };
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
+    <Fade in={isVisible}>
       <Box
-        sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
+        onClick={scrollToTop}
+        sx={{
+          position: 'fixed',
+          bottom: 20,
+          right: 20,
+          zIndex: 1000,
+          cursor: 'pointer',
+          backgroundColor: theme.palette.primary.main,
+          borderRadius: '50%',
+          width: 50,
+          height: 50,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            transform: 'translateY(-3px)',
+            boxShadow: '0 6px 16px rgba(0,0,0,0.2)',
+          }
+        }}
       >
-        {/* Animated Heading */}
-        <Box sx={{ textAlign: "center", py: 4, backgroundColor: "#f4f6f8" }}>
-          <Slide direction="down" in={true} mountOnEnter unmountOnExit>
-            <Typography
-              variant="h2"
-              component="div"
+        <KeyboardArrowUpIcon sx={{ color: 'white', fontSize: 30 }} />
+      </Box>
+    </Fade>
+  );
+};
+
+const float = keyframes`
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-20px); }
+  100% { transform: translateY(0px); }
+`;
+
+const fadeIn = keyframes`
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+
+const heroStyles = {
+  position: 'relative',
+  minHeight: '100vh',
+  display: 'flex',
+  alignItems: 'center',
+  overflow: 'hidden',
+  background: 'linear-gradient(135deg, #0A2647 0%, #144272 50%, #205295 100%)',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundImage: 'url("data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
+    opacity: 0.1,
+  },
+  willChange: 'transform', // Optimize animations
+};
+
+const featureCardStyles = {
+  backgroundColor: 'white',
+  borderRadius: '16px',
+  padding: '2rem',
+  height: '100%',
+  transition: 'all 0.3s ease',
+  boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
+  '&:hover': {
+    transform: 'translateY(-10px)',
+    boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
+  }
+};
+
+const appBarStyles = {
+  backgroundColor: 'rgba(255, 255, 255, 0.95)',
+  backdropFilter: 'blur(8px)',
+  boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+  transition: 'all 0.3s ease',
+  transform: 'translateZ(0)', // Force GPU acceleration
+  willChange: 'transform',
+};
+
+const navButtonStyles = {
+  mx: 2,
+  color: theme.palette.primary.main,
+  fontWeight: 600,
+  position: 'relative',
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    bottom: -2,
+    left: 0,
+    width: '0%',
+    height: '2px',
+    backgroundColor: theme.palette.primary.main,
+    transition: 'width 0.3s ease',
+  },
+  '&:hover::after': {
+    width: '100%',
+  }
+};
+
+const improvedButtonStyles = {
+  ...navButtonStyles,
+  transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+  willChange: 'transform',
+  '&:active': {
+    transform: 'scale(0.98)',
+  }
+};
+
+const GallerySection = React.memo(() => {
+  const sectionRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Optimize intersection observer
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // Only trigger once when becoming visible
+        if (entry.isIntersecting && !isVisible) {
+          setIsVisible(true);
+          // Optionally disconnect observer after first visibility
+          observer.disconnect();
+        }
+      },
+      {
+        threshold: 0.1,
+        rootMargin: '50px' // Pre-load slightly before section is visible
+      }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [isVisible]);
+
+  // Memoize navigation functions
+  const goToNextImage = useCallback(() => {
+    setCurrentImageIndex(prev => 
+      prev === images.length - 1 ? 0 : prev + 1
+    );
+  }, []);
+
+  const goToPreviousImage = useCallback(() => {
+    setCurrentImageIndex(prev => 
+      prev === 0 ? images.length - 1 : prev - 1
+    );
+  }, []);
+
+  // Optimize auto-play with useCallback and proper cleanup
+  useEffect(() => {
+    if (isHovered) return;
+    
+    const timer = setInterval(goToNextImage, 5000);
+    return () => clearInterval(timer);
+  }, [isHovered, goToNextImage]);
+
+  return (
+    <Box
+      ref={sectionRef}
+      id="gallery"
+      sx={{
+        py: 12,
+        background: 'linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%)',
+        opacity: isVisible ? 1 : 0,
+        transform: isVisible ? 'none' : 'translateY(20px)',
+        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',
+        willChange: 'opacity, transform',
+        '@media (prefers-reduced-motion: reduce)': {
+          transition: 'none'
+        }
+      }}
+    >
+      <Container maxWidth="lg">
+        <Typography
+          variant="h3"
+          component="h2"
+          align="center"
+          sx={{
+            mb: 6,
+            fontWeight: 700,
+            background: 'linear-gradient(45deg, #1565c0, #5c6bc0)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          Explore Destinations
+        </Typography>
+
+        <Box
+          sx={{
+            position: 'relative',
+            width: '100%',
+            height: '600px',
+            borderRadius: '24px',
+            overflow: 'hidden',
+            boxShadow: '0 20px 40px rgba(0,0,0,0.2)',
+            transform: 'translateZ(0)', // Force GPU acceleration
+          }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          {/* Main Image - Optimize image rendering */}
+          <Box
+            component="img"
+            src={images[currentImageIndex].src}
+            alt={`Gallery image ${currentImageIndex + 1}`}
+            loading="lazy"
+            sx={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              transition: 'transform 0.3s ease',
+              transform: 'translateZ(0)', // Force GPU acceleration
+              willChange: 'transform',
+              '&:hover': {
+                transform: 'scale(1.05)',
+              },
+            }}
+          />
+
+          {/* Navigation Arrows - Only render when hovered */}
+          {isHovered && (
+            <Box
               sx={{
-                fontSize: "4rem",
-                fontWeight: 700,
-                lineHeight: 1.2,
-                color: theme.palette.primary.main,
-                color: "#5A7BB8",
-                textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
+                position: 'absolute',
+                top: '50%',
+                left: 0,
+                right: 0,
+                transform: 'translateY(-50%)',
+                display: 'flex',
+                justifyContent: 'space-between',
+                px: 2,
+                pointerEvents: 'none', // Prevent interference with hover state
               }}
             >
-              AI Trip Creator
-            </Typography>
-          </Slide>
+              {[
+                { onClick: goToPreviousImage, icon: '←' },
+                { onClick: goToNextImage, icon: '→' },
+              ].map((button, index) => (
+                <IconButton
+                  key={index}
+                  onClick={button.onClick}
+                  sx={{
+                    width: 50,
+                    height: 50,
+                    backgroundColor: 'rgba(255,255,255,0.9)',
+                    backdropFilter: 'blur(4px)',
+                    pointerEvents: 'auto', // Re-enable pointer events
+                    '&:hover': {
+                      backgroundColor: 'rgba(255,255,255,1)',
+                      transform: 'scale(1.1)',
+                    },
+                    transition: 'all 0.3s ease',
+                  }}
+                >
+                  <Typography sx={{ fontSize: '24px', color: theme.palette.primary.main }}>
+                    {button.icon}
+                  </Typography>
+                </IconButton>
+              ))}
+            </Box>
+          )}
+
+          {/* Image Counter - Simplified and optimized */}
+          <Box
+            sx={{
+              position: 'absolute',
+              bottom: 20,
+              left: '50%',
+              transform: 'translateX(-50%)',
+              display: 'flex',
+              gap: 1,
+              zIndex: 2,
+            }}
+          >
+            {images.map((_, index) => (
+              <Box
+                key={index}
+                onClick={() => setCurrentImageIndex(index)}
+                sx={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: '50%',
+                  backgroundColor: index === currentImageIndex ? 'white' : 'rgba(255,255,255,0.5)',
+                  cursor: 'pointer',
+                  transition: 'all 0.3s ease',
+                }}
+              />
+            ))}
+          </Box>
         </Box>
 
-        {/* Floating and Sticky Navigation Bar */}
-        <AppBar
-          position="sticky"
+        {/* Thumbnail Preview - Only render visible thumbnails */}
+        <Box
           sx={{
-            backgroundColor: theme.palette.primary.main,
-            backgroundColor: "white",
-            top: 0,
-            boxShadow: "none",
-            transition: "transform 0.3s ease, background-color 0.3s ease",
-            "&:hover": {
-              transform: "translateY(-5px)",
-              backgroundColor: theme.palette.primary.dark,
-              backgroundColor: "#F0F0F0",
-            },
+            mt: 4,
+            display: 'flex',
+            gap: 2,
+            justifyContent: 'center',
+            overflow: 'hidden',
           }}
         >
+          {images.slice(0, 5).map((image, index) => (
+            <Box
+              key={index}
+              onClick={() => setCurrentImageIndex(index)}
+              sx={{
+                width: 100,
+                height: 60,
+                borderRadius: 2,
+                overflow: 'hidden',
+                cursor: 'pointer',
+                border: index === currentImageIndex ? `3px solid ${theme.palette.primary.main}` : 'none',
+                opacity: index === currentImageIndex ? 1 : 0.6,
+                transition: 'all 0.3s ease',
+                transform: 'translateZ(0)', // Force GPU acceleration
+              }}
+            >
+              <img
+                src={image.thumbnail}
+                alt={`Thumbnail ${index + 1}`}
+                loading="lazy"
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                }}
+              />
+            </Box>
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+});
+
+const useScrollPosition = () => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = throttle(() => {
+      setScrollPosition(window.pageYOffset);
+    }, 100);
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return scrollPosition;
+};
+
+const SplashPage = React.memo(({ setIsLoggedIn }) => {
+  const [visibleLogin, setVisibleLogin] = useState(false);
+  const [visibleSignup, setVisibleSignup] = useState(false);
+  const scrollPosition = useScrollPosition();
+
+  const openLogin = () => setVisibleLogin(true);
+  const closeLogin = () => setVisibleLogin(false);
+  const openSignup = () => setVisibleSignup(true);
+  const closeSignup = () => setVisibleSignup(false);
+
+  // Memoize heavy calculations and callbacks
+  const memoizedHeroContent = useMemo(() => (
+    <Box id="hero" sx={heroStyles}>  // Add id="hero" here
+      <Container maxWidth="lg">
+        <Grid container spacing={4} alignItems="center">
+          {/* Left Content */}
+          <Grid item xs={12} md={6} sx={{ position: 'relative', zIndex: 2 }}>
+            <Box sx={{ animation: `${fadeIn} 1s ease-out` }}>
+              <Typography
+                variant="h1"
+                sx={{
+                  fontSize: { xs: '2.5rem', md: '3.5rem', lg: '4rem' },
+                  fontWeight: 800,
+                  color: 'white',
+                  lineHeight: 1.2,
+                  mb: 2,
+                  textShadow: '2px 2px 4px rgba(0,0,0,0.3)',
+                  '& span': {
+                    color: theme.palette.secondary.main,
+                    display: 'block',
+                  }
+                }}
+              >
+                Your Journey <span>Begins Here</span>
+              </Typography>
+              
+              <Typography
+                variant="h5"
+                sx={{
+                  color: 'rgba(255,255,255,0.9)',
+                  mb: 4,
+                  fontWeight: 300,
+                  lineHeight: 1.6,
+                }}
+              >
+                Let AI craft your perfect adventure while you focus on making memories.
+              </Typography>
+
+              <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+                <Button
+                  variant="contained"
+                  size="large"
+                  onClick={openSignup}
+                  startIcon={<FlightTakeoffIcon />}
+                  sx={{
+                    py: 1.5,
+                    px: 4,
+                    borderRadius: '30px',
+                    backgroundColor: theme.palette.secondary.main,
+                    color: 'black',
+                    fontWeight: 600,
+                    '&:hover': {
+                      backgroundColor: theme.palette.secondary.dark,
+                      transform: 'translateY(-3px)',
+                      boxShadow: '0 6px 20px rgba(0,0,0,0.2)',
+                    },
+                    transition: 'all 0.3s ease',
+                  }}
+                >
+                  Start Planning
+                </Button>
+                
+                <Button
+                  variant="outlined"
+                  size="large"
+                  onClick={openLogin}
+                  sx={{
+                    py: 1.5,
+                    px: 4,
+                    borderRadius: '30px',
+                    borderColor: 'white',
+                    color: 'white',
+                    borderWidth: '2px',
+                    '&:hover': {
+                      borderColor: 'white',
+                      backgroundColor: 'rgba(255,255,255,0.1)',
+                      transform: 'translateY(-3px)',
+                    },
+                    transition: 'all 0.3s ease',
+                  }}
+                >
+                  Login
+                </Button>
+              </Box>
+
+              {/* Feature Pills */}
+              <Box sx={{ mt: 6, display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+                {['AI-Powered', 'Personalized', 'Time-Saving'].map((feature) => (
+                  <Box
+                    key={feature}
+                    sx={{
+                      backgroundColor: 'rgba(255,255,255,0.1)',
+                      backdropFilter: 'blur(10px)',
+                      px: 2,
+                      py: 1,
+                      borderRadius: '20px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 1,
+                    }}
+                  >
+                    <TravelExploreIcon sx={{ color: theme.palette.secondary.main, fontSize: 20 }} />
+                    <Typography sx={{ color: 'white', fontSize: '0.9rem' }}>
+                      {feature}
+                    </Typography>
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          </Grid>
+
+          {/* Right Content - Floating Elements */}
+          <Grid item xs={12} md={6} sx={{ position: 'relative', minHeight: '400px', display: { xs: 'none', md: 'block' } }}>
+            {[
+              { img: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800', delay: 0 },
+              { img: 'https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1', delay: 0.2 },
+              { img: 'https://images.unsplash.com/photo-1530521954074-e64f6810b32d', delay: 0.4 },
+            ].map((item, index) => (
+              <Box
+                key={index}
+                sx={{
+                  position: 'absolute',
+                  width: '250px',
+                  height: '350px',
+                  borderRadius: '20px',
+                  overflow: 'hidden',
+                  boxShadow: '0 20px 40px rgba(0,0,0,0.3)',
+                  animation: `${float} 6s ease-in-out infinite`,
+                  animationDelay: `${item.delay}s`,
+                  '&:nth-of-type(1)': { top: '0%', right: '20%', transform: 'rotate(10deg)' },
+                  '&:nth-of-type(2)': { top: '20%', right: '50%', transform: 'rotate(-5deg)' },
+                  '&:nth-of-type(3)': { top: '40%', right: '10%', transform: 'rotate(7deg)' },
+                }}
+              >
+                <img
+                  src={item.img}
+                  alt="Travel"
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                  }}
+                />
+              </Box>
+            ))}
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  ), []);
+
+  // Use lazy loading for sections
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
+        {/* Critical content loads immediately */}
+        <AppBar position="sticky" sx={appBarStyles}>
           <Container maxWidth="lg">
             <Toolbar sx={{ justifyContent: "center" }}>
               <Link
@@ -398,7 +972,7 @@ const SplashPage = ({ setIsLoggedIn }) => {
                 offset={-70}
                 duration={500}
               >
-                <Button sx={{ mx: 2, color: "#5A7BB8e" }}>Home</Button>
+                <Button sx={improvedButtonStyles}>Home</Button>
               </Link>
               <Link
                 activeClass="active"
@@ -408,7 +982,7 @@ const SplashPage = ({ setIsLoggedIn }) => {
                 offset={-70}
                 duration={500}
               >
-                <Button sx={{ mx: 2, color: "#5A7BB8e" }}>How It Works</Button>
+                <Button sx={improvedButtonStyles}>How It Works</Button>
               </Link>
               <Link
                 activeClass="active"
@@ -418,93 +992,87 @@ const SplashPage = ({ setIsLoggedIn }) => {
                 offset={-70}
                 duration={500}
               >
-                <Button sx={{ mx: 2, color: "#5A7BB8e" }}>Gallery</Button>
+                <Button sx={improvedButtonStyles}>Gallery</Button>
               </Link>
             </Toolbar>
           </Container>
         </AppBar>
 
-        {/* Hero Section */}
+        {memoizedHeroContent}
 
-        <Box
-          id="hero"
-          sx={{
-            // backgroundImage: `url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0')`,
-            backgroundImage: `url(https://miro.medium.com/v2/resize:fit:1400/1*cGZF-4g_DbSgUsE3yjmphA.jpeg)`,
-            backgroundSize: "cover",
-            backgroundBlendMode: "saturation",
-            backgroundPosition: "center",
-            color: "white",
-            textAlign: "center",
-            py: 8,
-            minHeight: "80vh",
-          }}
-        >
-          <Container maxWidth="lg">
-            {/* <Typography variant="h2" component="h1" gutterBottom>
-              Plan Your Perfect Trip
-            </Typography> */}
-            <Typography
-              sx={{
-                fontSize: "4rem",
-                color: "white",
-                fontWeight: 700,
-                lineHeight: 1.2,
-                marginBottom: "2rem",
-                textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-                "&:hover": {
-                  transform: "scale(1.05)",
-                },
-              }}
-            >
-              Plan Your Perfect Trip
-            </Typography>
-            <Typography
-              variant="h6"
-              component="p"
-              sx={{ mb: 4, color: "white" }}
-            >
-              Discover new destinations, create your itinerary, and explore with
-              ease.
-            </Typography>
-            <Button
-              variant="contained"
-              color="primary"
-              size="large"
-              onClick={openSignup}
-              sx={{ mr: 2 }}
-            >
-              Get Started
-            </Button>
-            <Button
-              variant="outlined"
-              color="inherit"
-              size="large"
-              onClick={openLogin}
-              sx={{
-                mr: 2,
-                width: "120px",
-                "&:hover": {
-                  transform: "scale(1.02)",
-                  boxShadow: "0 6px 10px #FFFFFF",
-                },
-              }}
-            >
-              Login
-            </Button>
-          </Container>
-        </Box>
+        {/* Lazy load non-critical sections */}
+        <Suspense fallback={<CircularProgress />}>
+          <Box id="howItWorks" sx={{ py: 12, backgroundColor: '#f8f9fa' }}>
+            <Container maxWidth="lg">
+              <Typography 
+                variant="h3" 
+                component="h2" 
+                align="center" 
+                sx={{ 
+                  mb: 6,
+                  fontWeight: 700,
+                  background: 'linear-gradient(45deg, #1565c0, #5c6bc0)',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                }}
+              >
+                How It Works
+              </Typography>
+              <Grid container spacing={4}>
+                {[
+                  {
+                    icon: <FaSearchLocation size={48} />,
+                    title: "Discover",
+                    description: "Find your ideal destinations with our AI-powered search"
+                  },
+                  {
+                    icon: <FaRegCalendarAlt size={48} />,
+                    title: "Plan",
+                    description: "Create personalized itineraries with smart suggestions"
+                  },
+                  {
+                    icon: <FaMapMarkedAlt size={48} />,
+                    title: "Explore",
+                    description: "Experience your journey with our interactive guides"
+                  }
+                ].map((feature, index) => (
+                  <Grid item xs={12} md={4} key={index}>
+                    <Box sx={featureCardStyles}>
+                      <Box sx={{ color: theme.palette.primary.main, mb: 2 }}>
+                        {feature.icon}
+                      </Box>
+                      <Typography variant="h5" component="h3" sx={{ mb: 2, fontWeight: 600 }}>
+                        {feature.title}
+                      </Typography>
+                      <Typography variant="body1" color="text.secondary">
+                        {feature.description}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                ))}
+              </Grid>
+            </Container>
+          </Box>
+        </Suspense>
+
+        <Suspense fallback={<CircularProgress />}>
+          <GallerySection />
+        </Suspense>
+
+        {/* Optimize dialogs with dynamic imports */}
         {visibleLogin && (
-          <Dialog open={visibleLogin} onClose={closeLogin}>
-            <DialogTitle>Login</DialogTitle>
-            <DialogContent>
-              <Login
-                setIsLoggedIn={setIsLoggedIn}
-                closeLogin={closeLogin}
-                openSignup={openSignup}
-              />
-            </DialogContent>
-          </Dialog>
+          <Suspense fallback={<CircularProgress />}>
+            <Dialog open={visibleLogin} onClose={closeLogin}>
+              <DialogTitle>Login</DialogTitle>
+              <DialogContent>
+                <Login
+                  setIsLoggedIn={setIsLoggedIn}
+                  closeLogin={closeLogin}
+                  openSignup={openSignup}
+                />
+              </DialogContent>
+            </Dialog>
+          </Suspense>
         )}
 
         {visibleSignup && (
@@ -534,84 +1102,6 @@ const SplashPage = ({ setIsLoggedIn }) => {
           />
         )}
 
-        {/* How It Works Section */}
-        <Box
-          id="howItWorks"
-          sx={{ minHeight: "100vh", backgroundColor: "#ffffff" }}
-        >
-          <Container id="howItWorks" maxWidth="lg" sx={{ my: 8 }}>
-            <Typography variant="h4" component="h2" align="center" gutterBottom>
-              How It Works
-            </Typography>
-            <Grid container spacing={4} sx={{ mt: 4 }}>
-              <Grid item xs={12} md={4}>
-                <Box sx={{ textAlign: "center", padding: 2 }}>
-                  <FaSearchLocation
-                    size={48}
-                    color={theme.palette.primary.main}
-                  />
-                  <Typography variant="h6" component="h3" sx={{ mt: 2 }}>
-                    Search
-                  </Typography>
-                  <Typography variant="body1">
-                    Find your ideal trip by searching our extensive database of
-                    destinations.
-                  </Typography>
-                </Box>
-              </Grid>
-              <Grid item xs={12} md={4}>
-                <Box sx={{ textAlign: "center", padding: 2 }}>
-                  <FaRegCalendarAlt
-                    size={48}
-                    color={theme.palette.primary.main}
-                  />
-                  <Typography variant="h6" component="h3" sx={{ mt: 2 }}>
-                    Plan
-                  </Typography>
-                  <Typography variant="body1">
-                    Organize your itinerary with our easy-to-use planning tools.
-                  </Typography>
-                </Box>
-              </Grid>
-              <Grid item xs={12} md={4}>
-                <Box sx={{ textAlign: "center", padding: 2 }}>
-                  <FaMapMarkedAlt
-                    size={48}
-                    color={theme.palette.primary.main}
-                  />
-                  <Typography variant="h6" component="h3" sx={{ mt: 2 }}>
-                    Explore
-                  </Typography>
-                  <Typography variant="body1">
-                    Discover hidden gems and popular spots with expert
-                    recommendations.
-                  </Typography>
-                </Box>
-              </Grid>
-            </Grid>
-          </Container>
-        </Box>
-
-        {/* Gallery Section */}
-        <Box
-          id="gallery"
-          sx={{ minHeight: "100vh", backgroundColor: "#e3f2fd" }}
-        >
-          <Box id="gallery" sx={{ backgroundColor: "#f4f6f8", py: 8 }}>
-            <Container maxWidth="lg">
-              <Typography
-                variant="h4"
-                component="h2"
-                align="center"
-                gutterBottom
-              >
-                Gallery
-              </Typography>
-              <ImageCarousel />
-            </Container>
-          </Box>
-        </Box>
-
         {/* Reviews Section */}
 
         {/* Footer */}
@@ -646,6 +1136,22 @@ const SplashPage = ({ setIsLoggedIn }) => {
       </Box>
     </ThemeProvider>
   );
+});
+
+// 6. Add performance monitoring
+const withPerformanceTracking = (WrappedComponent) => {
+  return function WithPerformanceTracking(props) {
+    useEffect(() => {
+      const startTime = performance.now();
+      
+      return () => {
+        const endTime = performance.now();
+        console.log(`Component rendered in ${endTime - startTime}ms`);
+      };
+    }, []);
+
+    return <WrappedComponent {...props} />;
+  };
 };
 
-export default SplashPage;
+export default withPerformanceTracking(SplashPage);