diff --git a/frontend/public/Feature_images/Contribution_Analytics.png b/frontend/public/Feature_images/Contribution_Analytics.png
new file mode 100644
index 0000000..81c9359
Binary files /dev/null and b/frontend/public/Feature_images/Contribution_Analytics.png differ
diff --git a/frontend/public/Feature_images/Github_README_AI.png b/frontend/public/Feature_images/Github_README_AI.png
index bab984f..4787cfb 100644
Binary files a/frontend/public/Feature_images/Github_README_AI.png and b/frontend/public/Feature_images/Github_README_AI.png differ
diff --git a/frontend/public/Feature_images/Smart Notifications.png b/frontend/public/Feature_images/Smart Notifications.png
new file mode 100644
index 0000000..f4d8392
Binary files /dev/null and b/frontend/public/Feature_images/Smart Notifications.png differ
diff --git a/frontend/src/components/ui/Logo.jsx b/frontend/src/components/ui/Logo.jsx
index 847b8a5..ba2f8ce 100644
--- a/frontend/src/components/ui/Logo.jsx
+++ b/frontend/src/components/ui/Logo.jsx
@@ -60,9 +60,9 @@ const Logo = ({
       text: 'text-foreground'
     },
     auth: {
-      container: 'bg-white/90 dark:bg-gray-800/90 border border-gray-200 dark:border-gray-600 rounded-xl shadow-lg backdrop-blur-sm',
-      icon: 'text-blue-600 dark:text-blue-400',
-      text: 'text-gray-900 dark:text-white font-bold'
+      container: 'bg-neutral-50 dark:bg-neutral-800/30 border border-neutral-200 dark:border-neutral-700 rounded-lg',
+      icon: 'text-neutral-600 dark:text-neutral-400',
+      text: 'text-neutral-900 dark:text-neutral-100'
     }
   }
 
diff --git a/frontend/src/components/ui/ScrollytellingFeatureShowcase.jsx b/frontend/src/components/ui/ScrollytellingFeatureShowcase.jsx
index 937dba1..d9ee07f 100644
--- a/frontend/src/components/ui/ScrollytellingFeatureShowcase.jsx
+++ b/frontend/src/components/ui/ScrollytellingFeatureShowcase.jsx
@@ -11,16 +11,18 @@ const ScrollytellingFeatureShowcase = forwardRef(({ features, title, subtitle },
   const scrollTimeout = useRef(null)
   const isContinuousScrolling = useRef(false)
 
-  // Map features to their corresponding images (updated order after removing Contribution Analytics & Smart Notifications)
+  // Map features to their corresponding images (exact order from LandingPage.jsx)
   const getFeatureImage = (index) => {
     const imageMap = {
       0: '/Feature_images/Auto_Commit_AI_Scheduling.png', // Auto Commit AI Scheduling ✅
       1: '/Feature_images/Multi-Repository_Github_Tools.png', // Multi-Repository GitHub Tools ✅
       2: '/Feature_images/Github_README_AI.png', // GitHub README AI ✅
-      3: '/Feature_images/Enterprise_Security.png', // Enterprise Security ✅
-      4: '/Feature_images/Goal_Tracking.png', // Goal Tracking ✅
-      5: '/Feature_images/Analytics_Dashboard.png', // Analytics Dashboard ✅
-      6: '/Feature_images/README_Generation.png', // README Generation ✅
+      3: '/Feature_images/Contribution_Analytics.png', // Contribution Analytics ✅
+      4: '/Feature_images/Enterprise_Security.png', // Enterprise Security ✅
+      5: '/Feature_images/Goal_Tracking.png', // Goal Tracking ✅
+      6: '/Feature_images/Analytics_Dashboard.png', // Analytics Dashboard ✅
+      7: '/Feature_images/Smart Notifications.png', // Smart Notifications ✅
+      8: '/Feature_images/README_Generation.png', // README Generation ✅
     }
     return imageMap[index] || '/Feature_images/Analytics_Dashboard.png' // Default fallback
   }
diff --git a/frontend/src/pages/LandingPage.jsx b/frontend/src/pages/LandingPage.jsx
index f7687ad..3db70c9 100644
--- a/frontend/src/pages/LandingPage.jsx
+++ b/frontend/src/pages/LandingPage.jsx
@@ -72,7 +72,12 @@ const LandingPage = () => {
       description: "Create stunning GitHub profile READMEs with our advanced GitHub README AI. The best README AI generator for professional GitHub profiles.",
       color: "from-amber-500 to-orange-500"
     },
-
+    {
+      icon: Activity,
+      title: "Contribution Analytics",
+      description: "Track your coding consistency with beautiful visualizations and insights that help you stay motivated.",
+      color: "from-green-500 to-emerald-500"
+    },
     {
       icon: Shield,
       title: "Enterprise Security",
@@ -91,7 +96,12 @@ const LandingPage = () => {
       description: "Get detailed insights into your coding patterns, streak statistics, and productivity trends with charts.",
       color: "from-teal-500 to-cyan-500"
     },
-
+    {
+      icon: Mail,
+      title: "Smart Notifications",
+      description: "Receive intelligent email alerts about your streaks, achievements, and important repository updates.",
+      color: "from-orange-500 to-red-500"
+    },
     {
       icon: FileText,
       title: "README Generation",
diff --git a/frontend/src/pages/SignInPage.jsx b/frontend/src/pages/SignInPage.jsx
index 6f2abd5..fdd3746 100644
--- a/frontend/src/pages/SignInPage.jsx
+++ b/frontend/src/pages/SignInPage.jsx
@@ -68,78 +68,60 @@ const SignInPage = () => {
           fontFamily: '"Inter", "Poppins", sans-serif',
         },
     elements: {
-      // Main card styling
-      card: 'shadow-none border-0 bg-transparent',
+      formButtonPrimary: 'bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2.5 px-4 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-sm hover:shadow-md',
+      card: 'shadow-none border-0',
       headerTitle: 'hidden',
       headerSubtitle: 'hidden',
-
-      // Primary button (Continue/Sign In) - Better mobile sizing
-      formButtonPrimary: 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold py-3 sm:py-4 px-6 sm:px-8 rounded-lg sm:rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 w-full text-base sm:text-lg',
-
-      // Social buttons (GitHub, Google, etc.) - Better mobile sizing
       socialButtonsBlockButton:
-        'border-2 border-gray-200 dark:border-gray-600 hover:border-blue-300 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg sm:rounded-xl transition-all duration-300 hover:shadow-md py-3 sm:py-4 px-4 w-full',
-      socialButtonsBlockButtonText: 'text-gray-700 dark:text-gray-300 font-medium',
-
-      // Form inputs - Better mobile sizing
+        'border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 rounded-md transition-all duration-200 hover:shadow-sm',
+      socialButtonsBlockButtonText: 'text-slate-600 dark:text-slate-300 font-medium',
       formFieldInput:
-        'border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-white placeholder-gray-400 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 rounded-lg sm:rounded-xl transition-all duration-200 py-3 sm:py-4 px-3 sm:px-4 text-base w-full',
-      formFieldLabel: 'text-gray-700 dark:text-gray-300 font-semibold text-sm sm:text-base mb-2',
-
-      // Links and text
-      footerActionLink: 'text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-semibold transition-colors duration-200',
-
-      // Divider
-      dividerLine: 'bg-gray-200 dark:bg-gray-600',
-      dividerText: 'text-gray-500 dark:text-gray-400 text-sm font-medium',
-
-      // OTP/Verification inputs
+        'border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-400 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 rounded-md transition-colors duration-200',
+      formFieldLabel: 'text-slate-700 dark:text-slate-300 font-medium text-sm',
+      footerActionLink: 'text-indigo-600 hover:text-indigo-700 font-medium transition-colors duration-200',
+      dividerLine: 'bg-slate-200 dark:bg-slate-700',
+      dividerText: 'text-slate-500 dark:text-slate-400 text-sm',
+      // Specific styling for OTP inputs to prevent disappearing
       otpCodeFieldInput:
-        'border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center font-mono rounded-xl',
-      verificationCodeField: 'space-x-3',
+        'border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-center font-mono rounded-md',
+      verificationCodeField: 'space-x-2',
       verificationCodeFieldInput:
-        'w-14 h-14 text-center border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-xl rounded-xl transition-all duration-200',
-
-      // Hide Clerk branding
-      footer: 'hidden',
-      footerAction: 'hidden',
-      footerActionText: 'hidden',
-      footerActionLink: 'hidden',
+        'w-12 h-12 text-center border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 font-mono text-lg rounded-md',
     },
   }), [isDark])
 
-  // Mobile Design
-  const MobileDesign = () => (
-    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-800 flex flex-col">
-      {/* Mobile Header */}
-      <div className="flex-shrink-0 pt-12 pb-8 px-6 text-center">
-        <div className="flex justify-center mb-6">
-          <div className="bg-blue-600 dark:bg-blue-500 p-4 rounded-2xl shadow-lg">
-            <GitBranch className="h-8 w-8 text-white" />
-          </div>
-        </div>
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-          Welcome back
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400 text-sm">
-          Sign in to continue
-        </p>
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400/10 dark:bg-indigo-400/5 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400/10 dark:bg-purple-400/5 rounded-full blur-3xl"></div>
       </div>
+      <div className="sm:mx-auto sm:w-full sm:max-w-md relative z-10">
+        <div className="flex justify-center mb-8">
+          <Logo variant="auth" size="xl" />
+        </div>
 
-      {/* Mobile Auth Card */}
-      <div className="flex-1 bg-white dark:bg-gray-800 rounded-t-3xl shadow-2xl px-6 py-8 relative flex flex-col items-center">
-        {/* Handle bar */}
-        <div className="w-12 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mb-8"></div>
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">
+            Welcome back
+          </h2>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            Sign in to your account to continue automating your GitHub commits
+          </p>
+        </div>
+      </div>
 
-        <div className="w-full max-w-sm mx-auto">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md relative z-10">
+        <div className="bg-white dark:bg-slate-800 py-8 px-6 shadow-xl border border-slate-200 dark:border-slate-700 sm:rounded-xl sm:px-10 backdrop-blur-sm">
           {clerkError ? (
             <div className="text-center">
-              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 mb-6">
+              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
                 <p className="text-red-600 dark:text-red-400 text-sm">{clerkError}</p>
               </div>
               <button
                 onClick={() => window.location.reload()}
-                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl text-sm font-medium transition-colors duration-200 w-full"
+                className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
               >
                 Refresh Page
               </button>
@@ -147,29 +129,7 @@ const SignInPage = () => {
           ) : (
             <ClerkErrorBoundary>
               <SignIn
-                appearance={{
-                  ...clerkAppearance,
-                  elements: {
-                    ...clerkAppearance.elements,
-                    // Mobile-specific overrides with centering
-                    card: 'shadow-none border-0 bg-transparent w-full',
-                    formButtonPrimary: 'bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 w-full text-base shadow-lg',
-                    socialButtonsBlockButton: 'border-2 border-gray-200 dark:border-gray-600 hover:border-blue-300 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-xl py-4 px-4 w-full mb-3',
-                    socialButtonsBlock: 'w-full',
-                    formFieldInput: 'border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-white rounded-xl py-4 px-4 text-base w-full',
-                    formFieldLabel: 'text-gray-700 dark:text-gray-300 font-medium text-base mb-2',
-                    dividerText: 'text-gray-500 dark:text-gray-400 text-sm text-center',
-                    dividerLine: 'bg-gray-200 dark:bg-gray-600',
-                    form: 'w-full',
-                    // Hide Clerk branding completely
-                    footer: 'hidden !important',
-                    footerAction: 'hidden !important',
-                    footerActionText: 'hidden !important',
-                    footerActionLink: 'hidden !important',
-                    footerPages: 'hidden !important',
-                    footerPagesLink: 'hidden !important',
-                  }
-                }}
+                appearance={clerkAppearance}
                 signUpUrl="/sign-up"
                 routing="path"
                 path="/sign-in"
@@ -177,118 +137,9 @@ const SignInPage = () => {
             </ClerkErrorBoundary>
           )}
         </div>
-
-        {/* Mobile Footer */}
-        <div className="text-center mt-8 pt-6 border-t border-gray-100 dark:border-gray-700">
-          <p className="text-gray-500 dark:text-gray-400 text-sm">
-            Don't have an account?{' '}
-            <Link
-              to="/sign-up"
-              className="text-blue-600 dark:text-blue-400 font-semibold"
-            >
-              Sign up
-            </Link>
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-
-  // Desktop Design
-  const DesktopDesign = () => (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center px-6 lg:px-8 relative overflow-hidden">
-      {/* Enhanced Background Effects */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        {/* Primary gradient orbs */}
-        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-blue-400/20 to-purple-400/20 dark:from-blue-500/10 dark:to-purple-500/10 rounded-full blur-3xl animate-pulse"></div>
-        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-gradient-to-r from-indigo-400/20 to-cyan-400/20 dark:from-indigo-500/10 dark:to-cyan-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
-
-        {/* Grid pattern */}
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:20px_20px]"></div>
-      </div>
-
-      {/* Main Container */}
-      <div className="w-full max-w-lg mx-auto relative z-10">
-        {/* Logo Section */}
-        <div className="text-center mb-10">
-          <div className="flex justify-center mb-6">
-            <Logo variant="auth" size="xl" />
-          </div>
-          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-3">
-            Welcome back
-          </h1>
-          <p className="text-gray-600 dark:text-gray-400 text-lg">
-            Sign in to your account to continue automating your GitHub commits
-          </p>
-        </div>
-
-        {/* Auth Card */}
-        <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl shadow-2xl shadow-gray-500/10 dark:shadow-black/20 p-8 relative">
-          {/* Card glow effect */}
-          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 dark:from-blue-400/5 dark:to-purple-400/5 rounded-2xl"></div>
-
-          <div className="relative z-10">
-            {clerkError ? (
-              <div className="text-center">
-                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 mb-4">
-                  <p className="text-red-600 dark:text-red-400 text-sm">{clerkError}</p>
-                </div>
-                <button
-                  onClick={() => window.location.reload()}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl text-sm font-medium transition-colors duration-200 w-full"
-                >
-                  Refresh Page
-                </button>
-              </div>
-            ) : (
-              <ClerkErrorBoundary>
-                <SignIn
-                  appearance={clerkAppearance}
-                  signUpUrl="/sign-up"
-                  routing="path"
-                  path="/sign-in"
-                />
-              </ClerkErrorBoundary>
-            )}
-          </div>
-        </div>
-
-        {/* Desktop Footer */}
-        <div className="text-center mt-8">
-          <p className="text-gray-500 dark:text-gray-400 text-base">
-            Don't have an account?{' '}
-            <Link
-              to="/sign-up"
-              className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors duration-200"
-            >
-              Sign up for free
-            </Link>
-          </p>
-          <div className="flex items-center justify-center mt-4 space-x-4 text-sm text-gray-400 dark:text-gray-500">
-            <span>Secure</span>
-            <span>•</span>
-            <span>Reliable</span>
-            <span>•</span>
-            <span>Fast</span>
-          </div>
-        </div>
       </div>
     </div>
   )
-
-  return (
-    <>
-      {/* Mobile Design - Hidden on SM and up */}
-      <div className="sm:hidden">
-        <MobileDesign />
-      </div>
-
-      {/* Desktop Design - Hidden on mobile */}
-      <div className="hidden sm:block">
-        <DesktopDesign />
-      </div>
-    </>
-  )
 }
 
 export default SignInPage
diff --git a/frontend/src/pages/SignUpPage.jsx b/frontend/src/pages/SignUpPage.jsx
index 2ef46f0..788b617 100644
--- a/frontend/src/pages/SignUpPage.jsx
+++ b/frontend/src/pages/SignUpPage.jsx
@@ -68,78 +68,59 @@ const SignUpPage = () => {
           fontFamily: '"Inter", "Poppins", sans-serif',
         },
     elements: {
-      // Main card styling
-      card: 'shadow-none border-0 bg-transparent',
+      formButtonPrimary: 'bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2.5 px-4 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-sm hover:shadow-md',
+      card: 'shadow-none border-0',
       headerTitle: 'hidden',
       headerSubtitle: 'hidden',
-
-      // Primary button (Continue/Sign Up) - Better mobile sizing
-      formButtonPrimary: 'bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white font-semibold py-3 sm:py-4 px-6 sm:px-8 rounded-lg sm:rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 w-full text-base sm:text-lg',
-
-      // Social buttons (GitHub, Google, etc.) - Better mobile sizing
       socialButtonsBlockButton:
-        'border-2 border-gray-200 dark:border-gray-600 hover:border-green-300 dark:hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg sm:rounded-xl transition-all duration-300 hover:shadow-md py-3 sm:py-4 px-4 w-full',
-      socialButtonsBlockButtonText: 'text-gray-700 dark:text-gray-300 font-medium',
-
-      // Form inputs - Better mobile sizing
+        'border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 rounded-md transition-all duration-200 hover:shadow-sm',
+      socialButtonsBlockButtonText: 'text-slate-600 dark:text-slate-300 font-medium',
       formFieldInput:
-        'border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-white placeholder-gray-400 dark:placeholder-gray-400 focus:ring-2 focus:ring-green-500 focus:border-green-500 rounded-lg sm:rounded-xl transition-all duration-200 py-3 sm:py-4 px-3 sm:px-4 text-base w-full',
-      formFieldLabel: 'text-gray-700 dark:text-gray-300 font-semibold text-sm sm:text-base mb-2',
-
-      // Links and text
-      footerActionLink: 'text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 font-semibold transition-colors duration-200',
-
-      // Divider
-      dividerLine: 'bg-gray-200 dark:bg-gray-600',
-      dividerText: 'text-gray-500 dark:text-gray-400 text-sm font-medium',
-
-      // OTP/Verification inputs
+        'border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-400 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 rounded-md transition-colors duration-200',
+      formFieldLabel: 'text-slate-700 dark:text-slate-300 font-medium text-sm',
+      footerActionLink: 'text-indigo-600 hover:text-indigo-700 font-medium transition-colors duration-200',
+      dividerLine: 'bg-slate-200 dark:bg-slate-700',
+      dividerText: 'text-slate-500 dark:text-slate-400 text-sm',
       otpCodeFieldInput:
-        'border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-white focus:ring-2 focus:ring-green-500 focus:border-green-500 text-center font-mono rounded-xl',
-      verificationCodeField: 'space-x-3',
+        'border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-center font-mono rounded-md',
+      verificationCodeField: 'space-x-2',
       verificationCodeFieldInput:
-        'w-14 h-14 text-center border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-white focus:ring-2 focus:ring-green-500 focus:border-green-500 font-mono text-xl rounded-xl transition-all duration-200',
-
-      // Hide Clerk branding
-      footer: 'hidden',
-      footerAction: 'hidden',
-      footerActionText: 'hidden',
-      footerActionLink: 'hidden',
+        'w-12 h-12 text-center border-slate-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 font-mono text-lg rounded-md',
     },
   }), [isDark])
 
-  // Mobile Design
-  const MobileDesign = () => (
-    <div className="min-h-screen bg-gradient-to-b from-green-50 to-white dark:from-gray-900 dark:to-gray-800 flex flex-col">
-      {/* Mobile Header */}
-      <div className="flex-shrink-0 pt-12 pb-8 px-6 text-center">
-        <div className="flex justify-center mb-6">
-          <div className="bg-green-600 dark:bg-green-500 p-4 rounded-2xl shadow-lg">
-            <GitBranch className="h-8 w-8 text-white" />
-          </div>
-        </div>
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-          Create account
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400 text-sm">
-          Start your free trial today
-        </p>
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative overflow-hidden">
+      {/* Background decoration */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400/10 dark:bg-indigo-400/5 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400/10 dark:bg-purple-400/5 rounded-full blur-3xl"></div>
       </div>
+      <div className="sm:mx-auto sm:w-full sm:max-w-md relative z-10">
+        <div className="flex justify-center mb-8">
+          <Logo variant="auth" size="xl" />
+        </div>
 
-      {/* Mobile Auth Card */}
-      <div className="flex-1 bg-white dark:bg-gray-800 rounded-t-3xl shadow-2xl px-6 py-8 relative flex flex-col items-center">
-        {/* Handle bar */}
-        <div className="w-12 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mb-8"></div>
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">
+            Create your account
+          </h2>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            Start automating your GitHub commits today - it's free!
+          </p>
+        </div>
+      </div>
 
-        <div className="w-full max-w-sm mx-auto">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md relative z-10">
+        <div className="bg-white dark:bg-slate-800 py-8 px-6 shadow-xl border border-slate-200 dark:border-slate-700 sm:rounded-xl sm:px-10 backdrop-blur-sm">
           {clerkError ? (
             <div className="text-center">
-              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 mb-6">
+              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
                 <p className="text-red-600 dark:text-red-400 text-sm">{clerkError}</p>
               </div>
               <button
                 onClick={() => window.location.reload()}
-                className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-xl text-sm font-medium transition-colors duration-200 w-full"
+                className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
               >
                 Refresh Page
               </button>
@@ -147,29 +128,7 @@ const SignUpPage = () => {
           ) : (
             <ClerkErrorBoundary>
               <SignUp
-                appearance={{
-                  ...clerkAppearance,
-                  elements: {
-                    ...clerkAppearance.elements,
-                    // Mobile-specific overrides with centering
-                    card: 'shadow-none border-0 bg-transparent w-full',
-                    formButtonPrimary: 'bg-green-600 hover:bg-green-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 w-full text-base shadow-lg',
-                    socialButtonsBlockButton: 'border-2 border-gray-200 dark:border-gray-600 hover:border-green-300 dark:hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-xl py-4 px-4 w-full mb-3',
-                    socialButtonsBlock: 'w-full',
-                    formFieldInput: 'border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700/50 dark:text-white rounded-xl py-4 px-4 text-base w-full',
-                    formFieldLabel: 'text-gray-700 dark:text-gray-300 font-medium text-base mb-2',
-                    dividerText: 'text-gray-500 dark:text-gray-400 text-sm text-center',
-                    dividerLine: 'bg-gray-200 dark:bg-gray-600',
-                    form: 'w-full',
-                    // Hide Clerk branding completely
-                    footer: 'hidden !important',
-                    footerAction: 'hidden !important',
-                    footerActionText: 'hidden !important',
-                    footerActionLink: 'hidden !important',
-                    footerPages: 'hidden !important',
-                    footerPagesLink: 'hidden !important',
-                  }
-                }}
+                appearance={clerkAppearance}
                 signInUrl="/sign-in"
                 routing="path"
                 path="/sign-up"
@@ -177,118 +136,9 @@ const SignUpPage = () => {
             </ClerkErrorBoundary>
           )}
         </div>
-
-        {/* Mobile Footer */}
-        <div className="text-center mt-8 pt-6 border-t border-gray-100 dark:border-gray-700">
-          <p className="text-gray-500 dark:text-gray-400 text-sm">
-            Already have an account?{' '}
-            <Link
-              to="/sign-in"
-              className="text-green-600 dark:text-green-400 font-semibold"
-            >
-              Sign in
-            </Link>
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-
-  // Desktop Design
-  const DesktopDesign = () => (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center px-6 lg:px-8 relative overflow-hidden">
-      {/* Enhanced Background Effects */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        {/* Primary gradient orbs */}
-        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-green-400/20 to-blue-400/20 dark:from-green-500/10 dark:to-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
-        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-gradient-to-r from-purple-400/20 to-pink-400/20 dark:from-purple-500/10 dark:to-pink-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
-
-        {/* Grid pattern */}
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:20px_20px]"></div>
-      </div>
-
-      {/* Main Container */}
-      <div className="w-full max-w-lg mx-auto relative z-10">
-        {/* Logo Section */}
-        <div className="text-center mb-10">
-          <div className="flex justify-center mb-6">
-            <Logo variant="auth" size="xl" />
-          </div>
-          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-3">
-            Create your account
-          </h1>
-          <p className="text-gray-600 dark:text-gray-400 text-lg">
-            Start automating your GitHub commits today - it's free!
-          </p>
-        </div>
-
-        {/* Auth Card */}
-        <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50 rounded-2xl shadow-2xl shadow-gray-500/10 dark:shadow-black/20 p-8 relative">
-          {/* Card glow effect */}
-          <div className="absolute inset-0 bg-gradient-to-r from-green-500/5 to-blue-500/5 dark:from-green-400/5 dark:to-blue-400/5 rounded-2xl"></div>
-
-          <div className="relative z-10">
-            {clerkError ? (
-              <div className="text-center">
-                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 mb-4">
-                  <p className="text-red-600 dark:text-red-400 text-sm">{clerkError}</p>
-                </div>
-                <button
-                  onClick={() => window.location.reload()}
-                  className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-xl text-sm font-medium transition-colors duration-200 w-full"
-                >
-                  Refresh Page
-                </button>
-              </div>
-            ) : (
-              <ClerkErrorBoundary>
-                <SignUp
-                  appearance={clerkAppearance}
-                  signInUrl="/sign-in"
-                  routing="path"
-                  path="/sign-up"
-                />
-              </ClerkErrorBoundary>
-            )}
-          </div>
-        </div>
-
-        {/* Desktop Footer */}
-        <div className="text-center mt-8">
-          <p className="text-gray-500 dark:text-gray-400 text-base">
-            Already have an account?{' '}
-            <Link
-              to="/sign-in"
-              className="text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 font-medium transition-colors duration-200"
-            >
-              Sign in here
-            </Link>
-          </p>
-          <div className="flex items-center justify-center mt-4 space-x-4 text-sm text-gray-400 dark:text-gray-500">
-            <span>Free Trial</span>
-            <span>•</span>
-            <span>No Credit Card</span>
-            <span>•</span>
-            <span>Cancel Anytime</span>
-          </div>
-        </div>
       </div>
     </div>
   )
-
-  return (
-    <>
-      {/* Mobile Design - Hidden on SM and up */}
-      <div className="sm:hidden">
-        <MobileDesign />
-      </div>
-
-      {/* Desktop Design - Hidden on mobile */}
-      <div className="hidden sm:block">
-        <DesktopDesign />
-      </div>
-    </>
-  )
 }
 
 export default SignUpPage