diff --git a/src/app/page.tsx b/src/app/page.tsx
index a4913cee..d11df3cf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,4 @@
+
 import Link from "next/link";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/lib/auth";
@@ -35,51 +36,90 @@ export default async function HomePage() {
   ];
 
   return (
-    <main className="min-h-screen flex flex-col items-center px-4 py-20">
-      <div className="max-w-2xl text-center">
-        <h1 className="text-5xl font-bold mb-4 text-[var(--foreground)]">
+    <main className="min-h-screen flex flex-col items-center px-6 py-16 md:py-20 bg-[var(--background)] overflow-hidden">
+
+      {/* HERO SECTION */}
+      <div className="max-w-3xl text-center animate-fade-in px-2">
+
+        <h1 className="text-5xl sm:text-6xl md:text-7xl font-extrabold mb-6 tracking-tight leading-tight text-[var(--foreground)]">
           DevTrack
         </h1>
-        <p className="text-xl text-[var(--muted-foreground)] mb-8">
+
+        <p className="text-lg sm:text-xl md:text-2xl text-[var(--muted-foreground)] mb-8 leading-relaxed max-w-2xl mx-auto">
           Open-source developer productivity dashboard. Track coding habits,
           visualize GitHub contributions, and hit your goals.
         </p>
-        <div className="flex gap-4 justify-center">
+
+        {/* BUTTONS */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+
           <Link
             href="/api/auth/signin/github?callbackUrl=/dashboard"
-            className="bg-[var(--foreground)] text-[var(--background)] px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition"
+            className="w-full sm:w-auto bg-[var(--foreground)] text-[var(--background)] px-8 py-3 rounded-2xl font-semibold shadow-lg hover:scale-105 transition-all duration-300"
           >
             Sign in with GitHub
           </Link>
+
           <a
             href="https://github.com/Priyanshu-byte-coder/devtrack"
             target="_blank"
             rel="noopener noreferrer"
-            className="border border-[var(--border)] text-[var(--foreground)] px-6 py-3 rounded-lg font-semibold hover:border-[var(--foreground)] transition"
+            className="w-full sm:w-auto border border-[var(--border)] text-[var(--foreground)] px-8 py-3 rounded-2xl font-semibold hover:bg-[var(--card)] hover:scale-105 transition-all duration-300"
           >
             View on GitHub
           </a>
         </div>
       </div>
 
-      <section className="w-full max-w-6xl mt-24">
-        <h2 className="text-3xl font-bold text-center text-[var(--foreground)] mb-12">
+      {/* FEATURES SECTION */}
+      <section className="w-full max-w-7xl mt-20 md:mt-24 px-2">
+
+        <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-center text-[var(--foreground)] mb-14 md:mb-16 tracking-tight leading-tight px-4">
           Everything you need to track your coding growth
         </h2>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+
           {features.map((feature) => (
+
             <div
               key={feature.title}
-              className="border border-[var(--border)] rounded-2xl p-6 bg-[var(--card)] hover:border-[var(--muted-foreground)] transition"
+              className="
+              group
+              relative
+              overflow-hidden
+              rounded-3xl
+              border border-[var(--border)]
+              bg-[var(--card)]
+              p-8
+              shadow-lg
+              transition-all
+              duration-500
+              ease-out
+              hover:-translate-y-4
+              hover:scale-[1.02]
+              hover:shadow-2xl
+              "
             >
-              <div className="text-4xl mb-4">{feature.icon}</div>
 
-              <h3 className="text-lg font-semibold text-[var(--foreground)] mb-2">
+              {/* GLOW EFFECT */}
+              <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-all duration-500 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_70%)]" />
+
+              {/* BACKGROUND SHINE */}
+              <div className="absolute -top-10 -right-10 h-32 w-32 rounded-full opacity-0 transition-all duration-500 group-hover:opacity-100 bg-[rgba(255,255,255,0.05)] blur-3xl" />
+
+              {/* ICON */}
+              <div className="relative text-5xl mb-6 transition-all duration-500 ease-out group-hover:scale-125 group-hover:-translate-y-3 group-hover:rotate-6">
+                {feature.icon}
+              </div>
+
+              {/* TITLE */}
+              <h3 className="text-xl font-bold text-[var(--foreground)] mb-3 transition-all duration-300 group-hover:tracking-wide">
                 {feature.title}
               </h3>
 
-              <p className="text-[var(--muted-foreground)] text-sm leading-relaxed">
+              {/* DESCRIPTION */}
+              <p className="relative text-[var(--muted-foreground)] text-base leading-relaxed">
                 {feature.description}
               </p>
             </div>
@@ -89,3 +129,5 @@ export default async function HomePage() {
     </main>
   );
 }
+
+