diff --git a/app/globals.css b/app/globals.css
index a2dc41e..95e93d5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,8 +1,8 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #87ceeb; /* Sky blue */
+  --foreground: #0f172a; /* Dark slate */
 }
 
 @theme inline {
@@ -14,13 +14,46 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #0ea5e9; /* Deeper sky blue for dark mode */
+    --foreground: #f8fafc;
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
+  font-size: 1.125rem; /* Increased base font size */
+}
+
+/* Custom animation classes */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.8s ease-out forwards;
+}
+
+.animate-delay-100 {
+  animation-delay: 100ms;
+}
+
+.animate-delay-200 {
+  animation-delay: 200ms;
+}
+
+.animate-delay-300 {
+  animation-delay: 300ms;
 }
diff --git a/app/page.tsx b/app/page.tsx
index 295f8fd..8681af0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,62 +2,71 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <div className="relative flex min-h-screen items-center justify-center font-sans overflow-hidden bg-slate-900 transition-colors duration-1000">
+      
+      {/* Background Animated Gradient Orbs */}
+      <div className="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] rounded-full bg-blue-500/30 blur-[120px] mix-blend-screen animate-pulse duration-[8000ms]" />
+      <div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] rounded-full bg-cyan-400/20 blur-[130px] mix-blend-screen animate-pulse duration-[10000ms] delay-1000" />
+      <div className="absolute top-[20%] right-[10%] w-[300px] h-[300px] rounded-full bg-violet-500/20 blur-[90px] mix-blend-screen animate-pulse duration-[7000ms] delay-500" />
+
+      {/* Main Glassmorphic Container */}
+      <main className="relative z-10 flex w-full max-w-5xl flex-col items-center justify-center p-8 sm:p-16 animate-fade-in-up">
+        
+        {/* Glass Card */}
+        <div className="flex flex-col items-center justify-center text-center bg-white/5 dark:bg-black/20 backdrop-blur-2xl border border-white/10 p-12 sm:p-20 rounded-[3rem] shadow-[0_8px_32px_0_rgba(31,38,135,0.3)] transition-all duration-500 hover:border-white/20 hover:shadow-[0_8px_40px_0_rgba(31,38,135,0.4)]">
+          
+          <div className="mb-8 inline-flex items-center gap-3 px-6 py-2 rounded-full bg-blue-500/10 border border-blue-400/20 text-blue-300 font-medium text-sm tracking-wide shadow-inner animate-fade-in-up animate-delay-100">
+            <span className="relative flex h-3 w-3">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
+            </span>
+            Meet UniSync 2.0
+          </div>
+          
+          <h1 className="max-w-3xl text-5xl sm:text-7xl font-extrabold leading-[1.1] tracking-tight text-white mb-6 animate-fade-in-up animate-delay-200">
+            Master Your Time, <br className="hidden sm:block" />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-violet-500 drop-shadow-sm">
+              Ace Your Classes.
+            </span>
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
+          
+          <p className="max-w-2xl text-lg sm:text-xl leading-relaxed text-slate-300 font-medium mb-12 animate-fade-in-up animate-delay-300">
+            AI-powered schedule optimization that syncs directly with your university. Find your best times to study, collaborate, and relax without the guesswork.
+          </p>
+
+          {/* Call To Action Buttons */}
+          <div className="flex flex-col w-full sm:w-auto gap-5 sm:flex-row animate-fade-in-up animate-delay-300">
             <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+              className="group relative flex h-16 items-center justify-center gap-3 rounded-full bg-white px-10 text-lg font-bold text-slate-900 transition-all duration-300 hover:scale-105 hover:bg-slate-100 hover:shadow-[0_0_30px_rgba(255,255,255,0.5)] active:scale-95"
+              href="#"
             >
-              Templates
-            </a>{" "}
-            or the{" "}
+              Start Free Trial
+              <svg className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M5 12h14"></path>
+                <path d="m12 5 7 7-7 7"></path>
+              </svg>
+            </a>
             <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+              className="group flex h-16 items-center justify-center rounded-full border-2 border-slate-700/50 bg-slate-800/30 px-10 text-lg font-bold text-white backdrop-blur-md transition-all duration-300 hover:scale-105 hover:border-blue-500/50 hover:bg-slate-800/60 hover:shadow-[0_0_20px_rgba(59,130,246,0.3)] active:scale-95"
+              href="#"
             >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+              Watch Demo
+              <svg className="ml-3 w-5 h-5 opacity-70 group-hover:opacity-100" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M8 5v14l11-7z"></path>
+              </svg>
+            </a>
+          </div>
+
+          {/* Social Proof */}
+          <div className="mt-16 pt-8 border-t border-slate-700/50 w-full animate-fade-in-up animate-delay-300">
+            <p className="text-sm font-semibold tracking-widest text-slate-400 uppercase mb-4">Trusted by students at</p>
+            <div className="flex flex-wrap justify-center gap-6 sm:gap-12 opacity-50 grayscale transition-all duration-500 hover:grayscale-0 hover:opacity-100">
+              {['Stanford', 'MIT', 'Harvard', 'Oxford'].map((uni) => (
+                <span key={uni} className="text-xl sm:text-2xl font-bold font-serif text-slate-300">{uni}</span>
+              ))}
+            </div>
+          </div>
+          
         </div>
       </main>
     </div>