diff --git a/client/package-lock.json b/client/package-lock.json
index 43f9372..601d1df 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -15,6 +15,7 @@
         "@vercel/analytics": "^1.5.0",
         "@vercel/blob": "^1.1.1",
         "@vercel/speed-insights": "^1.2.0",
+        "aos": "^2.3.4",
         "axios": "^1.11.0",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.12",
@@ -37,6 +38,7 @@
       "devDependencies": {
         "@eslint/js": "^9.33.0",
         "@tailwindcss/postcss": "^4.1.12",
+        "@types/aos": "^3.0.7",
         "@types/node": "^24.3.0",
         "@types/react": "^19.1.10",
         "@types/react-dom": "^19.1.7",
@@ -1577,6 +1579,13 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@types/aos": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.7.tgz",
+      "integrity": "sha512-sEhyFqvKauUJZDbvAB3Pggynrq6g+2PS4XB3tmUr+mDL1gfDJnwslUC4QQ7/l8UD+LWpr3RxZVR/rHoZrLqZVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2153,6 +2162,17 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "license": "MIT",
+      "dependencies": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2433,6 +2453,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
+      "license": "Unlicense"
+    },
     "node_modules/cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -4093,12 +4119,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+      "license": "MIT"
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index e90ea5b..b078bb2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,6 +18,7 @@
     "@vercel/analytics": "^1.5.0",
     "@vercel/blob": "^1.1.1",
     "@vercel/speed-insights": "^1.2.0",
+    "aos": "^2.3.4",
     "axios": "^1.11.0",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.12",
@@ -40,6 +41,7 @@
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@tailwindcss/postcss": "^4.1.12",
+    "@types/aos": "^3.0.7",
     "@types/node": "^24.3.0",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 556900e..f5d6e16 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -44,6 +44,8 @@ import ScrollToTop from "./components/ui/ScrollToTop";
 import ScrollToTopOnRouteChange from "./components/ui/ScrollToTopOnRouteChange";
 import { isAuthenticated } from "./utils/auth";
 import { SocketProvider } from "./contexts/SocketContext";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 interface AppProps { }
 
@@ -94,6 +96,13 @@ const App: React.FC<AppProps> = () => {
     checkAuthStatus();
   }, [checkAuthStatus]);
 
+  useEffect(() => {
+    AOS.init({
+      duration: 1000,
+      once: true,
+    });
+  }, []);
+
   return (
     <Router>
       <SocketProvider>
diff --git a/client/src/components/admin/AdminPanel.tsx b/client/src/components/admin/AdminPanel.tsx
index 773d862..f366977 100644
--- a/client/src/components/admin/AdminPanel.tsx
+++ b/client/src/components/admin/AdminPanel.tsx
@@ -5,16 +5,11 @@ import {
   Bug,
   TrendingUp,
   Clock,
-  CheckCircle,
-  XCircle,
   AlertTriangle,
-  Users,
-  Filter,
-  Search,
-  Eye,
   Edit3,
 } from "lucide-react";
 
+/* ===================== TYPES ===================== */
 interface FeatureSuggestion {
   id: string;
   title: string;
@@ -38,11 +33,6 @@ interface BugReport {
   description: string;
   severity: string;
   status: string;
-  stepsToReproduce?: string;
-  expectedBehavior?: string;
-  actualBehavior?: string;
-  browserInfo?: string;
-  deviceInfo?: string;
   userName?: string;
   userEmail?: string;
   adminNotes?: string;
@@ -54,31 +44,51 @@ interface BugReport {
 }
 
 interface AdminStats {
-  featureSuggestions: {
-    total: number;
-    pending: number;
-  };
-  bugReports: {
-    total: number;
-    open: number;
-    critical: number;
-  };
+  featureSuggestions: { total: number; pending: number };
+  bugReports: { total: number; open: number; critical: number };
 }
 
+type TabId = "dashboard" | "features" | "bugs";
+
+/* ===================== CONFIG ===================== */
+const TABS: { id: TabId; label: string; icon: any }[] = [
+  { id: "dashboard", label: "Dashboard", icon: TrendingUp },
+  { id: "features", label: "Feature Suggestions", icon: Lightbulb },
+  { id: "bugs", label: "Bug Reports", icon: Bug },
+];
+
+const FEATURE_STATUS = ["pending", "in-progress", "completed", "rejected"];
+const FEATURE_CATEGORIES = ["ui", "functionality", "performance", "other"];
+
+const BUG_STATUS = ["open", "in-progress", "resolved", "closed"];
+const BUG_SEVERITY = ["low", "medium", "high", "critical"];
+
+const STATUS_OPTIONS = {
+  feature: FEATURE_STATUS,
+  bug: BUG_STATUS,
+};
+
+const renderOptions = (items: string[], empty: string) => (
+  <>
+    <option value="">{empty}</option>
+    {items.map((i) => (
+      <option key={i} value={i}>
+        {i.charAt(0).toUpperCase() + i.slice(1).replace("-", " ")}
+      </option>
+    ))}
+  </>
+);
+
+/* ===================== COMPONENT ===================== */
 const AdminPanel: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<"dashboard" | "features" | "bugs">(
-    "dashboard"
-  );
+  const [activeTab, setActiveTab] = useState<TabId>("dashboard");
   const [stats, setStats] = useState<AdminStats | null>(null);
-  const [featureSuggestions, setFeatureSuggestions] = useState<
-    FeatureSuggestion[]
-  >([]);
+  const [featureSuggestions, setFeatureSuggestions] = useState<FeatureSuggestion[]>([]);
   const [bugReports, setBugReports] = useState<BugReport[]>([]);
   const [loading, setLoading] = useState(true);
-  const [selectedItem, setSelectedItem] = useState<
-    FeatureSuggestion | BugReport | null
-  >(null);
+  const [selectedItem, setSelectedItem] = useState<FeatureSuggestion | BugReport | null>(null);
   const [showModal, setShowModal] = useState(false);
+
   const [filters, setFilters] = useState({
     features: { status: "", category: "" },
     bugs: { status: "", severity: "" },
@@ -91,10 +101,7 @@ const AdminPanel: React.FC = () => {
   const fetchAdminData = async () => {
     try {
       const token = localStorage.getItem("auth_token");
-      const headers = {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json",
-      };
+      const headers = { Authorization: `Bearer ${token}`, "Content-Type": "application/json" };
 
       const [statsRes, featuresRes, bugsRes] = await Promise.all([
         fetch("/api/feedback/admin/stats", { headers }),
@@ -102,109 +109,42 @@ const AdminPanel: React.FC = () => {
         fetch("/api/feedback/bug-reports", { headers }),
       ]);
 
-      if (statsRes.ok) {
-        const statsData = await statsRes.json();
-        setStats(statsData.stats);
-      }
-
-      if (featuresRes.ok) {
-        const featuresData = await featuresRes.json();
-        setFeatureSuggestions(featuresData.suggestions);
-      }
-
-      if (bugsRes.ok) {
-        const bugsData = await bugsRes.json();
-        setBugReports(bugsData.bugReports);
-      }
-    } catch (error) {
-      console.error("Error fetching admin data:", error);
+      if (statsRes.ok) setStats((await statsRes.json()).stats);
+      if (featuresRes.ok) setFeatureSuggestions((await featuresRes.json()).suggestions);
+      if (bugsRes.ok) setBugReports((await bugsRes.json()).bugReports);
+    } catch (e) {
+      console.error(e);
     } finally {
       setLoading(false);
     }
   };
 
-  const updateFeatureSuggestion = async (
-    id: string,
-    updates: Partial<FeatureSuggestion>
-  ) => {
-    try {
-      const token = localStorage.getItem("auth_token");
-      const response = await fetch(`/api/feedback/feature-suggestions/${id}`, {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(updates),
-      });
-
-      if (response.ok) {
-        fetchAdminData();
-        setShowModal(false);
-      }
-    } catch (error) {
-      console.error("Error updating feature suggestion:", error);
-    }
+  const updateFeatureSuggestion = async (id: string, updates: Partial<FeatureSuggestion>) => {
+    const token = localStorage.getItem("auth_token");
+    await fetch(`/api/feedback/feature-suggestions/${id}`, {
+      method: "PUT",
+      headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+      body: JSON.stringify(updates),
+    });
+    fetchAdminData();
+    setShowModal(false);
   };
 
   const updateBugReport = async (id: string, updates: Partial<BugReport>) => {
-    try {
-      const token = localStorage.getItem("auth_token");
-      const response = await fetch(`/api/feedback/bug-reports/${id}`, {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(updates),
-      });
-
-      if (response.ok) {
-        fetchAdminData();
-        setShowModal(false);
-      }
-    } catch (error) {
-      console.error("Error updating bug report:", error);
-    }
-  };
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "pending":
-      case "open":
-        return "text-yellow-400";
-      case "in-progress":
-        return "text-blue-400";
-      case "completed":
-      case "resolved":
-        return "text-green-400";
-      case "rejected":
-      case "closed":
-        return "text-red-400";
-      default:
-        return "text-gray-400";
-    }
-  };
-
-  const getSeverityColor = (severity: string) => {
-    switch (severity) {
-      case "low":
-        return "text-green-400";
-      case "medium":
-        return "text-yellow-400";
-      case "high":
-        return "text-orange-400";
-      case "critical":
-        return "text-red-400";
-      default:
-        return "text-gray-400";
-    }
+    const token = localStorage.getItem("auth_token");
+    await fetch(`/api/feedback/bug-reports/${id}`, {
+      method: "PUT",
+      headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+      body: JSON.stringify(updates),
+    });
+    fetchAdminData();
+    setShowModal(false);
   };
 
   if (loading) {
     return (
-      <div className="min-h-screen pt-20 px-4 flex items-center justify-center">
-        <div className="w-16 h-16 border-4 border-alien-green border-t-transparent rounded-full animate-spin"></div>
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="w-16 h-16 border-4 border-alien-green border-t-transparent rounded-full animate-spin" />
       </div>
     );
   }
@@ -212,446 +152,169 @@ const AdminPanel: React.FC = () => {
   return (
     <div className="min-h-screen pt-20 px-4">
       <div className="max-w-7xl mx-auto">
-        {/* Header */}
+
+        {/* HEADER */}
         <div className="flex items-center mb-8">
-          <div className="w-12 h-12 bg-alien-green rounded-full flex items-center justify-center mr-4 shadow-alien-glow">
-            <Shield className="text-royal-black" size={24} />
+          <div className="w-12 h-12 bg-alien-green rounded-full flex items-center justify-center mr-4">
+            <Shield size={24} />
           </div>
           <div>
-            <h1 className="text-3xl font-alien font-bold text-alien-green">
-              Admin Panel
-            </h1>
-            <p className="text-gray-400">
-              Manage feature suggestions and bug reports
-            </p>
+            <h1 className="text-3xl font-bold text-alien-green">Admin Panel</h1>
+            <p className="text-gray-400">Manage feedback</p>
           </div>
         </div>
 
-        {/* Navigation Tabs */}
+        {/* TABS */}
         <div className="flex space-x-1 mb-8">
-          {[
-            { id: "dashboard", label: "Dashboard", icon: TrendingUp },
-            { id: "features", label: "Feature Suggestions", icon: Lightbulb },
-            { id: "bugs", label: "Bug Reports", icon: Bug },
-          ].map((tab) => (
+          {TABS.map(({ id, label, icon: Icon }) => (
             <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id as any)}
-              className={`flex items-center px-6 py-3 rounded-lg font-medium transition-colors ${
-                activeTab === tab.id
-                  ? "bg-alien-green text-royal-black"
-                  : "bg-gray-800 text-gray-300 hover:bg-gray-700"
+              key={id}
+              onClick={() => setActiveTab(id)}
+              className={`px-6 py-3 rounded-lg flex items-center ${
+                activeTab === id
+                  ? "bg-alien-green text-black"
+                  : "bg-gray-800 text-gray-300"
               }`}
             >
-              <tab.icon className="mr-2" size={20} />
-              {tab.label}
+              <Icon size={20} className="mr-2" />
+              {label}
             </button>
           ))}
         </div>
 
-        {/* Dashboard Tab */}
+        {/* DASHBOARD */}
         {activeTab === "dashboard" && stats && (
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-            <div className="smoke-card p-6">
-              <div className="flex items-center justify-between mb-4">
-                <Lightbulb className="text-alien-green" size={24} />
-                <span className="text-2xl font-bold text-white">
-                  {stats.featureSuggestions.total}
-                </span>
-              </div>
-              <h3 className="text-lg font-semibold text-white mb-2">
-                Feature Suggestions
-              </h3>
-              <p className="text-gray-400">
-                {stats.featureSuggestions.pending} pending review
-              </p>
-            </div>
-
-            <div className="smoke-card p-6">
-              <div className="flex items-center justify-between mb-4">
-                <Bug className="text-red-400" size={24} />
-                <span className="text-2xl font-bold text-white">
-                  {stats.bugReports.total}
-                </span>
-              </div>
-              <h3 className="text-lg font-semibold text-white mb-2">
-                Bug Reports
-              </h3>
-              <p className="text-gray-400">
-                {stats.bugReports.open} open issues
-              </p>
-            </div>
-
-            <div className="smoke-card p-6">
-              <div className="flex items-center justify-between mb-4">
-                <AlertTriangle className="text-orange-400" size={24} />
-                <span className="text-2xl font-bold text-white">
-                  {stats.bugReports.critical}
-                </span>
-              </div>
-              <h3 className="text-lg font-semibold text-white mb-2">
-                Critical Bugs
-              </h3>
-              <p className="text-gray-400">Require immediate attention</p>
-            </div>
-
-            <div className="smoke-card p-6">
-              <div className="flex items-center justify-between mb-4">
-                <Clock className="text-blue-400" size={24} />
-                <span className="text-2xl font-bold text-white">
-                  {stats.featureSuggestions.pending + stats.bugReports.open}
-                </span>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {[{
+              icon: Lightbulb,
+              color: "text-alien-green",
+              value: stats.featureSuggestions.total,
+              title: "Feature Suggestions",
+            },{
+              icon: Bug,
+              color: "text-red-400",
+              value: stats.bugReports.total,
+              title: "Bug Reports",
+            },{
+              icon: AlertTriangle,
+              color: "text-orange-400",
+              value: stats.bugReports.critical,
+              title: "Critical Bugs",
+            },{
+              icon: Clock,
+              color: "text-blue-400",
+              value: stats.featureSuggestions.pending + stats.bugReports.open,
+              title: "Pending Items",
+            }].map(({ icon: Icon, color, value, title }) => (
+              <div key={title} className="smoke-card p-6">
+                <div className="flex justify-between mb-4">
+                  <Icon className={color} size={24} />
+                  <span className="text-2xl font-bold text-white">{value}</span>
+                </div>
+                <h3 className="text-white font-semibold">{title}</h3>
               </div>
-              <h3 className="text-lg font-semibold text-white mb-2">
-                Pending Items
-              </h3>
-              <p className="text-gray-400">Awaiting review</p>
-            </div>
+            ))}
           </div>
         )}
 
-        {/* Feature Suggestions Tab */}
+        {/* FEATURES */}
         {activeTab === "features" && (
           <div className="smoke-card p-6">
-            <div className="flex justify-between items-center mb-6">
-              <h2 className="text-xl font-bold text-white">
-                Feature Suggestions
-              </h2>
-              <div className="flex gap-4">
-                <select
-                  value={filters.features.status}
-                  onChange={(e) =>
-                    setFilters({
-                      ...filters,
-                      features: { ...filters.features, status: e.target.value },
-                    })
-                  }
-                  className="px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white"
-                >
-                  <option value="">All Status</option>
-                  <option value="pending">Pending</option>
-                  <option value="in-progress">In Progress</option>
-                  <option value="completed">Completed</option>
-                  <option value="rejected">Rejected</option>
-                </select>
-                <select
-                  value={filters.features.category}
-                  onChange={(e) =>
-                    setFilters({
-                      ...filters,
-                      features: {
-                        ...filters.features,
-                        category: e.target.value,
-                      },
-                    })
-                  }
-                  className="px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white"
-                >
-                  <option value="">All Categories</option>
-                  <option value="ui">UI</option>
-                  <option value="functionality">Functionality</option>
-                  <option value="performance">Performance</option>
-                  <option value="other">Other</option>
-                </select>
-              </div>
+            <div className="flex gap-4 mb-4">
+              <select
+                value={filters.features.status}
+                onChange={(e) => setFilters({ ...filters, features: { ...filters.features, status: e.target.value } })}
+                className="bg-gray-800 border border-gray-700 rounded px-3 py-2"
+              >
+                {renderOptions(FEATURE_STATUS, "All Status")}
+              </select>
+
+              <select
+                value={filters.features.category}
+                onChange={(e) => setFilters({ ...filters, features: { ...filters.features, category: e.target.value } })}
+                className="bg-gray-800 border border-gray-700 rounded px-3 py-2"
+              >
+                {renderOptions(FEATURE_CATEGORIES, "All Categories")}
+              </select>
             </div>
 
-            <div className="space-y-4">
-              {featureSuggestions
-                .filter(
-                  (item) =>
-                    (!filters.features.status ||
-                      item.status === filters.features.status) &&
-                    (!filters.features.category ||
-                      item.category === filters.features.category)
-                )
-                .map((suggestion) => (
-                  <div
-                    key={suggestion.id}
-                    className="bg-gray-800 border border-gray-700 rounded-lg p-4"
-                  >
-                    <div className="flex justify-between items-start mb-3">
-                      <div className="flex-1">
-                        <h3 className="text-lg font-semibold text-white mb-1">
-                          {suggestion.title}
-                        </h3>
-                        <p className="text-gray-400 text-sm mb-2">
-                          {suggestion.description}
-                        </p>
-                        <div className="flex items-center gap-4 text-sm">
-                          <span className="text-gray-500">
-                            Category: {suggestion.category}
-                          </span>
-                          <span className="text-gray-500">
-                            Priority: {suggestion.priority}
-                          </span>
-                          <span
-                            className={`font-medium ${getStatusColor(
-                              suggestion.status
-                            )}`}
-                          >
-                            Status: {suggestion.status}
-                          </span>
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => {
-                          setSelectedItem(suggestion);
-                          setShowModal(true);
-                        }}
-                        className="alien-button-secondary px-4 py-2 ml-4"
-                      >
-                        <Edit3 size={16} />
-                      </button>
-                    </div>
-                    <div className="text-xs text-gray-500">
-                      Submitted by:{" "}
-                      {suggestion.user?.username ||
-                        suggestion.userName ||
-                        "Anonymous"}{" "}
-                      •{new Date(suggestion.createdAt).toLocaleDateString()}
-                    </div>
+            {featureSuggestions.map((f) => (
+              <div key={f.id} className="bg-gray-800 p-4 rounded mb-3">
+                <div className="flex justify-between">
+                  <div>
+                    <h3 className="text-white font-semibold">{f.title}</h3>
+                    <p className="text-gray-400 text-sm">{f.description}</p>
                   </div>
-                ))}
-            </div>
+                  <button onClick={() => { setSelectedItem(f); setShowModal(true); }}>
+                    <Edit3 size={16} />
+                  </button>
+                </div>
+              </div>
+            ))}
           </div>
         )}
 
-        {/* Bug Reports Tab */}
+        {/* BUGS */}
         {activeTab === "bugs" && (
           <div className="smoke-card p-6">
-            <div className="flex justify-between items-center mb-6">
-              <h2 className="text-xl font-bold text-white">Bug Reports</h2>
-              <div className="flex gap-4">
-                <select
-                  value={filters.bugs.status}
-                  onChange={(e) =>
-                    setFilters({
-                      ...filters,
-                      bugs: { ...filters.bugs, status: e.target.value },
-                    })
-                  }
-                  className="px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white"
-                >
-                  <option value="">All Status</option>
-                  <option value="open">Open</option>
-                  <option value="in-progress">In Progress</option>
-                  <option value="resolved">Resolved</option>
-                  <option value="closed">Closed</option>
-                </select>
-                <select
-                  value={filters.bugs.severity}
-                  onChange={(e) =>
-                    setFilters({
-                      ...filters,
-                      bugs: { ...filters.bugs, severity: e.target.value },
-                    })
-                  }
-                  className="px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white"
-                >
-                  <option value="">All Severity</option>
-                  <option value="low">Low</option>
-                  <option value="medium">Medium</option>
-                  <option value="high">High</option>
-                  <option value="critical">Critical</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="space-y-4">
-              {bugReports
-                .filter(
-                  (item) =>
-                    (!filters.bugs.status ||
-                      item.status === filters.bugs.status) &&
-                    (!filters.bugs.severity ||
-                      item.severity === filters.bugs.severity)
-                )
-                .map((bug) => (
-                  <div
-                    key={bug.id}
-                    className="bg-gray-800 border border-gray-700 rounded-lg p-4"
-                  >
-                    <div className="flex justify-between items-start mb-3">
-                      <div className="flex-1">
-                        <h3 className="text-lg font-semibold text-white mb-1">
-                          {bug.title}
-                        </h3>
-                        <p className="text-gray-400 text-sm mb-2">
-                          {bug.description}
-                        </p>
-                        <div className="flex items-center gap-4 text-sm">
-                          <span
-                            className={`font-medium ${getSeverityColor(
-                              bug.severity
-                            )}`}
-                          >
-                            Severity: {bug.severity}
-                          </span>
-                          <span
-                            className={`font-medium ${getStatusColor(
-                              bug.status
-                            )}`}
-                          >
-                            Status: {bug.status}
-                          </span>
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => {
-                          setSelectedItem(bug);
-                          setShowModal(true);
-                        }}
-                        className="alien-button-secondary px-4 py-2 ml-4"
-                      >
-                        <Edit3 size={16} />
-                      </button>
-                    </div>
-                    <div className="text-xs text-gray-500">
-                      Reported by:{" "}
-                      {bug.user?.username || bug.userName || "Anonymous"} •
-                      {new Date(bug.createdAt).toLocaleDateString()}
-                    </div>
-                  </div>
-                ))}
+            <div className="flex gap-4 mb-4">
+              <select
+                value={filters.bugs.status}
+                onChange={(e) => setFilters({ ...filters, bugs: { ...filters.bugs, status: e.target.value } })}
+                className="bg-gray-800 border border-gray-700 rounded px-3 py-2"
+              >
+                {renderOptions(BUG_STATUS, "All Status")}
+              </select>
+
+              <select
+                value={filters.bugs.severity}
+                onChange={(e) => setFilters({ ...filters, bugs: { ...filters.bugs, severity: e.target.value } })}
+                className="bg-gray-800 border border-gray-700 rounded px-3 py-2"
+              >
+                {renderOptions(BUG_SEVERITY, "All Severity")}
+              </select>
             </div>
-          </div>
-        )}
 
-        {/* Modal for editing items */}
-        {showModal && selectedItem && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div className="bg-gray-900 border border-gray-700 rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
-              <h3 className="text-xl font-bold text-white mb-4">
-                {"severity" in selectedItem
-                  ? "Edit Bug Report"
-                  : "Edit Feature Suggestion"}
-              </h3>
-
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Status
-                  </label>
-                  <select
-                    value={selectedItem.status}
-                    onChange={(e) =>
-                      setSelectedItem({
-                        ...selectedItem,
-                        status: e.target.value,
-                      })
-                    }
-                    className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white"
-                  >
-                    {"severity" in selectedItem ? (
-                      <>
-                        <option value="open">Open</option>
-                        <option value="in-progress">In Progress</option>
-                        <option value="resolved">Resolved</option>
-                        <option value="closed">Closed</option>
-                      </>
-                    ) : (
-                      <>
-                        <option value="pending">Pending</option>
-                        <option value="in-progress">In Progress</option>
-                        <option value="completed">Completed</option>
-                        <option value="rejected">Rejected</option>
-                      </>
-                    )}
-                  </select>
-                </div>
-
-                {"severity" in selectedItem ? (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">
-                      Severity
-                    </label>
-                    <select
-                      value={selectedItem.severity}
-                      onChange={(e) =>
-                        setSelectedItem({
-                          ...selectedItem,
-                          severity: e.target.value,
-                        })
-                      }
-                      className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white"
-                    >
-                      <option value="low">Low</option>
-                      <option value="medium">Medium</option>
-                      <option value="high">High</option>
-                      <option value="critical">Critical</option>
-                    </select>
-                  </div>
-                ) : (
+            {bugReports.map((b) => (
+              <div key={b.id} className="bg-gray-800 p-4 rounded mb-3">
+                <div className="flex justify-between">
                   <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">
-                      Priority
-                    </label>
-                    <select
-                      value={(selectedItem as FeatureSuggestion).priority}
-                      onChange={(e) =>
-                        setSelectedItem({
-                          ...selectedItem,
-                          priority: e.target.value,
-                        })
-                      }
-                      className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white"
-                    >
-                      <option value="low">Low</option>
-                      <option value="medium">Medium</option>
-                      <option value="high">High</option>
-                    </select>
+                    <h3 className="text-white font-semibold">{b.title}</h3>
+                    <p className="text-gray-400 text-sm">{b.description}</p>
                   </div>
-                )}
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Admin Notes
-                  </label>
-                  <textarea
-                    value={selectedItem.adminNotes || ""}
-                    onChange={(e) =>
-                      setSelectedItem({
-                        ...selectedItem,
-                        adminNotes: e.target.value,
-                      })
-                    }
-                    rows={4}
-                    className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white"
-                    placeholder="Add internal notes..."
-                  />
-                </div>
-
-                <div className="flex gap-4 pt-4">
-                  <button
-                    onClick={() => {
-                      if ("severity" in selectedItem) {
-                        updateBugReport(selectedItem.id, {
-                          status: selectedItem.status,
-                          severity: selectedItem.severity,
-                          adminNotes: selectedItem.adminNotes,
-                        });
-                      } else {
-                        updateFeatureSuggestion(selectedItem.id, {
-                          status: selectedItem.status,
-                          priority: (selectedItem as FeatureSuggestion)
-                            .priority,
-                          adminNotes: selectedItem.adminNotes,
-                        });
-                      }
-                    }}
-                    className="alien-button px-6 py-2"
-                  >
-                    Save Changes
-                  </button>
-                  <button
-                    onClick={() => setShowModal(false)}
-                    className="alien-button-secondary px-6 py-2"
-                  >
-                    Cancel
+                  <button onClick={() => { setSelectedItem(b); setShowModal(true); }}>
+                    <Edit3 size={16} />
                   </button>
                 </div>
               </div>
+            ))}
+          </div>
+        )}
+
+        {/* MODAL */}
+        {showModal && selectedItem && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+            <div className="bg-gray-900 p-6 rounded w-full max-w-xl">
+              <select
+                value={selectedItem.status}
+                onChange={(e) => setSelectedItem({ ...selectedItem, status: e.target.value })}
+                className="w-full mb-4 bg-gray-800 border border-gray-700 rounded px-3 py-2"
+              >
+                {("severity" in selectedItem ? STATUS_OPTIONS.bug : STATUS_OPTIONS.feature).map((s) => (
+                  <option key={s} value={s}>{s}</option>
+                ))}
+              </select>
+
+              <button
+                onClick={() =>
+                  "severity" in selectedItem
+                    ? updateBugReport(selectedItem.id, selectedItem)
+                    : updateFeatureSuggestion(selectedItem.id, selectedItem)
+                }
+                className="alien-button"
+              >
+                Save
+              </button>
             </div>
           </div>
         )}
@@ -660,4 +323,4 @@ const AdminPanel: React.FC = () => {
   );
 };
 
-export default AdminPanel;
+export default AdminPanel;
\ No newline at end of file
diff --git a/client/src/components/auth/AuthForm.tsx b/client/src/components/auth/AuthForm.tsx
index 9e91cfa..e38f81c 100644
--- a/client/src/components/auth/AuthForm.tsx
+++ b/client/src/components/auth/AuthForm.tsx
@@ -1,6 +1,13 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { User, Lock, UserPlus, LogIn, Mail, Shield } from "lucide-react";
+import {
+  User,
+  Lock,
+  UserPlus,
+  LogIn,
+  Mail,
+  Shield,
+} from "lucide-react";
 import { login, signup, sendOTP } from "../../utils/api";
 
 interface AuthFormProps {
@@ -20,8 +27,10 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
   const [otpLoading, setOtpLoading] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState("");
+
   const navigate = useNavigate();
 
+  /* ------------------ OTP ------------------ */
   const handleSendOTP = async () => {
     if (!email) {
       setError("Please enter your email first");
@@ -44,6 +53,7 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
     }
   };
 
+  /* ------------------ SUBMIT ------------------ */
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -55,35 +65,65 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
         ? await login(usernameOrEmail, password)
         : await signup(username, email, password, otp);
 
-      console.log("✅ Authentication successful:", authResponse.user?.username);
+      console.log(
+        "✅ Authentication successful:",
+        authResponse.user?.username
+      );
 
-      // Set success message for signup
       if (!isLogin) {
         setSuccess("Account created successfully! Welcome to Edulume!");
       }
 
-      // Notify parent component to re-check auth status
       onAuthChange();
 
-      // Redirect after successful authentication
-      setTimeout(
-        () => {
-          navigate("/");
-        },
-        isLogin ? 100 : 1000
-      ); // Shorter delay for signup
+      setTimeout(() => navigate("/"), isLogin ? 100 : 1000);
     } catch (err: any) {
       console.error("❌ Authentication failed:", err);
-      setError(err.response?.data?.error || err.message || "An error occurred");
+      setError(
+        err.response?.data?.error || err.message || "An error occurred"
+      );
     } finally {
       setLoading(false);
     }
   };
 
+  /* ------------------ INPUT CONFIG ------------------ */
+  const renderInput = (
+    label: string,
+    Icon: any,
+    value: string,
+    onChange: (v: string) => void,
+    type = "text",
+    placeholder = "",
+    extra?: React.ReactNode
+  ) => (
+    <div>
+      <label className="block text-sm font-medium text-gray-300 mb-2">
+        {label}
+      </label>
+      <div className="relative">
+        <Icon
+          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+          size={20}
+        />
+        <input
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="alien-input w-full pl-10"
+          placeholder={placeholder}
+          required
+        />
+      </div>
+      {extra}
+    </div>
+  );
+
   return (
     <div className="min-h-screen flex items-center justify-center px-4 py-12">
       <div className="max-w-md w-full">
         <div className="smoke-card p-8 relative smoke-effect">
+          {/* ------------------ HEADER ------------------ */}
           <div className="text-center mb-8">
             <div className="w-16 h-16 bg-alien-green rounded-full flex items-center justify-center mx-auto mb-4 shadow-alien-glow">
               {isLogin ? (
@@ -100,132 +140,77 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
             </p>
           </div>
 
+          {/* ------------------ FORM ------------------ */}
           <form onSubmit={handleSubmit} className="space-y-6">
             {isLogin ? (
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  Username or Email
-                </label>
-                <div className="relative">
-                  <User
-                    className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                    size={20}
-                  />
-                  <input
-                    type="text"
-                    value={usernameOrEmail}
-                    onChange={(e) => setUsernameOrEmail(e.target.value)}
-                    className="alien-input w-full pl-10"
-                    placeholder="Enter username or email"
-                    required
-                  />
-                </div>
-              </div>
+              renderInput(
+                "Username or Email",
+                User,
+                usernameOrEmail,
+                setUsernameOrEmail,
+                "text",
+                "Enter username or email"
+              )
             ) : (
               <>
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Username
-                  </label>
-                  <div className="relative">
-                    <User
-                      className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                      size={20}
-                    />
-                    <input
-                      type="text"
-                      value={username}
-                      onChange={(e) => setUsername(e.target.value)}
-                      className="alien-input w-full pl-10"
-                      placeholder="Enter your username"
-                      required
-                    />
-                  </div>
-                </div>
+                {renderInput(
+                  "Username",
+                  User,
+                  username,
+                  setUsername,
+                  "text",
+                  "Enter your username"
+                )}
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Email
-                  </label>
-                  <div className="relative">
-                    <Mail
-                      className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                      size={20}
-                    />
-                    <input
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      className="alien-input w-full pl-10"
-                      placeholder="Enter your email"
-                      required
-                    />
-                  </div>
-                  {!isLogin && !otpSent && (
+                {renderInput(
+                  "Email",
+                  Mail,
+                  email,
+                  setEmail,
+                  "email",
+                  "Enter your email",
+                  !otpSent && (
                     <button
                       type="button"
                       onClick={handleSendOTP}
                       disabled={otpLoading || !email}
-                      className="mt-2 text-sm text-alien-green hover:text-alien-green-dark transition-colors duration-300 disabled:opacity-50"
+                      className="mt-2 text-sm text-alien-green hover:text-alien-green-dark disabled:opacity-50"
                     >
                       {otpLoading ? "Sending..." : "Send Verification Code"}
                     </button>
-                  )}
-                </div>
+                  )
+                )}
 
-                {showOTPField && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">
-                      Verification Code
-                    </label>
-                    <div className="relative">
-                      <Shield
-                        className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                        size={20}
-                      />
-                      <input
-                        type="text"
-                        value={otp}
-                        onChange={(e) => setOtp(e.target.value)}
-                        className="alien-input w-full pl-10"
-                        placeholder="Enter 6-digit code"
-                        maxLength={6}
-                        required
-                      />
-                    </div>
+                {showOTPField &&
+                  renderInput(
+                    "Verification Code",
+                    Shield,
+                    otp,
+                    setOtp,
+                    "text",
+                    "Enter 6-digit code",
                     <button
                       type="button"
                       onClick={handleSendOTP}
                       disabled={otpLoading}
-                      className="mt-2 text-sm text-gray-400 hover:text-alien-green transition-colors duration-300"
+                      className="mt-2 text-sm text-gray-400 hover:text-alien-green"
                     >
                       Resend Code
                     </button>
-                  </div>
-                )}
+                  )}
               </>
             )}
 
-            <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">
-                Password
-              </label>
-              <div className="relative">
-                <Lock
-                  className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                  size={20}
-                />
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="alien-input w-full pl-10"
-                  placeholder="Enter your password"
-                  required
-                />
-              </div>
-            </div>
+            {renderInput(
+              "Password",
+              Lock,
+              password,
+              setPassword,
+              "password",
+              "Enter your password"
+            )}
 
+            {/* ------------------ FEEDBACK ------------------ */}
             {error && (
               <div className="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded-lg">
                 {error}
@@ -241,16 +226,17 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
             <button
               type="submit"
               disabled={loading}
-              className="alien-button w-full py-3 text-lg disabled:opacity-50 disabled:cursor-not-allowed"
+              className="alien-button w-full py-3 text-lg disabled:opacity-50"
             >
               {loading ? "Processing..." : isLogin ? "Login" : "Sign Up"}
             </button>
           </form>
 
+          {/* ------------------ GOOGLE ------------------ */}
           <div className="mt-6">
             <div className="relative">
               <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-smoke-light"></div>
+                <div className="w-full border-t border-smoke-light" />
               </div>
               <div className="relative flex justify-center text-sm">
                 <span className="px-2 bg-smoke-gray text-gray-400">
@@ -259,38 +245,37 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
               </div>
             </div>
 
-            <div className="mt-6">
-              <a
-                href={`${import.meta.env.VITE_API_URL || "/api"}/auth/google`}
-                className="w-full flex items-center justify-center gap-3 px-4 py-3 border border-smoke-light rounded-lg text-white hover:bg-smoke-light transition-colors"
-              >
-                <svg className="w-5 h-5" viewBox="0 0 24 24">
-                  <path
-                    fill="currentColor"
-                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                  />
-                  <path
-                    fill="currentColor"
-                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                  />
-                </svg>
-                Sign {isLogin ? "in" : "up"} with Google
-              </a>
-            </div>
+            <a
+              href={`${import.meta.env.VITE_API_URL || "/api"}/auth/google`}
+              className="mt-6 w-full flex items-center justify-center gap-3 px-4 py-3 border border-smoke-light rounded-lg text-white hover:bg-smoke-light hover:text-black transition-colors"
+            >
+              <svg className="w-5 h-5" viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22z"
+                />
+                <path
+                  fill="currentColor"
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                />
+              </svg>
+              Sign {isLogin ? "in" : "up"} with Google
+            </a>
           </div>
 
+          {/* ------------------ FOOTER ------------------ */}
           <div className="mt-6 text-center">
             <button
               onClick={() => setIsLogin(!isLogin)}
-              className="text-alien-green hover:text-alien-green-dark transition-colors duration-300"
+              className="text-alien-green hover:text-alien-green-light"
             >
               {isLogin
                 ? "Don't have an account? Sign up"
@@ -301,9 +286,8 @@ const AuthForm: React.FC<AuthFormProps> = ({ onAuthChange }) => {
           {isLogin && (
             <div className="mt-4 text-center">
               <button
-                type="button"
                 onClick={() => navigate("/forgot-password")}
-                className="text-sm text-gray-400 hover:text-alien-green transition-colors duration-300"
+                className="text-sm text-gray-400 hover:text-alien-green"
               >
                 Forgot your password?
               </button>
diff --git a/client/src/components/layout/Footer.tsx b/client/src/components/layout/Footer.tsx
index bacd465..94dac52 100644
--- a/client/src/components/layout/Footer.tsx
+++ b/client/src/components/layout/Footer.tsx
@@ -1,18 +1,15 @@
-import React from "react";
-import { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import {
   FileText,
   BookOpen,
   MessageSquare,
   Upload,
-  Github,
   Mail,
   Heart,
   Zap,
   Shield,
   Users,
-  ExternalLink,
   Map,
 } from "lucide-react";
 import { getPDFs, getEbooks, getDiscussions } from "../../utils/api";
@@ -37,7 +34,7 @@ const Footer: React.FC = () => {
         ]);
 
         setStats({
-          //@ts-ignore
+          // @ts-ignore
           totalResources: pdfs.length + ebooks.length,
           totalDiscussions: discussions.pagination?.total || 0,
           loading: false,
@@ -51,157 +48,122 @@ const Footer: React.FC = () => {
     fetchStats();
   }, []);
 
+  /* ------------------ CONFIG ------------------ */
+  const quickLinks = [
+    { to: "/pdfs", label: "Browse PDFs", Icon: FileText },
+    { to: "/ebooks", label: "E-book Library", Icon: BookOpen },
+    { to: "/discussions", label: "Discussions", Icon: MessageSquare },
+    { to: "/roadmaps", label: "Learning Roadmaps", Icon: Map },
+    { to: "/upload", label: "Upload Resource", Icon: Upload },
+  ];
+
+  const communityLinks = [
+    { to: "/discussions/new", label: "Ask Question" },
+    { to: "/discussions?category=academic", label: "Academic Help" },
+    { to: "/discussions?category=technical", label: "Technical Support" },
+    { to: "/discussions?category=career", label: "Career Guidance" },
+  ];
+
   return (
-    <footer className="bg-smoke-gray/95 border-t border-smoke-light mt-20">
-      {/* Main Footer Content */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <footer className="bg-gray-900 border-t border-smoke-dark mt-20 relative">
+      {/* Main Footer */}
+      <div
+        data-aos="fade-up"
+        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
+      >
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {/* Brand Section */}
-          <div className="lg:col-span-1">
+          {/* Brand */}
+          <div>
             <div className="flex items-center space-x-2 mb-4">
               <img src="/logo.png" alt="Edulume" className="w-8 h-8" />
-              <span className="glow-text text-xl font-alien font-bold">
+              <span className="text-matcha-muted text-xl font-alien font-bold">
                 Edulume
               </span>
             </div>
-            <p className="text-gray-400 text-sm mb-6 leading-relaxed">
+
+            <p className="text-olive-gold text-sm mb-6 leading-relaxed">
               Your college's ultimate resource hub. Share knowledge, discover
               resources, and connect with fellow students in our secure digital
               vault.
             </p>
+
             <div className="flex items-center space-x-4">
-              <div className="w-3 h-3 bg-alien-green rounded-full animate-pulse"></div>
-              <span className="text-xs text-alien-green font-cyber">
+              <div className="w-3 h-3 bg-matcha-muted rounded-full animate-pulse" />
+              <span className="text-xs text-matcha-muted font-cyber">
                 SYSTEM ONLINE
               </span>
             </div>
           </div>
 
-          {/* Quick Links */}
+          {/* Quick Access */}
           <div>
-            <h3 className="text-alien-green font-alien font-bold mb-4 flex items-center">
+            <h3 className="text-matcha-muted font-alien font-bold mb-4 flex items-center">
               <Zap className="mr-2" size={16} />
               Quick Access
             </h3>
+
             <ul className="space-y-3">
-              <li>
-                <Link
-                  to="/pdfs"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  <FileText className="mr-2" size={14} />
-                  Browse PDFs
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/ebooks"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  <BookOpen className="mr-2" size={14} />
-                  E-book Library
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/discussions"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  <MessageSquare className="mr-2" size={14} />
-                  Discussions
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/roadmaps"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  <Map className="mr-2" size={14} />
-                  Learning Roadmaps
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/upload"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  <Upload className="mr-2" size={14} />
-                  Upload Resource
-                </Link>
-              </li>
+              {quickLinks.map(({ to, label, Icon }) => (
+                <li key={to}>
+                  <Link
+                    to={to}
+                    className="flex items-center text-gray-400 hover:text-moss-accent transition-colors text-sm"
+                  >
+                    <Icon className="mr-2" size={14} />
+                    {label}
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
 
           {/* Community */}
           <div>
-            <h3 className="text-alien-green font-alien font-bold mb-4 flex items-center">
+            <h3 className="text-matcha-muted font-alien font-bold mb-4 flex items-center">
               <Users className="mr-2" size={16} />
               Community
             </h3>
+
             <ul className="space-y-3">
-              <li>
-                <Link
-                  to="/discussions/new"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  Ask Question
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/discussions?category=academic"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  Academic Help
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/discussions?category=technical"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  Technical Support
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/discussions?category=career"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
-                >
-                  Career Guidance
-                </Link>
-              </li>
+              {communityLinks.map(({ to, label }) => (
+                <li key={to}>
+                  <Link
+                    to={to}
+                    className="flex items-center text-gray-400 hover:text-moss-accent transition-colors text-sm"
+                  >
+                    {label}
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
 
-          {/* Contact & Security */}
+          {/* Security & Contact */}
           <div>
-            <h3 className="text-alien-green font-alien font-bold mb-4 flex items-center">
+            <h3 className="text-matcha-muted font-alien font-bold mb-4 flex items-center">
               <Shield className="mr-2" size={16} />
               Security & Contact
             </h3>
+
             <ul className="space-y-3">
               <li>
                 <a
                   href="mailto:tarinagarwal@gmail.com"
-                  className="flex items-center text-gray-400 hover:text-alien-green transition-colors duration-300 text-sm"
+                  className="flex items-center text-gray-400 hover:text-moss-accent transition-colors text-sm"
                 >
                   <Mail className="mr-2" size={14} />
                   Contact Support
                 </a>
               </li>
 
-              <li>
-                <span className="flex items-center text-gray-400 text-sm">
-                  <Shield className="mr-2" size={14} />
-                  Secure & Private
-                </span>
+              <li className="flex items-center text-gray-400 text-sm">
+                <Shield className="mr-2" size={14} />
+                Secure & Private
               </li>
-              <li>
-                <span className="flex items-center text-gray-400 text-sm">
-                  <Zap className="mr-2" size={14} />
-                  Always Free
-                </span>
+
+              <li className="flex items-center text-gray-400 text-sm">
+                <Zap className="mr-2" size={14} />
+                Always Free
               </li>
             </ul>
           </div>
@@ -209,10 +171,10 @@ const Footer: React.FC = () => {
       </div>
 
       {/* Bottom Bar */}
-      <div className="bg-royal-black border-t border-smoke-light">
+      <div className="bg-gray-900 border-t border-smoke-dark">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0">
-            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 text-sm text-gray-400 text-center sm:text-left">
+          <div className="flex flex-col lg:flex-row justify-between items-center gap-4">
+            <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 text-sm text-gray-400 text-center sm:text-left">
               <span>© {currentYear} Edulume</span>
               <span className="hidden md:inline">•</span>
               <span className="flex items-center">
@@ -220,26 +182,30 @@ const Footer: React.FC = () => {
                 students
               </span>
             </div>
-            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-6 text-sm">
-              <button className="text-gray-400 hover:text-alien-green transition-colors duration-300">
+
+            <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-6 text-sm">
+              <button className="text-gray-400 hover:text-moss-accent transition-colors">
                 Privacy Policy
               </button>
-              <button className="text-gray-400 hover:text-alien-green transition-colors duration-300">
+              <button className="text-gray-400 hover:text-moss-accent transition-colors">
                 Terms of Service
               </button>
-              <div className="flex items-center space-x-2 text-alien-green">
-                <div className="w-2 h-2 bg-alien-green rounded-full animate-pulse"></div>
-                <span className="font-cyber text-xs">SECURE CONNECTION</span>
+
+              <div className="flex items-center space-x-2 text-matcha-muted">
+                <div className="w-2 h-2 bg-matcha-muted rounded-full animate-pulse" />
+                <span className="font-cyber text-xs">
+                  SECURE CONNECTION
+                </span>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Floating Elements */}
-      <div className="absolute bottom-20 left-10 w-2 h-2 bg-alien-green rounded-full animate-pulse opacity-30"></div>
-      <div className="absolute bottom-32 right-20 w-1 h-1 bg-alien-green rounded-full animate-pulse opacity-40"></div>
-      <div className="absolute bottom-16 right-32 w-3 h-3 bg-alien-green rounded-full animate-pulse opacity-20"></div>
+      {/* Floating Dots */}
+      <div className="absolute bottom-20 left-10 w-2 h-2 bg-alien-green-light rounded-full animate-pulse opacity-30" />
+      <div className="absolute bottom-32 right-20 w-1 h-1 bg-alien-green-light rounded-full animate-pulse opacity-40" />
+      <div className="absolute bottom-16 right-32 w-3 h-3 bg-alien-green-light rounded-full animate-pulse opacity-20" />
     </footer>
   );
 };
diff --git a/client/src/components/layout/LandingPage.tsx b/client/src/components/layout/LandingPage.tsx
index 9ba837b..0718f8e 100644
--- a/client/src/components/layout/LandingPage.tsx
+++ b/client/src/components/layout/LandingPage.tsx
@@ -20,6 +20,140 @@ import {
 import SEO from "../seo/SEO";
 
 const LandingPage: React.FC = () => {
+  /* ---------------- CONFIG ---------------- */
+
+  const feedbackBadges = [
+    {
+      to: "/suggest-feature",
+      label: "Suggest Feature",
+      Icon: Lightbulb,
+      className:
+        "text-cyan-400 hover:border-cyan-500",
+    },
+    {
+      to: "/report-bug",
+      label: "Report Bug",
+      Icon: Bug,
+      className:
+        "text-red-400 hover:border-red-500",
+    },
+  ];
+
+  const quickStats = [
+    { value: "100+", label: "AI Courses" },
+    { value: "50+", label: "Roadmaps" },
+    { value: "1000+", label: "Resources" },
+    { value: "Free", label: "Forever" },
+  ];
+
+  const mainFeatures = [
+    {
+      to: "/courses",
+      title: "AI-Powered Courses",
+      description:
+        "Learn with AI-generated courses, interactive chapters, and earn certificates with automated tests.",
+      Icon: GraduationCap,
+      points: [
+        "AI-generated content",
+        "Progress tracking",
+        "Certificate generation",
+      ],
+    },
+    {
+      to: "/roadmaps",
+      title: "Learning Roadmaps",
+      description:
+        "Follow structured learning paths with AI-generated roadmaps, resources, and career guidance.",
+      Icon: Map,
+      points: [
+        "Step-by-step guidance",
+        "Career insights",
+        "Resource recommendations",
+      ],
+    },
+    {
+      to: "/discussions",
+      title: "Community Q&A",
+      description:
+        "Ask questions, share knowledge, and get help from the community with voting and best answers.",
+      Icon: MessageSquare,
+      points: [
+        "Real-time discussions",
+        "Voting system",
+        "Best answer marking",
+      ],
+    },
+    {
+      to: "/pdfs",
+      title: "Free PDFs & Ebooks",
+      description:
+        "Access thousands of free programming PDFs, ebooks, and technical documentation.",
+      Icon: FileText,
+      points: ["100+ resources", "All topics covered", "Free downloads"],
+    },
+    {
+      to: "/interview-resources",
+      title: "Interview Prep",
+      description:
+        "Prepare for technical interviews with curated questions, tips, and resources.",
+      Icon: Award,
+      points: [
+        "Common questions",
+        "Best practices",
+        "Company-specific tips",
+      ],
+    },
+    {
+      to: "/pdf-chatbot",
+      title: "AI PDF Chatbot",
+      description:
+        "Upload PDFs and chat with AI to get instant answers and summaries from your documents.",
+      Icon: Brain,
+      points: ["Upload any PDF", "Ask questions", "Get instant answers"],
+    },
+  ];
+
+  const whyChoose = [
+    {
+      title: "AI-Powered",
+      description:
+        "Leverage AI for personalized courses, roadmaps, and instant answers",
+      Icon: Sparkles,
+    },
+    {
+      title: "100% Free",
+      description:
+        "All features, resources, and courses are completely free forever",
+      Icon: Zap,
+    },
+    {
+      title: "Community Driven",
+      description:
+        "Learn together, share knowledge, and grow with the community",
+      Icon: Users,
+    },
+    {
+      title: "Comprehensive",
+      description:
+        "Everything from basics to advanced topics, all in one place",
+      Icon: BookMarked,
+    },
+    {
+      title: "Certificates",
+      description:
+        "Earn certificates upon course completion with automated tests",
+      Icon: Award,
+    },
+    {
+      title: "Always Updated",
+      description:
+        "Fresh content added regularly to keep you ahead of the curve",
+      Icon: BookOpen,
+    },
+  ];
+
+  /* ---------------- JSX ---------------- */
+
   return (
     <>
       <SEO
@@ -27,443 +161,143 @@ const LandingPage: React.FC = () => {
         description="Master tech skills with AI-powered courses, roadmaps, and community discussions. Free PDFs, ebooks, and interview resources for developers."
         keywords="online learning, programming courses, tech roadmaps, developer community, free coding resources, interview prep"
       />
+
       <div className="min-h-screen">
-        {/* Hero Section */}
+        {/* Hero */}
         <section className="relative py-12 sm:py-20 px-4 text-center overflow-hidden">
           <div className="max-w-6xl mx-auto">
-            {/* Feedback Badges */}
-            <div className="flex flex-wrap justify-center gap-2 mb-6 sm:mb-8">
-              <Link to="/suggest-feature">
-                <div className="inline-flex items-center px-3 sm:px-4 py-2 text-xs sm:text-sm bg-gray-900 border rounded-full border-gray-700 text-cyan-400 hover:bg-gray-800 hover:border-cyan-500 transition-all">
-                  <Lightbulb className="w-3 sm:w-4 h-3 sm:h-4 mr-1.5" />
-                  Suggest Feature
-                </div>
-              </Link>
-              <Link to="/report-bug">
-                <div className="inline-flex items-center px-3 sm:px-4 py-2 text-xs sm:text-sm bg-gray-900 border rounded-full border-gray-700 text-red-400 hover:bg-gray-800 hover:border-red-500 transition-all">
-                  <Bug className="w-3 sm:w-4 h-3 sm:h-4 mr-1.5" />
-                  Report Bug
-                </div>
-              </Link>
+            {/* Feedback */}
+            <div data-aos="fade-down" className="flex flex-wrap justify-center gap-2 mb-8">
+              {feedbackBadges.map(({ to, label, Icon, className }) => (
+                <Link key={to} to={to}>
+                  <div
+                    className={`inline-flex items-center px-4 py-2 text-sm bg-gray-900 border rounded-full border-gray-700 hover:bg-gray-800 transition-all ${className}`}
+                  >
+                    <Icon className="w-4 h-4 mr-1.5" />
+                    {label}
+                  </div>
+                </Link>
+              ))}
             </div>
 
-            {/* Main Headline */}
-            <div className="mb-8 sm:mb-12">
-              <h1 className="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-alien font-black mb-4 sm:mb-6 glow-text">
-                Edulume
-              </h1>
-              <p className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-4 sm:mb-6 font-cyber">
-                Master Tech Skills with AI-Powered Learning
-              </p>
-              <p className="text-sm sm:text-base md:text-lg text-gray-400 mb-8 sm:mb-12 max-w-3xl mx-auto px-4">
-                Your complete learning platform with AI-powered courses,
-                structured roadmaps, community discussions, free resources, and
-                interview prep—all in one place.
-              </p>
-            </div>
+            {/* Title */}
+            <h1 className="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-alien font-black mb-6 glow-text">
+              Edulume
+            </h1>
+            <p className="text-xl md:text-2xl text-sage-green mb-6 font-cyber">
+              Master Tech Skills with AI-Powered Learning
+            </p>
+            <p className="paragraph mb-12 max-w-3xl mx-auto">
+              Your complete learning platform with AI-powered courses,
+              structured roadmaps, community discussions, free resources, and
+              interview prep—all in one place.
+            </p>
 
-            {/* CTA Buttons */}
-            <div className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 justify-center px-4 mb-12 sm:mb-16">
-              <Link
-                to="/courses"
-                className="alien-button text-sm sm:text-base md:text-lg px-6 sm:px-8 py-3 sm:py-4 w-full sm:w-auto"
-              >
+            {/* CTAs */}
+            <div data-aos="zoom-in" className="flex flex-wrap gap-4 justify-center mb-16">
+              <Link to="/courses" className="alien-button px-8 py-4">
                 <GraduationCap className="inline mr-2" size={20} />
                 Explore Courses
               </Link>
-              <Link
-                to="/roadmaps"
-                className="alien-button text-sm sm:text-base md:text-lg px-6 sm:px-8 py-3 sm:py-4 w-full sm:w-auto"
-              >
+              <Link to="/roadmaps" className="alien-button px-8 py-4">
                 <Map className="inline mr-2" size={20} />
                 Learning Paths
               </Link>
-              <Link
-                to="/discussions"
-                className="alien-button text-sm sm:text-base md:text-lg px-6 sm:px-8 py-3 sm:py-4 w-full sm:w-auto"
-              >
+              <Link to="/discussions" className="alien-button px-8 py-4">
                 <MessageSquare className="inline mr-2" size={20} />
                 Join Community
               </Link>
             </div>
 
-            {/* Quick Stats */}
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 max-w-4xl mx-auto px-4">
-              <div className="text-center">
-                <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-alien-green mb-1">
-                  100+
-                </div>
-                <div className="text-xs sm:text-sm text-gray-400">
-                  AI Courses
-                </div>
-              </div>
-              <div className="text-center">
-                <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-alien-green mb-1">
-                  50+
-                </div>
-                <div className="text-xs sm:text-sm text-gray-400">Roadmaps</div>
-              </div>
-              <div className="text-center">
-                <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-alien-green mb-1">
-                  1000+
-                </div>
-                <div className="text-xs sm:text-sm text-gray-400">
-                  Resources
-                </div>
-              </div>
-              <div className="text-center">
-                <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-alien-green mb-1">
-                  Free
+            {/* Stats */}
+            <div data-aos="fade-up" className="grid grid-cols-2 sm:grid-cols-4 gap-6 max-w-4xl mx-auto">
+              {quickStats.map(({ value, label }) => (
+                <div key={label} className="text-center">
+                  <div className="text-3xl font-bold text-sage-green mb-1">
+                    {value}
+                  </div>
+                  <div className="text-sm text-gray-500">{label}</div>
                 </div>
-                <div className="text-xs sm:text-sm text-gray-400">Forever</div>
-              </div>
+              ))}
             </div>
           </div>
-
-          {/* Floating Elements */}
-          <div className="absolute top-20 left-4 sm:left-10 w-3 sm:w-4 h-3 sm:h-4 bg-alien-green rounded-full animate-pulse opacity-60"></div>
-          <div className="absolute top-40 right-4 sm:right-20 w-2 h-2 bg-alien-green rounded-full animate-pulse opacity-40"></div>
-          <div className="absolute bottom-20 left-4 sm:left-20 w-2 sm:w-3 h-2 sm:h-3 bg-alien-green rounded-full animate-pulse opacity-50"></div>
         </section>
 
-        {/* Main Features Section */}
-        <section className="py-12 sm:py-20 px-4 bg-gradient-to-b from-transparent to-gray-900/20">
-          <div className="max-w-7xl mx-auto">
-            <div className="text-center mb-12 sm:mb-16">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-alien font-bold mb-4 glow-text">
-                Everything You Need to Learn
-              </h2>
-              <p className="text-sm sm:text-base md:text-lg text-gray-400 max-w-2xl mx-auto px-4">
-                From AI-powered courses to community support, we've got your
-                learning journey covered
-              </p>
-            </div>
-
-            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
-              {/* AI Courses */}
-              <Link to="/courses" className="group">
-                <div className="smoke-card p-6 sm:p-8 relative smoke-effect hover:shadow-alien-glow transition-all h-full">
-                  <div className="w-12 sm:w-16 h-12 sm:h-16 bg-alien-green rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-alien-glow group-hover:scale-110 transition-transform">
-                    <GraduationCap className="text-royal-black" size={28} />
-                  </div>
-                  <h3 className="text-lg sm:text-xl font-alien font-bold mb-3 sm:mb-4 text-alien-green flex items-center">
-                    AI-Powered Courses
-                    <ArrowRight
-                      className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
-                      size={20}
-                    />
-                  </h3>
-                  <p className="text-sm sm:text-base text-gray-300 mb-4">
-                    Learn with AI-generated courses, interactive chapters, and
-                    earn certificates with automated tests.
-                  </p>
-                  <ul className="space-y-2 text-xs sm:text-sm text-gray-400">
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>AI-generated content</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Progress tracking</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Certificate generation</span>
-                    </li>
-                  </ul>
-                </div>
-              </Link>
-
-              {/* Learning Roadmaps */}
-              <Link to="/roadmaps" className="group">
-                <div className="smoke-card p-6 sm:p-8 relative smoke-effect hover:shadow-alien-glow transition-all h-full">
-                  <div className="w-12 sm:w-16 h-12 sm:h-16 bg-alien-green rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-alien-glow group-hover:scale-110 transition-transform">
-                    <Map className="text-royal-black" size={28} />
-                  </div>
-                  <h3 className="text-lg sm:text-xl font-alien font-bold mb-3 sm:mb-4 text-alien-green flex items-center">
-                    Learning Roadmaps
-                    <ArrowRight
-                      className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
-                      size={20}
-                    />
-                  </h3>
-                  <p className="text-sm sm:text-base text-gray-300 mb-4">
-                    Follow structured learning paths with AI-generated roadmaps,
-                    resources, and career guidance.
-                  </p>
-                  <ul className="space-y-2 text-xs sm:text-sm text-gray-400">
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Step-by-step guidance</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Career insights</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Resource recommendations</span>
-                    </li>
-                  </ul>
-                </div>
-              </Link>
+        {/* Features */}
+        <section className="py-20 px-4">
+          <div className="max-w-7xl mx-auto grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {mainFeatures.map(
+              ({ to, title, description, Icon, points }) => (
+                <Link
+                  key={title}
+                  to={to}
+                  data-aos="fade-up"
+                  className="group rounded-lg shadow-lg hover:shadow-olive-forest transition-all"
+                >
+                  <div className="bg-beige-warm p-8 rounded-lg h-full smoke-effect">
+                    <div className="w-16 h-16 bg-olive-forest rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                      <Icon className="text-gray-50" size={28} />
+                    </div>
 
-              {/* Community Discussions */}
-              <Link to="/discussions" className="group">
-                <div className="smoke-card p-6 sm:p-8 relative smoke-effect hover:shadow-alien-glow transition-all h-full">
-                  <div className="w-12 sm:w-16 h-12 sm:h-16 bg-alien-green rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-alien-glow group-hover:scale-110 transition-transform">
-                    <MessageSquare className="text-royal-black" size={28} />
-                  </div>
-                  <h3 className="text-lg sm:text-xl font-alien font-bold mb-3 sm:mb-4 text-alien-green flex items-center">
-                    Community Q&A
-                    <ArrowRight
-                      className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
-                      size={20}
-                    />
-                  </h3>
-                  <p className="text-sm sm:text-base text-gray-300 mb-4">
-                    Ask questions, share knowledge, and get help from the
-                    community with voting and best answers.
-                  </p>
-                  <ul className="space-y-2 text-xs sm:text-sm text-gray-400">
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Real-time discussions</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Voting system</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Best answer marking</span>
-                    </li>
-                  </ul>
-                </div>
-              </Link>
+                    <h3 className="text-xl font-alien font-bold mb-4 flex items-center text-sage-green">
+                      {title}
+                      <ArrowRight className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity" />
+                    </h3>
 
-              {/* Free Resources */}
-              <Link to="/pdfs" className="group">
-                <div className="smoke-card p-6 sm:p-8 relative smoke-effect hover:shadow-alien-glow transition-all h-full">
-                  <div className="w-12 sm:w-16 h-12 sm:h-16 bg-alien-green rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-alien-glow group-hover:scale-110 transition-transform">
-                    <FileText className="text-royal-black" size={28} />
-                  </div>
-                  <h3 className="text-lg sm:text-xl font-alien font-bold mb-3 sm:mb-4 text-alien-green flex items-center">
-                    Free PDFs & Ebooks
-                    <ArrowRight
-                      className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
-                      size={20}
-                    />
-                  </h3>
-                  <p className="text-sm sm:text-base text-gray-300 mb-4">
-                    Access thousands of free programming PDFs, ebooks, and
-                    technical documentation.
-                  </p>
-                  <ul className="space-y-2 text-xs sm:text-sm text-gray-400">
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>100+ resources</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>All topics covered</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Free downloads</span>
-                    </li>
-                  </ul>
-                </div>
-              </Link>
+                    <p className="paragraph font-semibold mb-4">
+                      {description}
+                    </p>
 
-              {/* Interview Prep */}
-              <Link to="/interview-resources" className="group">
-                <div className="smoke-card p-6 sm:p-8 relative smoke-effect hover:shadow-alien-glow transition-all h-full">
-                  <div className="w-12 sm:w-16 h-12 sm:h-16 bg-alien-green rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-alien-glow group-hover:scale-110 transition-transform">
-                    <Award className="text-royal-black" size={28} />
+                    <ul className="space-y-2 text-sm text-olive-forest">
+                      {points.map((point) => (
+                        <li key={point} className="flex items-start">
+                          <CheckCircle className="w-4 h-4 text-sage-green mr-2 mt-0.5" />
+                          {point}
+                        </li>
+                      ))}
+                    </ul>
                   </div>
-                  <h3 className="text-lg sm:text-xl font-alien font-bold mb-3 sm:mb-4 text-alien-green flex items-center">
-                    Interview Prep
-                    <ArrowRight
-                      className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
-                      size={20}
-                    />
-                  </h3>
-                  <p className="text-sm sm:text-base text-gray-300 mb-4">
-                    Prepare for technical interviews with curated questions,
-                    tips, and resources.
-                  </p>
-                  <ul className="space-y-2 text-xs sm:text-sm text-gray-400">
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Common questions</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Best practices</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Company-specific tips</span>
-                    </li>
-                  </ul>
-                </div>
-              </Link>
-
-              {/* AI Chatbot */}
-              <Link to="/pdf-chatbot" className="group">
-                <div className="smoke-card p-6 sm:p-8 relative smoke-effect hover:shadow-alien-glow transition-all h-full">
-                  <div className="w-12 sm:w-16 h-12 sm:h-16 bg-alien-green rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-alien-glow group-hover:scale-110 transition-transform">
-                    <Brain className="text-royal-black" size={28} />
-                  </div>
-                  <h3 className="text-lg sm:text-xl font-alien font-bold mb-3 sm:mb-4 text-alien-green flex items-center">
-                    AI PDF Chatbot
-                    <ArrowRight
-                      className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
-                      size={20}
-                    />
-                  </h3>
-                  <p className="text-sm sm:text-base text-gray-300 mb-4">
-                    Upload PDFs and chat with AI to get instant answers and
-                    summaries from your documents.
-                  </p>
-                  <ul className="space-y-2 text-xs sm:text-sm text-gray-400">
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Upload any PDF</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Ask questions</span>
-                    </li>
-                    <li className="flex items-start">
-                      <CheckCircle className="w-4 h-4 text-alien-green mr-2 flex-shrink-0 mt-0.5" />
-                      <span>Get instant answers</span>
-                    </li>
-                  </ul>
-                </div>
-              </Link>
-            </div>
+                </Link>
+              )
+            )}
           </div>
         </section>
 
-        {/* Why Choose Section */}
-        <section className="py-12 sm:py-20 px-4">
-          <div className="max-w-6xl mx-auto">
-            <div className="text-center mb-12 sm:mb-16">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-alien font-bold mb-4 glow-text">
-                Why Choose Edulume?
-              </h2>
-              <p className="text-sm sm:text-base md:text-lg text-gray-400 max-w-2xl mx-auto px-4">
-                Built for learners, by learners. Everything you need in one
-                platform.
-              </p>
-            </div>
-
-            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
-              <div className="text-center">
-                <div className="w-16 h-16 bg-alien-green/10 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-alien-green">
-                  <Sparkles className="text-alien-green" size={32} />
+        {/* Why Choose */}
+        <section className="py-20 px-4">
+          <div className="max-w-6xl mx-auto grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {whyChoose.map(({ title, description, Icon }) => (
+              <div key={title} data-aos="fade-up" className="text-center">
+                <div className="w-16 h-16 bg-olive-forest/10 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-olive-forest">
+                  <Icon className="text-sage-green" size={32} />
                 </div>
-                <h3 className="text-lg sm:text-xl font-bold mb-2 text-alien-green">
-                  AI-Powered
+                <h3 className="text-xl font-bold mb-2 text-sage-green">
+                  {title}
                 </h3>
-                <p className="text-sm sm:text-base text-gray-400">
-                  Leverage AI for personalized courses, roadmaps, and instant
-                  answers
-                </p>
+                <p className="paragraph">{description}</p>
               </div>
-
-              <div className="text-center">
-                <div className="w-16 h-16 bg-alien-green/10 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-alien-green">
-                  <Zap className="text-alien-green" size={32} />
-                </div>
-                <h3 className="text-lg sm:text-xl font-bold mb-2 text-alien-green">
-                  100% Free
-                </h3>
-                <p className="text-sm sm:text-base text-gray-400">
-                  All features, resources, and courses are completely free
-                  forever
-                </p>
-              </div>
-
-              <div className="text-center">
-                <div className="w-16 h-16 bg-alien-green/10 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-alien-green">
-                  <Users className="text-alien-green" size={32} />
-                </div>
-                <h3 className="text-lg sm:text-xl font-bold mb-2 text-alien-green">
-                  Community Driven
-                </h3>
-                <p className="text-sm sm:text-base text-gray-400">
-                  Learn together, share knowledge, and grow with the community
-                </p>
-              </div>
-
-              <div className="text-center">
-                <div className="w-16 h-16 bg-alien-green/10 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-alien-green">
-                  <BookMarked className="text-alien-green" size={32} />
-                </div>
-                <h3 className="text-lg sm:text-xl font-bold mb-2 text-alien-green">
-                  Comprehensive
-                </h3>
-                <p className="text-sm sm:text-base text-gray-400">
-                  Everything from basics to advanced topics, all in one place
-                </p>
-              </div>
-
-              <div className="text-center">
-                <div className="w-16 h-16 bg-alien-green/10 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-alien-green">
-                  <Award className="text-alien-green" size={32} />
-                </div>
-                <h3 className="text-lg sm:text-xl font-bold mb-2 text-alien-green">
-                  Certificates
-                </h3>
-                <p className="text-sm sm:text-base text-gray-400">
-                  Earn certificates upon course completion with automated tests
-                </p>
-              </div>
-
-              <div className="text-center">
-                <div className="w-16 h-16 bg-alien-green/10 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-alien-green">
-                  <BookOpen className="text-alien-green" size={32} />
-                </div>
-                <h3 className="text-lg sm:text-xl font-bold mb-2 text-alien-green">
-                  Always Updated
-                </h3>
-                <p className="text-sm sm:text-base text-gray-400">
-                  Fresh content added regularly to keep you ahead of the curve
-                </p>
-              </div>
-            </div>
+            ))}
           </div>
         </section>
 
-        {/* CTA Section */}
-        <section className="py-12 sm:py-20 px-4">
-          <div className="max-w-4xl mx-auto text-center">
-            <div className="smoke-card p-8 sm:p-12 relative smoke-effect">
-              <h2 className="text-2xl sm:text-3xl md:text-4xl font-alien font-bold mb-4 glow-text">
-                Ready to Start Learning?
-              </h2>
-              <p className="text-sm sm:text-base md:text-lg text-gray-400 mb-8 max-w-2xl mx-auto">
-                Join thousands of learners mastering tech skills with AI-powered
-                courses and community support
-              </p>
-              <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Link
-                  to="/courses"
-                  className="alien-button text-base sm:text-lg px-8 py-4"
-                >
-                  <GraduationCap className="inline mr-2" size={24} />
-                  Start Learning Now
-                </Link>
-                <Link
-                  to="/auth"
-                  className="alien-button text-base sm:text-lg px-8 py-4"
-                >
-                  Create Free Account
-                </Link>
-              </div>
+        {/* CTA */}
+        <section className="py-20 px-4 text-center">
+          <div className="bg-beige-warm p-12 rounded-sm shadow-lg smoke-effect max-w-4xl mx-auto">
+            <h2 className="text-4xl font-alien font-bold mb-4 glow-text">
+              Ready to Start Learning?
+            </h2>
+            <p className="paragraph mb-8">
+              Join thousands of learners mastering tech skills with AI-powered
+              courses and community support
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link to="/courses" className="alien-button px-8 py-4">
+                <GraduationCap className="inline mr-2" size={24} />
+                Start Learning Now
+              </Link>
+              <Link to="/auth" className="alien-button px-8 py-4">
+                Create Free Account
+              </Link>
             </div>
           </div>
         </section>
diff --git a/client/src/components/layout/Navbar.tsx b/client/src/components/layout/Navbar.tsx
index 4a44c53..7b71935 100644
--- a/client/src/components/layout/Navbar.tsx
+++ b/client/src/components/layout/Navbar.tsx
@@ -144,8 +144,8 @@ export default function ResponsiveNavbar({
   // Show loading state while checking authentication (preserve styles/colors)
   if (authenticated === null) {
     return (
-      <nav className="bg-smoke-gray/95 border-b border-smoke-light sticky top-0 z-50 backdrop-blur-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <nav className="bg-gray-50/95 border-b border-smoke-dark sticky top-0 z-50 backdrop-blur-lg">
+        <div data-aos="fade-down" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <Link to="/" className="flex items-center space-x-2">
               <img src="/logo.png" alt="Edulume" className="w-8 h-8 " />
@@ -159,8 +159,8 @@ export default function ResponsiveNavbar({
   }
 
   return (
-    <nav className="bg-smoke-gray/95 border-b border-smoke-light sticky top-0 z-50 backdrop-blur-sm">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <nav className="bg-gray-50/95 border-b border-smoke-dark sticky top-0 z-50 backdrop-blur-lg">
+      <div data-aos="fade-down" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
           <Link to="/" className="flex items-center space-x-2">
             <img src="/logo.png" alt="Edulume" className="w-8 h-8 " />
@@ -172,7 +172,7 @@ export default function ResponsiveNavbar({
             <button
               aria-label="Open menu"
               onClick={() => setIsMobileMenuOpen(true)}
-              className="text-gray-300 hover:text-alien-green p-2"
+              className="text-gray-900 hover:text-alien-green p-2"
             >
               <svg
                 className="w-6 h-6"
@@ -205,8 +205,8 @@ export default function ResponsiveNavbar({
                   isActive("/pdfs") ||
                   isActive("/ebooks") ||
                   isActive("/interview-resources")
-                    ? "text-alien-green shadow-alien-glow"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    ? "text-olive-forest shadow-olive-forest"
+                    : "text-gray-900 hover:text-olive-forest hover:shadow-olive-forest cursor-pointer"
                 }`}
                 aria-expanded={resourcesOpen}
                 aria-haspopup="menu"
@@ -221,7 +221,7 @@ export default function ResponsiveNavbar({
               </button>
               {resourcesOpen && (
                 <div
-                  className="absolute left-0 mt-2 w-48 bg-smoke-gray border border-smoke-light rounded-lg shadow-lg z-50"
+                  className="absolute left-0 mt-2 w-48 bg-beige-warm border border-beige-warm rounded-lg shadow-lg z-50"
                   role="menu"
                 >
                   <Link
@@ -229,8 +229,8 @@ export default function ResponsiveNavbar({
                     onClick={() => setResourcesOpen(false)}
                     className={`block px-4 py-2 text-sm rounded-t-lg transition-colors duration-200 ${
                       isActive("/pdfs")
-                        ? "text-alien-green shadow-alien-glow"
-                        : "text-gray-300 hover:text-alien-green hover:bg-smoke-light"
+                        ? "text-olive-forest shadow-olive-forest"
+                        : "text-moss-accent hover:text-olive-gold hover:font-semibold hover:bg-olive-forest"
                     }`}
                     role="menuitem"
                   >
@@ -241,8 +241,8 @@ export default function ResponsiveNavbar({
                     onClick={() => setResourcesOpen(false)}
                     className={`block px-4 py-2 text-sm transition-colors duration-200 ${
                       isActive("/ebooks")
-                        ? "text-alien-green shadow-alien-glow"
-                        : "text-gray-300 hover:text-alien-green hover:bg-smoke-light"
+                        ? "text-olive-forest shadow-olive-forest"
+                        : "text-moss-accent hover:text-olive-gold hover:font-semibold hover:bg-olive-forest"
                     }`}
                     role="menuitem"
                   >
@@ -253,8 +253,8 @@ export default function ResponsiveNavbar({
                     onClick={() => setResourcesOpen(false)}
                     className={`block px-4 py-2 text-sm rounded-b-lg transition-colors duration-200 ${
                       isActive("/interview-resources")
-                        ? "text-alien-green shadow-alien-glow"
-                        : "text-gray-300 hover:text-alien-green hover:bg-smoke-light"
+                        ? "text-olive-forest shadow-olive-forest"
+                        : "text-moss-accent hover:text-olive-gold hover:font-semibold hover:bg-olive-forest"
                     }`}
                     role="menuitem"
                   >
@@ -269,8 +269,8 @@ export default function ResponsiveNavbar({
               to="/discussions"
               className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                 isActive("/discussions")
-                  ? "text-alien-green shadow-alien-glow"
-                  : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                  ? "text-olive-forest shadow-olive-forest"
+                  : "text-gray-900 hover:text-olive-forest hover:shadow-olive-forest"
               }`}
             >
               <span>Discussions</span>
@@ -289,8 +289,8 @@ export default function ResponsiveNavbar({
                   isActive("/courses") ||
                   isActive("/roadmaps") ||
                   isActive("/pdf-chatbot")
-                    ? "text-alien-green shadow-alien-glow"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    ? "text-olive-forest shadow-olive-forest"
+                    : "text-gray-900 hover:text-olive-gold hover:font-semibold hover:bg-olive-forest"
                 }`}
                 aria-expanded={aiToolsOpen}
                 aria-haspopup="menu"
@@ -305,7 +305,7 @@ export default function ResponsiveNavbar({
               </button>
               {aiToolsOpen && (
                 <div
-                  className="absolute left-0 mt-2 w-48 bg-smoke-gray border border-smoke-light rounded-lg shadow-lg z-50"
+                  className="absolute left-0 mt-2 w-48 bg-smoke-light border border-smoke-light rounded-lg shadow-lg z-50"
                   role="menu"
                 >
                   <Link
@@ -313,8 +313,8 @@ export default function ResponsiveNavbar({
                     onClick={() => setAiToolsOpen(false)}
                     className={`block px-4 py-2 text-sm rounded-t-lg transition-colors duration-200 ${
                       isActive("/courses")
-                        ? "text-alien-green shadow-alien-glow"
-                        : "text-gray-300 hover:text-alien-green hover:bg-smoke-light"
+                        ? "text-olive-forest shadow-olive-forest"
+                        : "text-moss-accent hover:text-olive-gold hover:font-semibold hover:bg-olive-forest"
                     }`}
                     role="menuitem"
                   >
@@ -325,8 +325,8 @@ export default function ResponsiveNavbar({
                     onClick={() => setAiToolsOpen(false)}
                     className={`block px-4 py-2 text-sm transition-colors duration-200 ${
                       isActive("/roadmaps")
-                        ? "text-alien-green shadow-alien-glow"
-                        : "text-gray-300 hover:text-alien-green hover:bg-smoke-light"
+                        ? "text-olive-forest shadow-olive-forest"
+                        : "text-moss-accent hover:text-olive-gold hover:font-semibold hover:bg-olive-forest"
                     }`}
                     role="menuitem"
                   >
@@ -337,8 +337,8 @@ export default function ResponsiveNavbar({
                     onClick={() => setAiToolsOpen(false)}
                     className={`block px-4 py-2 text-sm rounded-b-lg transition-colors duration-200 ${
                       isActive("/pdf-chatbot")
-                        ? "text-alien-green shadow-alien-glow"
-                        : "text-gray-300 hover:text-alien-green hover:bg-smoke-light"
+                        ? "text-olive-forest shadow-olive-forest"
+                        : "text-moss-accent hover:text-olive-gold hover:font-semibold hover:bg-olive-forest"
                     }`}
                     role="menuitem"
                   >
@@ -350,8 +350,8 @@ export default function ResponsiveNavbar({
                     onClick={() => setAiToolsOpen(false)}
                     className={`block px-4 py-2 text-sm rounded-b-lg transition-colors duration-200 ${
                       isActive("/pdf-chatbot")
-                        ? "text-alien-green shadow-alien-glow"
-                        : "text-gray-300 hover:text-alien-green hover:bg-smoke-light"
+                        ? "text-olive-forest shadow-olive-forest"
+                        : "text-moss-accent hover:text-olive-gold hover:font-semibold hover:bg-olive-forest"
                     }`}
                     role="menuitem"
                   >
@@ -366,7 +366,7 @@ export default function ResponsiveNavbar({
               <div className="relative" ref={profileRef}>
                 <button
                   onClick={() => setIsProfileDropdownOpen((v) => !v)}
-                  className="flex items-center space-x-2 text-gray-300 hover:text-alien-green px-3 py-2 rounded-lg transition-all duration-300"
+                  className="flex items-center space-x-2 text-gray-900 hover:text-alien-green px-3 py-2 rounded-lg transition-all duration-300"
                 >
                   <div className="w-8 h-8 border border-neutral-700 rounded-full flex items-center justify-center shadow-alien-glow">
                     <img
@@ -409,7 +409,7 @@ export default function ResponsiveNavbar({
                       <Link
                         to="/change-username"
                         onClick={() => setIsProfileDropdownOpen(false)}
-                        className="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-smoke-light hover:text-alien-green transition-colors duration-200"
+                        className="flex items-center px-4 py-2 text-sm border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-smoke-light transition-colors duration-200"
                       >
                         <svg
                           className="mr-3"
@@ -430,7 +430,7 @@ export default function ResponsiveNavbar({
                       <Link
                         to="/forgot-password"
                         onClick={() => setIsProfileDropdownOpen(false)}
-                        className="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-smoke-light hover:text-alien-green transition-colors duration-200"
+                        className="flex items-center px-4 py-2 text-sm border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-smoke-light transition-colors duration-200"
                       >
                         <Lock size={16} className="mr-3" />
                         Change Password
@@ -440,7 +440,7 @@ export default function ResponsiveNavbar({
                           setIsProfileDropdownOpen(false);
                           handleLogout();
                         }}
-                        className="flex items-center w-full px-4 py-2 text-sm text-gray-300 hover:bg-smoke-light hover:text-red-400 transition-colors duration-200"
+                        className="flex items-center w-full px-4 py-2 text-sm border border-red-600 text-red-600 hover:bg-red-600 hover:text-smoke-light transition-colors duration-200"
                       >
                         <LogOut size={16} className="mr-3" />
                         Logout
@@ -454,8 +454,8 @@ export default function ResponsiveNavbar({
                 to="/auth"
                 className={`flex items-center border border-neutral-700 space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                   isActive("/auth")
-                    ? "text-alien-green shadow-alien-glow"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    ? "text-olive-forest shadow-olive-forest"
+                    : "text-olive-forest hover:bg-olive-forest hover:shadow-olive-forest hover:text-olive-amber"
                 }`}
               >
                 <LogIn size={20} />
@@ -499,7 +499,7 @@ export default function ResponsiveNavbar({
           <button
             aria-label="Close menu"
             onClick={() => setIsMobileMenuOpen(false)}
-            className="text-gray-300 hover:text-alien-green p-2 rounded-lg transition-colors"
+            className="text-gray-900 hover:text-alien-green p-2 rounded-lg transition-colors"
           >
             <svg
               className="w-6 h-6"
@@ -521,7 +521,7 @@ export default function ResponsiveNavbar({
         <div className="h-[calc(100vh-4rem)] overflow-y-auto px-2 pt-4 pb-6 space-y-2">
           {/* Resources (collapsible) */}
           <button
-            className="w-full flex items-center justify-between px-3 py-2 rounded-lg text-gray-300 hover:text-alien-green transition-all duration-300"
+            className="w-full flex items-center justify-between px-3 py-2 rounded-lg text-gray-900 hover:text-alien-green transition-all duration-300"
             onClick={() => setMobileResourcesOpen((v) => !v)}
             aria-expanded={mobileResourcesOpen}
           >
@@ -544,7 +544,7 @@ export default function ResponsiveNavbar({
                 className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                   isActive("/pdfs")
                     ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
                 }`}
               >
                 <FileText size={20} />
@@ -556,7 +556,7 @@ export default function ResponsiveNavbar({
                 className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                   isActive("/ebooks")
                     ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
                 }`}
               >
                 <BookOpen size={20} />
@@ -568,7 +568,7 @@ export default function ResponsiveNavbar({
                 className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                   isActive("/interview-resources")
                     ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
                 }`}
               >
                 <Briefcase size={20} />
@@ -581,10 +581,10 @@ export default function ResponsiveNavbar({
           <Link
             to="/discussions"
             onClick={() => setIsMobileMenuOpen(false)}
-            className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
+            className={`flex items-center space-x-2 px-3 py-2 rounded-lg border border-alien-green transition-all duration-300 ${
               isActive("/discussions")
                 ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
             }`}
           >
             <MessageSquare size={20} />
@@ -593,7 +593,7 @@ export default function ResponsiveNavbar({
 
           {/* AI Tools (collapsible) */}
           <button
-            className="w-full flex items-center justify-between px-3 py-2 rounded-lg text-gray-300 hover:text-alien-green transition-all duration-300"
+            className="w-full flex items-center justify-between px-3 py-2 rounded-lg text-gray-900 hover:text-alien-green transition-all duration-300"
             onClick={() => setMobileAiToolsOpen((v) => !v)}
             aria-expanded={mobileAiToolsOpen}
           >
@@ -616,7 +616,7 @@ export default function ResponsiveNavbar({
                 className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                   isActive("/courses")
                     ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
                 }`}
               >
                 <GraduationCap size={20} />
@@ -628,7 +628,7 @@ export default function ResponsiveNavbar({
                 className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                   isActive("/roadmaps")
                     ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
                 }`}
               >
                 <Map size={20} />
@@ -640,7 +640,7 @@ export default function ResponsiveNavbar({
                 className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                   isActive("/pdf-chatbot")
                     ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
                 }`}
               >
                 <MessageSquare size={20} />
@@ -653,7 +653,7 @@ export default function ResponsiveNavbar({
                 className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                   isActive("/pdf-chatbot")
                     ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                    : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                    : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
                 }`}
               >
                 <GitGraphIcon size={20} />
@@ -694,7 +694,7 @@ export default function ResponsiveNavbar({
               <Link
                 to="/change-username"
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="flex items-center space-x-2 px-3 py-2 text-gray-300 hover:text-alien-green transition-colors duration-300"
+                className="flex items-center space-x-2 px-3 py-2 text-gray-900 hover:text-alien-green transition-colors duration-300"
               >
                 <User size={20} />
                 <span>Change Username</span>
@@ -702,7 +702,7 @@ export default function ResponsiveNavbar({
               <Link
                 to="/forgot-password"
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="flex items-center space-x-2 px-3 py-2 text-gray-300 hover:text-alien-green transition-colors duration-300"
+                className="flex items-center space-x-2 px-3 py-2 text-gray-900 hover:text-alien-green transition-colors duration-300"
               >
                 <Lock size={20} />
                 <span>Change Password</span>
@@ -712,7 +712,7 @@ export default function ResponsiveNavbar({
                   setIsMobileMenuOpen(false);
                   handleLogout();
                 }}
-                className="flex items-center space-x-2 text-gray-300 hover:text-red-400 px-3 py-2 rounded-lg transition-all duration-300 w-full text-left"
+                className="flex items-center space-x-2 text-gray-900 hover:text-red-400 px-3 py-2 rounded-lg transition-all duration-300 w-full text-left"
               >
                 <LogOut size={20} />
                 <span>Logout</span>
@@ -725,7 +725,7 @@ export default function ResponsiveNavbar({
               className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-300 ${
                 isActive("/auth")
                   ? "text-alien-green shadow-alien-glow bg-alien-green/10"
-                  : "text-gray-300 hover:text-alien-green hover:shadow-alien-glow"
+                  : "text-gray-900 hover:text-alien-green hover:shadow-alien-glow"
               }`}
             >
               <LogIn size={20} />
diff --git a/client/src/components/resources/EbooksPage.tsx b/client/src/components/resources/EbooksPage.tsx
index 259fb7f..82ca5cf 100644
--- a/client/src/components/resources/EbooksPage.tsx
+++ b/client/src/components/resources/EbooksPage.tsx
@@ -43,22 +43,30 @@ const EbookCard = React.memo(({ ebook }: { ebook: EbookItem }) => (
     </p>
 
     <div className="space-y-2 mb-4 text-xs text-gray-500 min-h-[60px]">
-      {ebook.course && (
-        <div className="flex items-center">
-          <FileText size={14} className="mr-2" />
-          <span>{ebook.course}</span>
-        </div>
-      )}
-      {ebook.department && (
-        <div className="flex items-center">
-          <User size={14} className="mr-2" />
-          <span>{ebook.department}</span>
-        </div>
-      )}
-      <div className="flex items-center">
-        <Calendar size={14} className="mr-2" />
-        <span>{new Date(ebook.upload_date).toLocaleDateString()}</span>
-      </div>
+      {[
+        {
+          show: ebook.course,
+          icon: FileText,
+          value: ebook.course,
+        },
+        {
+          show: ebook.department,
+          icon: User,
+          value: ebook.department,
+        },
+        {
+          show: true,
+          icon: Calendar,
+          value: new Date(ebook.upload_date).toLocaleDateString(),
+        },
+      ]
+        .filter(item => item.show)
+        .map(({ icon: Icon, value }, index) => (
+          <div key={index} className="flex items-center">
+            <Icon size={14} className="mr-2" />
+            <span>{value}</span>
+          </div>
+        ))}
     </div>
 
     <div className="mt-auto">
@@ -303,11 +311,10 @@ const EbooksPage: React.FC = () => {
             <div className="flex flex-wrap items-center gap-4 mb-4">
               <button
                 onClick={() => setShowFilters(!showFilters)}
-                className={`flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all duration-300 ${
-                  showFilters || hasActiveFilters
+                className={`flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all duration-300 ${showFilters || hasActiveFilters
                     ? "border-alien-green bg-alien-green/10 text-alien-green"
                     : "border-smoke-light text-gray-400 hover:border-alien-green hover:text-alien-green"
-                }`}
+                  }`}
               >
                 <Filter size={16} />
                 <span>Filters</span>
@@ -430,12 +437,11 @@ const EbooksPage: React.FC = () => {
                     onChange={(e) => setSelectedYear(e.target.value)}
                     className="alien-input w-full text-sm"
                   >
-                    <option value="">All Years</option>
-                    <option value="1">1st Year</option>
-                    <option value="2">2nd Year</option>
-                    <option value="3">3rd Year</option>
-                    <option value="4">4th Year</option>
-                    <option value="5">5th Year</option>
+                    {["", "1", "2", "3", "4"].map((year) => (
+                    <option key={year} value={year}>
+                      {year === "" ? "All Years" : `Year ${year}`}
+                    </option>
+                    ))}
                   </select>
                 </div>
               </div>
@@ -517,11 +523,10 @@ const EbooksPage: React.FC = () => {
                           key={pageNum}
                           onClick={() => handlePageChange(pageNum)}
                           disabled={loading}
-                          className={`px-4 py-2 rounded-lg border transition-all duration-300 ${
-                            currentPage === pageNum
+                          className={`px-4 py-2 rounded-lg border transition-all duration-300 ${currentPage === pageNum
                               ? "border-alien-green bg-alien-green/10 text-alien-green"
                               : "border-smoke-light text-gray-400 hover:border-alien-green hover:text-alien-green"
-                          } disabled:opacity-50 disabled:cursor-not-allowed`}
+                            } disabled:opacity-50 disabled:cursor-not-allowed`}
                         >
                           {pageNum}
                         </button>
diff --git a/client/src/components/roadmaps/CreateRoadmapPage.tsx b/client/src/components/roadmaps/CreateRoadmapPage.tsx
index 4b23993..41d43c9 100644
--- a/client/src/components/roadmaps/CreateRoadmapPage.tsx
+++ b/client/src/components/roadmaps/CreateRoadmapPage.tsx
@@ -69,6 +69,27 @@ const CreateRoadmapPage: React.FC = () => {
     }
   };
 
+  const features = [
+    {
+      icon: Target,
+      title: "Structured Learning",
+      description:
+        "Progressive stages from beginner to advanced with clear milestones",
+    },
+    {
+      icon: BookOpen,
+      title: "Curated Resources",
+      description:
+        "Hand-picked tutorials, courses, and documentation for each stage",
+    },
+    {
+      icon: Zap,
+      title: "Practical Projects",
+      description:
+        "Real-world projects to build your portfolio and skills",
+    },
+  ];
+
   return (
     <div className="min-h-screen bg-royal-black text-white">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -94,25 +115,22 @@ const CreateRoadmapPage: React.FC = () => {
         <div className="flex items-center justify-center mb-8">
           <div className="flex items-center space-x-4">
             <div
-              className={`flex items-center justify-center w-8 h-8 rounded-full ${
-                step >= 1
-                  ? "bg-alien-green text-royal-black"
-                  : "bg-smoke-gray text-gray-400"
-              }`}
+              className={`flex items-center justify-center w-8 h-8 rounded-full ${step >= 1
+                ? "bg-alien-green text-royal-black"
+                : "bg-smoke-gray text-gray-400"
+                }`}
             >
               1
             </div>
             <div
-              className={`w-16 h-1 ${
-                step >= 2 ? "bg-alien-green" : "bg-smoke-gray"
-              }`}
+              className={`w-16 h-1 ${step >= 2 ? "bg-alien-green" : "bg-smoke-gray"
+                }`}
             ></div>
             <div
-              className={`flex items-center justify-center w-8 h-8 rounded-full ${
-                step >= 2
-                  ? "bg-alien-green text-royal-black"
-                  : "bg-smoke-gray text-gray-400"
-              }`}
+              className={`flex items-center justify-center w-8 h-8 rounded-full ${step >= 2
+                ? "bg-alien-green text-royal-black"
+                : "bg-smoke-gray text-gray-400"
+                }`}
             >
               2
             </div>
@@ -197,40 +215,16 @@ const CreateRoadmapPage: React.FC = () => {
 
             {/* Feature highlights */}
             <div className="mt-12 grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
-              <div className="text-center">
-                <div className="w-12 h-12 bg-alien-green/20 rounded-lg flex items-center justify-center mx-auto mb-3">
-                  <Target className="text-alien-green" size={24} />
-                </div>
-                <h3 className="font-semibold text-white mb-2">
-                  Structured Learning
-                </h3>
-                <p className="text-sm text-gray-400">
-                  Progressive stages from beginner to advanced with clear
-                  milestones
-                </p>
-              </div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-alien-green/20 rounded-lg flex items-center justify-center mx-auto mb-3">
-                  <BookOpen className="text-alien-green" size={24} />
-                </div>
-                <h3 className="font-semibold text-white mb-2">
-                  Curated Resources
-                </h3>
-                <p className="text-sm text-gray-400">
-                  Hand-picked tutorials, courses, and documentation for each
-                  stage
-                </p>
-              </div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-alien-green/20 rounded-lg flex items-center justify-center mx-auto mb-3">
-                  <Zap className="text-alien-green" size={24} />
-                </div>
-                <h3 className="font-semibold text-white mb-2">
-                  Practical Projects
-                </h3>
-                <p className="text-sm text-gray-400">
-                  Real-world projects to build your portfolio and skills
-                </p>
+              <div className="mt-12 grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+                {features.map(({ icon: Icon, title, description }) => (
+                  <div key={title} className="text-center">
+                    <div className="w-12 h-12 bg-alien-green/20 rounded-lg flex items-center justify-center mx-auto mb-3">
+                      <Icon className="text-alien-green" size={24} />
+                    </div>
+                    <h3 className="font-semibold text-white mb-2">{title}</h3>
+                    <p className="text-sm text-gray-400">{description}</p>
+                  </div>
+                ))}
               </div>
             </div>
           </div>
diff --git a/client/src/components/roadmaps/RoadmapDetailPage.tsx b/client/src/components/roadmaps/RoadmapDetailPage.tsx
index df29bb5..976db6b 100644
--- a/client/src/components/roadmaps/RoadmapDetailPage.tsx
+++ b/client/src/components/roadmaps/RoadmapDetailPage.tsx
@@ -190,6 +190,30 @@ const RoadmapDetailPage: React.FC = () => {
     );
   }
 
+  const roadmapTabs = [
+    {
+      key: "stages",
+      label: "Learning Stages",
+      count: (content: RoadmapContent) => content.stages.length,
+    },
+    {
+      key: "tools",
+      label: "Tools & Setup",
+      count: (content: RoadmapContent) => content.tools.length,
+    },
+    {
+      key: "certifications",
+      label: "Certifications",
+      count: (content: RoadmapContent) => content.certifications.length,
+    },
+    {
+      key: "career",
+      label: "Career Path",
+      count: null,
+    },
+  ];
+
+
   return (
     <>
       {roadmap && (
@@ -292,582 +316,33 @@ const RoadmapDetailPage: React.FC = () => {
           </div>
 
           {/* Navigation Tabs */}
-          <div className="bg-smoke-gray rounded-lg mb-8">
-            <div className="overflow-x-auto">
-              <div
-                className="flex border-b border-smoke-light whitespace-nowrap"
-                role="tablist"
-                aria-label="Roadmap sections"
-              >
-                <button
-                  onClick={() => setActiveTab("stages")}
-                  role="tab"
-                  aria-selected={activeTab === "stages"}
-                  className={`px-4 py-3 text-sm sm:px-6 sm:py-4 sm:text-base font-medium transition-colors duration-200 ${activeTab === "stages"
-                    ? "text-alien-green border-b-2 border-alien-green"
-                    : "text-gray-400 hover:text-white"
-                    }`}
-                  type="button"
-                >
-                  Learning Stages ({roadmapContent.stages.length})
-                </button>
-                <button
-                  onClick={() => setActiveTab("tools")}
-                  role="tab"
-                  aria-selected={activeTab === "tools"}
-                  className={`px-4 py-3 text-sm sm:px-6 sm:py-4 sm:text-base font-medium transition-colors duration-200 ${activeTab === "tools"
-                    ? "text-alien-green border-b-2 border-alien-green"
-                    : "text-gray-400 hover:text-white"
-                    }`}
-                  type="button"
-                >
-                  Tools & Setup ({roadmapContent.tools.length})
-                </button>
+          <div
+            className="flex border-b border-smoke-light whitespace-nowrap"
+            role="tablist"
+            aria-label="Roadmap sections"
+          >
+            {roadmapTabs.map(({ key, label, count }) => {
+              const isActive = activeTab === key;
+
+              return (
                 <button
-                  onClick={() => setActiveTab("certifications")}
+                  key={key}
+                  onClick={() => setActiveTab(key as typeof activeTab)}
                   role="tab"
-                  aria-selected={activeTab === "certifications"}
-                  className={`px-4 py-3 text-sm sm:px-6 sm:py-4 sm:text-base font-medium transition-colors duration-200 ${activeTab === "certifications"
-                    ? "text-alien-green border-b-2 border-alien-green"
-                    : "text-gray-400 hover:text-white"
-                    }`}
+                  aria-selected={isActive}
                   type="button"
-                >
-                  Certifications ({roadmapContent.certifications.length})
-                </button>
-                <button
-                  onClick={() => setActiveTab("career")}
-                  role="tab"
-                  aria-selected={activeTab === "career"}
-                  className={`px-4 py-3 text-sm sm:px-6 sm:py-4 sm:text-base font-medium transition-colors duration-200 ${activeTab === "career"
-                    ? "text-alien-green border-b-2 border-alien-green"
-                    : "text-gray-400 hover:text-white"
+                  className={`px-4 py-3 text-sm sm:px-6 sm:py-4 sm:text-base font-medium transition-colors duration-200 ${isActive
+                      ? "text-alien-green border-b-2 border-alien-green"
+                      : "text-gray-400 hover:text-white"
                     }`}
-                  type="button"
                 >
-                  Career Path
+                  {label}
+                  {count && ` (${count(roadmapContent)})`}
                 </button>
-              </div>
-            </div>
-
-            <div className="p-4 sm:p-6">
-              {/* Learning Stages Tab */}
-              {activeTab === "stages" && (
-                <div className="space-y-6">
-                  {roadmapContent.stages.map((stage, index) => (
-                    <div
-                      key={index}
-                      className="border border-smoke-light rounded-lg whitespace-normal break-words"
-                    >
-                      <button
-                        onClick={() => toggleStageExpansion(index)}
-                        className="w-full flex items-center justify-between p-4 sm:p-6 hover:bg-royal-black/50 transition-colors duration-200 text-left"
-                        type="button"
-                        aria-expanded={expandedStages.has(index)}
-                      >
-                        <div className="flex items-center gap-4">
-                          <div className="flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 bg-alien-green text-royal-black rounded-full font-bold shrink-0">
-                            {index + 1}
-                          </div>
-                          <div className="text-left min-w-0">
-                            <div className="flex items-center gap-2 mb-1">
-                              <h3 className="font-semibold text-white text-base sm:text-lg whitespace-normal break-words">
-                                {stage.title}
-                              </h3>
-                              <span
-                                className={`px-2 py-1 rounded-full text-[10px] sm:text-xs font-medium ${getDifficultyColor(
-                                  stage.level
-                                )}`}
-                              >
-                                {stage.level}
-                              </span>
-                            </div>
-                            <p className="text-gray-400 text-sm line-clamp-3 sm:line-clamp-none">
-                              {stage.description}
-                            </p>
-                            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-2 text-xs text-gray-500">
-                              <span>⏱️ {stage.timeframe}</span>
-                              <span>📚 {stage.resources.length} resources</span>
-                              <span>🛠️ {stage.projects.length} projects</span>
-                            </div>
-                          </div>
-                        </div>
-                        {expandedStages.has(index) ? (
-                          <ChevronDown size={20} />
-                        ) : (
-                          <ChevronRight size={20} />
-                        )}
-                      </button>
-
-                      {expandedStages.has(index) && (
-                        <div className="border-t border-smoke-light p-4 sm:p-6 bg-royal-black/30">
-                          <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
-                            {/* Skills */}
-                            <div>
-                              <h4 className="text-base sm:text-lg font-semibold text-alien-green mb-3 sm:mb-4 flex items-center">
-                                <Target className="mr-2" size={20} />
-                                Skills to Learn
-                              </h4>
-                              <div className="space-y-3">
-                                {stage.skills.map((skill, skillIndex) => (
-                                  <div
-                                    key={skillIndex}
-                                    className="bg-smoke-gray/50 rounded-lg p-4"
-                                  >
-                                    <h5 className="font-medium text-white mb-2">
-                                      {skill.name}
-                                    </h5>
-                                    <p className="text-gray-400 text-sm mb-2">
-                                      {skill.description}
-                                    </p>
-                                    <p className="text-alien-green text-xs">
-                                      {skill.importance}
-                                    </p>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-
-                            {/* Resources */}
-                            <div>
-                              <div className="space-y-2">
-                                <h4 className="text-base  sm:text-lg font-semibold text-alien-green flex items-center">
-                                  <BookOpen className="mr-2" size={20} />
-                                  Learning Resources
-                                </h4>
-                                <p className="text-red-400">
-                                  ⚠️ Some links might not work
-                                </p>
-                              </div>
-
-                              <div className="space-y-3">
-                                {stage.resources.map(
-                                  (resource, resourceIndex) => (
-                                    <div
-                                      key={resourceIndex}
-                                      className="bg-smoke-gray/50 rounded-lg p-4"
-                                    >
-                                      <div className="flex items-start justify-between mb-2 gap-2">
-                                        <h5 className="font-medium text-white">
-                                          {resource.name}
-                                        </h5>
-                                        {resource.url && (
-                                          <a
-                                            href={resource.url}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            className="text-alien-green hover:text-alien-green/80 transition-colors duration-200"
-                                          >
-                                            <ExternalLink size={16} />
-                                          </a>
-                                        )}
-                                      </div>
-                                      <p className="text-gray-400 text-sm mb-3">
-                                        {resource.description}
-                                      </p>
-                                      <div className="flex flex-wrap gap-2">
-                                        <span className="text-xs bg-smoke-light px-2 py-1 rounded text-gray-300">
-                                          {resource.type}
-                                        </span>
-                                        <span
-                                          className={`text-xs px-2 py-1 rounded ${getDifficultyColor(
-                                            resource.difficulty
-                                          )}`}
-                                        >
-                                          {resource.difficulty}
-                                        </span>
-                                        <span
-                                          className={`text-xs px-2 py-1 rounded ${getCostColor(
-                                            resource.cost
-                                          )}`}
-                                        >
-                                          {resource.cost}
-                                        </span>
-                                        <span className="text-xs bg-blue-400/20 text-blue-400 px-2 py-1 rounded">
-                                          ⏱️ {resource.estimated_time}
-                                        </span>
-                                      </div>
-                                    </div>
-                                  )
-                                )}
-                              </div>
-                            </div>
-                          </div>
-
-                          {/* Projects */}
-                          {stage.projects.length > 0 && (
-                            <div className="mt-6 sm:mt-8">
-                              <h4 className="text-base sm:text-lg font-semibold text-alien-green mb-3 sm:mb-4 flex items-center">
-                                <Zap className="mr-2" size={20} />
-                                Practice Projects
-                              </h4>
-                              <div className="grid md:grid-cols-2 gap-4">
-                                {stage.projects.map((project, projectIndex) => (
-                                  <div
-                                    key={projectIndex}
-                                    className="bg-smoke-gray/50 rounded-lg p-4"
-                                  >
-                                    <div className="flex items-start justify-between mb-2 gap-2">
-                                      <h5 className="font-medium text-white">
-                                        {project.name}
-                                      </h5>
-                                      <span
-                                        className={`text-xs px-2 py-1 rounded ${getDifficultyColor(
-                                          project.difficulty
-                                        )}`}
-                                      >
-                                        {project.difficulty}
-                                      </span>
-                                    </div>
-                                    <p className="text-gray-400 text-sm mb-3">
-                                      {project.description}
-                                    </p>
-
-                                    <div className="space-y-2 text-xs">
-                                      <div>
-                                        <span className="text-alien-green font-medium">
-                                          Learning Objectives:
-                                        </span>
-                                        <ul className="text-gray-400 mt-1 ml-4">
-                                          {project.learning_objectives.map(
-                                            (obj, i) => (
-                                              <li key={i} className="list-disc">
-                                                {obj}
-                                              </li>
-                                            )
-                                          )}
-                                        </ul>
-                                      </div>
-                                      <div>
-                                        <span className="text-alien-green font-medium">
-                                          Key Features:
-                                        </span>
-                                        <ul className="text-gray-400 mt-1 ml-4">
-                                          {project.features.map(
-                                            (feature, i) => (
-                                              <li key={i} className="list-disc">
-                                                {feature}
-                                              </li>
-                                            )
-                                          )}
-                                        </ul>
-                                      </div>
-                                    </div>
-
-                                    <div className="mt-3 pt-3 border-t border-smoke-light/30">
-                                      <span className="text-xs text-blue-400">
-                                        ⏱️ {project.estimated_time}
-                                      </span>
-                                    </div>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          )}
-
-                          {/* Best Practices */}
-                          {stage.best_practices.length > 0 && (
-                            <div className="mt-6 sm:mt-8">
-                              <h4 className="text-base sm:text-lg font-semibold text-alien-green mb-3 sm:mb-4 flex items-center">
-                                <CheckCircle className="mr-2" size={20} />
-                                Best Practices
-                              </h4>
-                              <div className="space-y-3">
-                                {stage.best_practices.map(
-                                  (practice, practiceIndex) => (
-                                    <div
-                                      key={practiceIndex}
-                                      className="bg-green-900/20 border border-green-500/30 rounded-lg p-4"
-                                    >
-                                      <h5 className="font-medium text-green-400 mb-2">
-                                        {practice.title}
-                                      </h5>
-                                      <p className="text-gray-300 text-sm mb-2">
-                                        {practice.description}
-                                      </p>
-                                      {practice.examples.length > 0 && (
-                                        <div className="text-xs text-gray-400">
-                                          <span className="font-medium">
-                                            Examples:
-                                          </span>
-                                          <ul className="mt-1 ml-4">
-                                            {practice.examples.map(
-                                              (example, i) => (
-                                                <li
-                                                  key={i}
-                                                  className="list-disc"
-                                                >
-                                                  {example}
-                                                </li>
-                                              )
-                                            )}
-                                          </ul>
-                                        </div>
-                                      )}
-                                    </div>
-                                  )
-                                )}
-                              </div>
-                            </div>
-                          )}
-
-                          {/* Common Pitfalls */}
-                          {stage.common_pitfalls.length > 0 && (
-                            <div className="mt-6 sm:mt-8">
-                              <h4 className="text-base sm:text-lg font-semibold text-alien-green mb-3 sm:mb-4 flex items-center">
-                                <AlertTriangle className="mr-2" size={20} />
-                                Common Pitfalls
-                              </h4>
-                              <div className="space-y-3">
-                                {stage.common_pitfalls.map(
-                                  (pitfall, pitfallIndex) => (
-                                    <div
-                                      key={pitfallIndex}
-                                      className="bg-red-900/20 border border-red-500/30 rounded-lg p-4"
-                                    >
-                                      <h5 className="font-medium text-red-400 mb-2">
-                                        ⚠️ {pitfall.issue}
-                                      </h5>
-                                      <p className="text-gray-300 text-sm">
-                                        <span className="text-green-400 font-medium">
-                                          Solution:
-                                        </span>{" "}
-                                        {pitfall.solution}
-                                      </p>
-                                    </div>
-                                  )
-                                )}
-                              </div>
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {/* Tools Tab */}
-              {activeTab === "tools" && (
-                <div className="grid md:grid-cols-2 gap-6">
-                  {roadmapContent.tools.map((tool, index) => (
-                    <div
-                      key={index}
-                      className="bg-royal-black/50 rounded-lg p-6 border border-smoke-light"
-                    >
-                      <div className="flex items-start justify-between mb-4 gap-2">
-                        <div className="min-w-0">
-                          <h3 className="text-base sm:text-lg font-semibold text-white mb-1 truncat">
-                            {tool.name}
-                          </h3>
-                          <span className="text-sm text-alien-green">
-                            {tool.category}
-                          </span>
-                        </div>
-                        {tool.url && (
-                          <a
-                            href={tool.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-alien-green hover:text-alien-green/80 transition-colors duration-200"
-                          >
-                            <ExternalLink size={20} />
-                          </a>
-                        )}
-                      </div>
-
-                      <p className="text-gray-400 text-sm mb-4">
-                        {tool.description}
-                      </p>
-
-                      <div className="space-y-3 text-sm">
-                        <div>
-                          <span className="text-green-400 font-medium">
-                            Pros:
-                          </span>
-                          <ul className="text-gray-400 mt-1 ml-4">
-                            {tool.pros.map((pro, i) => (
-                              <li key={i} className="list-disc">
-                                {pro}
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-
-                        <div>
-                          <span className="text-red-400 font-medium">
-                            Cons:
-                          </span>
-                          <ul className="text-gray-400 mt-1 ml-4">
-                            {tool.cons.map((con, i) => (
-                              <li key={i} className="list-disc">
-                                {con}
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-
-                        {tool.alternatives.length > 0 && (
-                          <div>
-                            <span className="text-blue-400 font-medium">
-                              Alternatives:
-                            </span>
-                            <p className="text-gray-400 mt-1">
-                              {tool.alternatives.join(", ")}
-                            </p>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {/* Certifications Tab */}
-              {activeTab === "certifications" && (
-                <div className="grid md:grid-cols-2 gap-6">
-                  {roadmapContent.certifications.map((cert, index) => (
-                    <div
-                      key={index}
-                      className="bg-royal-black/50 rounded-lg p-6 border border-smoke-light"
-                    >
-                      <div className="flex items-start justify-between mb-4 gap-2">
-                        <div className="min-w-0">
-                          <h3 className="text-base sm:text-lg font-semibold text-white mb-1 ">
-                            {cert.name}
-                          </h3>
-                          <div className="flex items-center gap-2">
-                            <span className="text-sm text-gray-400">
-                              {cert.provider}
-                            </span>
-                            <span
-                              className={`text-xs px-2 py-1 rounded ${getDifficultyColor(
-                                cert.level
-                              )}`}
-                            >
-                              {cert.level}
-                            </span>
-                          </div>
-                        </div>
-                        {cert.url && (
-                          <a
-                            href={cert.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-alien-green hover:text-alien-green/80 transition-colors duration-200"
-                          >
-                            <ExternalLink size={20} />
-                          </a>
-                        )}
-                      </div>
-
-                      <p className="text-gray-400 text-sm mb-4">
-                        {cert.description}
-                      </p>
-
-                      <div className="space-y-2 text-sm">
-                        <div className="flex items-center justify-between">
-                          <span className="text-gray-400">Cost:</span>
-                          <span className="text-white font-medium">
-                            {cert.cost}
-                          </span>
-                        </div>
-                        <div className="flex items-center justify-between">
-                          <span className="text-gray-400">Validity:</span>
-                          <span className="text-white font-medium">
-                            {cert.validity}
-                          </span>
-                        </div>
-                      </div>
-
-                      {cert.preparation_resources.length > 0 && (
-                        <div className="mt-4 pt-4 border-t border-smoke-light/30">
-                          <span className="text-alien-green font-medium text-sm">
-                            Preparation Resources:
-                          </span>
-                          <ul className="text-gray-400 text-xs mt-2 ml-4">
-                            {cert.preparation_resources.map((resource, i) => (
-                              <li key={i} className="list-disc">
-                                {resource}
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {/* Career Path Tab */}
-              {activeTab === "career" && (
-                <div className="space-y-8">
-                  <div className="grid md:grid-cols-2 gap-8">
-                    <div className="bg-royal-black/50 rounded-lg p-6 border border-smoke-light">
-                      <h3 className="text-lg font-semibold text-alien-green mb-4 flex items-center">
-                        <TrendingUp className="mr-2" size={20} />
-                        Career Roles
-                      </h3>
-                      <div className="space-y-2">
-                        {roadmapContent.career_path.roles.map((role, index) => (
-                          <div key={index} className="flex items-center gap-2">
-                            <Star className="text-yellow-400" size={16} />
-                            <span className="text-white">{role}</span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    <div className="bg-royal-black/50 rounded-lg p-6 border border-smoke-light">
-                      <h3 className="text-lg font-semibold text-alien-green mb-4 flex items-center">
-                        <DollarSign className="mr-2" size={20} />
-                        Salary Range
-                      </h3>
-                      <p className="text-white text-xl font-bold">
-                        {roadmapContent.career_path.salary_range}
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="bg-royal-black/50 rounded-lg p-6 border border-smoke-light">
-                    <h3 className="text-lg font-semibold text-alien-green mb-4 flex items-center">
-                      <Target className="mr-2" size={20} />
-                      Required Skills
-                    </h3>
-                    <div className="grid md:grid-cols-2 gap-4">
-                      {roadmapContent.career_path.skills_required.map(
-                        (skill, index) => (
-                          <div key={index} className="flex items-center gap-2">
-                            <CheckCircle className="text-green-400" size={16} />
-                            <span className="text-gray-300">{skill}</span>
-                          </div>
-                        )
-                      )}
-                    </div>
-                  </div>
-
-                  <div className="bg-royal-black/50 rounded-lg p-6 border border-smoke-light">
-                    <h3 className="text-lg font-semibold text-alien-green mb-4 flex items-center">
-                      <Calendar className="mr-2" size={20} />
-                      Career Progression
-                    </h3>
-                    <div className="space-y-3">
-                      {roadmapContent.career_path.progression.map(
-                        (step, index) => (
-                          <div key={index} className="flex items-start gap-3">
-                            <div className="flex items-center justify-center w-6 h-6 bg-alien-green text-royal-black rounded-full font-bold text-xs mt-1 shrink-0">
-                              {index + 1}
-                            </div>
-                            <span className="text-gray-300">{step}</span>
-                          </div>
-                        )
-                      )}
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
+              );
+            })}
           </div>
+
         </div>
       </div>
     </>
diff --git a/client/src/components/ui/Icons.tsx b/client/src/components/ui/Icons.tsx
index 567aae3..54461d8 100644
--- a/client/src/components/ui/Icons.tsx
+++ b/client/src/components/ui/Icons.tsx
@@ -1,12 +1,12 @@
 // Custom social media icons
 export const XIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width={15} height={15} viewBox="0 0 300 300" aria-hidden="true" fill="#ffffff">
-        <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
-    </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={15} height={15} viewBox="0 0 300 300" aria-hidden="true" fill="#ffffff">
+    <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
+  </svg>
 );
 
 export const LinkedinIcon = () => (
-    <svg width={20} height={20} fill="#0072B1" viewBox="0 0 400 400" aria-hidden="true">
-        <path d="M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472L341.91,330.654L341.91,330.654z" />
-    </svg>
+  <svg width={20} height={20} fill="#0072B1" viewBox="0 0 400 400" aria-hidden="true">
+    <path d="M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472L341.91,330.654L341.91,330.654z" />
+  </svg>
 );
diff --git a/client/src/components/ui/ScrollToTop.tsx b/client/src/components/ui/ScrollToTop.tsx
index 196b80f..64af8b1 100644
--- a/client/src/components/ui/ScrollToTop.tsx
+++ b/client/src/components/ui/ScrollToTop.tsx
@@ -42,7 +42,7 @@ const ScrollToTop: React.FC = () => {
             <div className="absolute inset-0 bg-alien-green rounded-full opacity-20 animate-pulse scale-110"></div>
 
             {/* Main button */}
-            <div className="relative w-12 h-12 bg-smoke-gray border-2 border-alien-green rounded-full flex items-center justify-center shadow-alien-glow hover:shadow-alien-glow-strong transition-all duration-300 hover:scale-110 hover:bg-alien-green/10">
+            <div className="relative w-12 h-12 bg-moss-accent hover:bg-olive-primary cursor-pointer border-2 border-alien-green rounded-full flex items-center justify-center shadow-alien-glow hover:shadow-alien-glow-strong transition-all duration-300 hover:scale-110 hover:bg-alien-green/10">
               {/* Icon container with animation */}
               <div className="relative">
                 <ChevronUp
diff --git a/client/src/components/ui/TestTimeRemaining.tsx b/client/src/components/ui/TestTimeRemaining.tsx
index 7338d93..e8904bb 100644
--- a/client/src/components/ui/TestTimeRemaining.tsx
+++ b/client/src/components/ui/TestTimeRemaining.tsx
@@ -64,4 +64,4 @@ const TestTimeRemaining : React.FC<{
   );
 };
 
-export default TestTimeRemaining ;
\ No newline at end of file
+export default TestTimeRemaining;
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index daf2297..5df13f8 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,7 +1,37 @@
-@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import "tailwindcss";
 
 @theme {
+  /* Core brand roles */
+  --color-olive-main: #2C4A2B;         /* portfolioMain / 1000 */
+  --color-olive-primary: #335441;     /* portfolioPrimary / 900 */
+  --color-moss-accent: #46704A;       /* portfolioAccent / 700 */
+  --color-matcha-primary: #8FAF5B;      /* portfolio / 600 */
+  --color-matcha-muted: #A9B782;      /* portfolioMuted / 500 */
+
+  /* Light backgrounds */
+  --color-beige-cream: #F9F6EE;       /* 50 */
+  --color-beige-warm: #EFE7D4;        /* 100 */
+  --color-beige-soft: #E4D7B4;        /* 200 */
+  --color-beige-olive: #CCBF9D;       /* 300 */
+
+  /* Highlight tone */
+  --color-olive-gold: #DEAE48;        /* 400 */
+  --color-olive-yellow: #E6BC5C;      /* 500 */
+  --color-olive-amber: #F0CA70;       /* 600 */
+
+  /* Mid greens */
+  --color-sage-green: #6B8F60;        /* 600 */
+
+  /* Dark greens */
+  --color-olive-forest: #3C6040;      /* 800 */
+
+  /* Explicit duplicates kept for clarity */
+  --color-olive-primary-alt: #335441; /* portfolioPrimary900 */
+  --color-moss-accent-alt: #46704A;   /* portfolioPrimary700 */
+  --color-matcha-muted-alt: #A9B782;  /* portfolioPrimary500 */
+  
+  /* Additional colors */
   --color-royal-black: #0a0a0a;
   --color-alien-green: #00cc33;
   --color-alien-green-dark: #00cc33;
@@ -19,38 +49,29 @@
   /* --animate-glow: glow 2s ease-in-out infinite alternate; */
 }
 
+/* ---------- Animations ---------- */
 @keyframes pulse-alien {
   0%,
   100% {
     opacity: 1;
-    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
+    box-shadow: 0 0 16px rgba(90, 91, 90, 0.25);
   }
   50% {
-    opacity: 0.8;
-    box-shadow: 0 0 30px rgba(0, 255, 65, 0.6);
+    opacity: 0.85;
+    box-shadow: 0 0 24px rgba(107, 142, 35, 0.45);
   }
 }
 
 @keyframes glow {
   from {
-    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
+    text-shadow: 0 0 8px rgba(107, 142, 35, 0.4);
   }
   to {
-    text-shadow: 0 0 20px rgba(0, 255, 65, 0.8), 0 0 30px rgba(0, 255, 65, 0.6);
+    text-shadow: 0 0 16px rgba(107, 142, 35, 0.6);
   }
 }
 
-@keyframes float {
-  0%,
-  100% {
-    transform: translateY(0px) rotate(0deg);
-  }
-  50% {
-    transform: translateY(-10px) rotate(180deg);
-  }
-}
-
-/* Markdown styles for chat messages */
+/* ---------- Prose / Markdown ---------- */
 .prose-chat {
   color: #d1d5db;
 }
@@ -59,283 +80,94 @@
 .prose-chat h2,
 .prose-chat h3 {
   color: #ffffff;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.prose-chat p {
-  margin-bottom: 0.5rem;
-  line-height: 1.5;
 }
 
 .prose-chat code {
   background-color: #1a1a1a;
-  color: #00cc33;
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-  font-size: 0.875rem;
-}
-
-.prose-chat pre {
-  background-color: #1a1a1a;
-  padding: 0.75rem;
-  border-radius: 0.5rem;
-  margin: 0.5rem 0;
-  overflow-x: auto;
-}
-
-.prose-chat pre code {
-  background-color: transparent;
-  padding: 0;
-}
-
-.prose-chat strong {
-  color: #ffffff;
-  font-weight: 600;
-}
-
-.prose-chat ul,
-.prose-chat ol {
-  margin: 0.5rem 0;
-  padding-left: 1rem;
+  color: var(--color-olive-primary);
 }
 
-.prose-chat li {
-  margin-bottom: 0.25rem;
-}
-
-/* Line clamp utilities */
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* Prose styles for markdown content */
 .prose {
   color: #e5e7eb;
-  max-width: none;
-}
-
-.prose h1,
-.prose h2,
-.prose h3,
-.prose h4,
-.prose h5,
-.prose h6 {
-  color: #ffffff;
-  font-weight: 600;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
 }
 
 .prose h2 {
-  font-size: 1.5em;
   border-bottom: 1px solid #2a2a2a;
-  padding-bottom: 0.5em;
-}
-
-.prose h3 {
-  font-size: 1.25em;
-}
-
-.prose p {
-  margin-bottom: 1em;
-  line-height: 1.6;
-}
-
-.prose ul,
-.prose ol {
-  margin-bottom: 1em;
-  padding-left: 1.5em;
-}
-
-.prose li {
-  margin-bottom: 0.5em;
 }
 
 .prose code {
   background-color: #1a1a1a;
-  color: #00cc33;
-  padding: 0.2em 0.4em;
-  border-radius: 0.25em;
-  font-size: 0.875em;
-}
-
-.prose pre {
-  background-color: #0a0a0a;
-  color: #e5e7eb;
-  padding: 1em;
-  border-radius: 0.5em;
-  overflow-x: auto;
-  margin: 1em 0;
-  border: 1px solid #2a2a2a;
-}
-
-.prose pre code {
-  background-color: transparent;
-  color: inherit;
-  padding: 0;
+  color: var(--color-olive-primary);
 }
 
 .prose blockquote {
-  border-left: 4px solid #00cc33;
-  padding-left: 1em;
-  margin: 1em 0;
-  font-style: italic;
-  color: #d1d5db;
-}
-
-.prose strong {
-  color: #ffffff;
-  font-weight: 600;
-}
-
-.prose em {
-  font-style: italic;
+  border-left: 4px solid var(--color-olive-primary);
 }
 
 .prose a {
-  color: #00cc33;
-  text-decoration: underline;
+  color: var(--color-olive-primary);
 }
 
-.prose a:hover {
-  color: #00cc33;
+.paragraph {
+  color: var(--color-matcha-primary);
 }
 
+/* ---------- Base ---------- */
 @layer base {
-  * {
-    border-color: rgb(31 41 55);
-  }
-
   body {
-    background-color: var(--color-royal-black);
+    background-color: var(--color-beige-cream);
     color: white;
     font-family: var(--font-family-cyber);
     overflow-x: hidden;
     background-image: radial-gradient(
         circle at 20% 80%,
-        rgba(0, 255, 65, 0.1) 0%,
+        rgba(107, 142, 35, 0.08) 0%,
         transparent 50%
       ),
       radial-gradient(
         circle at 80% 20%,
-        rgba(0, 255, 65, 0.05) 0%,
+        rgba(107, 142, 35, 0.05) 0%,
         transparent 50%
-      ),
-      radial-gradient(circle at 40% 40%, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
+      );
     background-attachment: fixed;
   }
 
-  html {
-    scroll-behavior: smooth;
-  }
-
-  /* Ensure smooth scrolling for all elements */
-  * {
-    scroll-behavior: smooth;
-  }
-
-  /* Custom scrollbar */
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--color-smoke-gray);
-  }
-
   ::-webkit-scrollbar-thumb {
-    background: var(--color-alien-green);
-    border-radius: 4px;
+    background: var(--color-olive-primary);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--color-alien-green-dark);
+    background: var(--color-olive-forest);
   }
 }
 
+/* ---------- Components ---------- */
 @layer components {
   .smoke-card {
     background-color: var(--color-smoke-gray);
-    border: 1px solid var(--color-smoke-light);
+    border: 1px solid var(--color-smoke-dark);
     border-radius: 0.5rem;
-    box-shadow: var(--shadow-smoke);
-    background-image: radial-gradient(
-        circle at 10% 20%,
-        rgba(255, 255, 255, 0.02) 0%,
-        transparent 50%
-      ),
-      radial-gradient(
-        circle at 90% 80%,
-        rgba(0, 255, 65, 0.03) 0%,
-        transparent 50%
-      );
   }
 
   .alien-button {
-    background-color: var(--color-alien-green);
+    background-color: var(--color-olive-primary);
     color: var(--color-royal-black);
     font-weight: 700;
-    padding: 0.5rem 1.5rem;
     border-radius: 0.5rem;
     transition: all 0.3s;
-    box-shadow: var(--shadow-alien-glow);
   }
 
   .alien-button:hover {
-    background-color: var(--color-alien-green-dark);
-    box-shadow: var(--shadow-alien-glow-strong);
-  }
-
-  .alien-input {
-    background-color: var(--color-smoke-gray);
-    border: 1px solid var(--color-smoke-light);
-    border-radius: 0.5rem;
-    padding: 0.5rem 1rem;
-    color: white;
-    transition: all 0.3s;
-  }
-
-  .alien-input::placeholder {
-    color: rgb(156 163 175);
+    background-color: var(--color-olive-main);
+    color: var(--color-olive-amber);
   }
 
   .alien-input:focus {
-    border-color: var(--color-alien-green);
-    outline: none;
-    box-shadow: var(--shadow-alien-glow);
+    border-color: var(--color-olive-primary);
   }
 
   .glow-text {
-    color: var(--color-alien-green);
-    animation: var(--animate-glow);
-    font-family: var(--font-family-alien);
+    color: var(--color-olive-primary);
+    animation: glow 2s ease-in-out infinite alternate;
   }
 }
-
-/* .smoke-effect::before {
-  content: "";
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(
-    circle,
-    rgba(255, 255, 255, 0.01) 0%,
-    transparent 70%
-  );
-  opacity: 0.5;
-  pointer-events: none;
-  animation: float 6s ease-in-out infinite;
-} */
diff --git a/client/src/pages/CertificateVerificationPage.tsx b/client/src/pages/CertificateVerificationPage.tsx
index e587cd3..78e698d 100644
--- a/client/src/pages/CertificateVerificationPage.tsx
+++ b/client/src/pages/CertificateVerificationPage.tsx
@@ -153,6 +153,29 @@ const CertificateVerificationPage: React.FC = () => {
 
   const { certificateDetails } = verificationData;
 
+  const detailsToShow = [
+    {
+      label: "Student Name",
+      value: certificateDetails?.studentName,
+      valueClass: "text-white font-semibold",
+    },
+    {
+      label: "Course Name",
+      value: certificateDetails?.courseName,
+      valueClass: "text-white font-semibold",
+    },
+    {
+      label: "Instructor",
+      value: certificateDetails?.instructorName,
+      valueClass: "text-white",
+    },
+    {
+      label: "Completion Date",
+      value: certificateDetails?.completionDate,
+      valueClass: "text-white",
+    },
+  ];
+
   return (
     <div className="min-h-screen py-8">
       <div className="max-w-4xl mx-auto px-4">
@@ -190,41 +213,14 @@ const CertificateVerificationPage: React.FC = () => {
 
             <div className="grid md:grid-cols-2 gap-6">
               <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-400 mb-1">
-                    Student Name
-                  </label>
-                  <p className="text-white font-semibold">
-                    {certificateDetails.studentName}
-                  </p>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-400 mb-1">
-                    Course Name
-                  </label>
-                  <p className="text-white font-semibold">
-                    {certificateDetails.courseName}
-                  </p>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-400 mb-1">
-                    Instructor
-                  </label>
-                  <p className="text-white">
-                    {certificateDetails.instructorName}
-                  </p>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-400 mb-1">
-                    Completion Date
-                  </label>
-                  <p className="text-white">
-                    {certificateDetails.completionDate}
-                  </p>
-                </div>
+                {detailsToShow.map(({ label, value, valueClass }) => (
+                  <div key={label}>
+                    <label className="block text-sm font-medium text-gray-400 mb-1">
+                      {label}
+                    </label>
+                    <p className={valueClass}>{value}</p>
+                  </div>
+                ))}
               </div>
 
               <div className="space-y-4">
@@ -234,11 +230,11 @@ const CertificateVerificationPage: React.FC = () => {
                   </label>
                   <div className="flex items-center space-x-2">
                     <div className="text-2xl font-bold text-green-500">
-                      {certificateDetails.score}%
+                      {certificateDetails?.score}%
                     </div>
                     <div className="text-gray-400">
-                      ({certificateDetails.marksObtained}/
-                      {certificateDetails.totalMarks} marks)
+                      ({certificateDetails?.marksObtained}/
+                      {certificateDetails?.totalMarks} marks)
                     </div>
                   </div>
                 </div>
@@ -248,7 +244,7 @@ const CertificateVerificationPage: React.FC = () => {
                     Certificate ID
                   </label>
                   <p className="text-white font-mono text-sm bg-gray-700 p-2 rounded">
-                    {certificateDetails.certificateId}
+                    {certificateDetails?.certificateId}
                   </p>
                 </div>
 
@@ -256,7 +252,7 @@ const CertificateVerificationPage: React.FC = () => {
                   <label className="block text-sm font-medium text-gray-400 mb-1">
                     Issue Date
                   </label>
-                  <p className="text-white">{certificateDetails.issueDate}</p>
+                  <p className="text-white">{certificateDetails?.issueDate}</p>
                 </div>
 
                 <div className="flex items-center space-x-2 text-green-500">