diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 789d00d2..363e4a51 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -54,6 +54,37 @@ type SignUpData = {
   agreeTerms: boolean;
 };
 
+const LoadingScreen = (): JSX.Element => (
+  <div className="flex h-screen items-center justify-center bg-slate-900">
+    <div className="text-center">
+      <div className="animate-spin">
+        <svg
+          className="h-8 w-8 text-blue-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      </div>
+      <p className="mt-4 text-slate-400">Loading...</p>
+    </div>
+  </div>
+);
+
 // Protected Route Component
 const ProtectedRoute: React.FC<RouteWrapperProps> = ({ children }) => {
   const navigate = useNavigate();
@@ -66,35 +97,7 @@ const ProtectedRoute: React.FC<RouteWrapperProps> = ({ children }) => {
   }, [isAuthenticated, isLoading, navigate]);
 
   if (isLoading) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-slate-900">
-        <div className="text-center">
-          <div className="animate-spin">
-            <svg
-              className="w-8 h-8 text-blue-500"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-          </div>
-          <p className="mt-4 text-slate-400">Loading...</p>
-        </div>
-      </div>
-    );
+    return <LoadingScreen />;
   }
 
   return isAuthenticated ? <>{children}</> : null;
@@ -107,45 +110,19 @@ const AdminRoute: React.FC<RouteWrapperProps> = ({ children }) => {
 
   useEffect(() => {
     if (isLoading) return;
+
     if (!isAuthenticated) {
       navigate("/login");
       return;
     }
+
     if ((user as { role?: string } | null | undefined)?.role !== "admin") {
       navigate("/dashboard");
     }
   }, [isAuthenticated, isLoading, navigate, user]);
 
   if (isLoading) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-slate-900">
-        <div className="text-center">
-          <div className="animate-spin">
-            <svg
-              className="w-8 h-8 text-blue-500"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-          </div>
-          <p className="mt-4 text-slate-400">Loading...</p>
-        </div>
-      </div>
-    );
+    return <LoadingScreen />;
   }
 
   return isAuthenticated &&
@@ -154,7 +131,7 @@ const AdminRoute: React.FC<RouteWrapperProps> = ({ children }) => {
   ) : null;
 };
 
-// Dashboard Layout Component (with sidebar)
+// Dashboard Layout Component with sidebar
 const DashboardLayout: React.FC<DashboardLayoutProps> = ({
   children,
   sidebarWidth,
@@ -174,12 +151,19 @@ function App(): JSX.Element {
   const location = useLocation();
   const navigate = useNavigate();
 
+  const showPublicEnhancements = ["/", "/about", "/contact"].includes(
+    location.pathname,
+  );
+
   // Dashboard state
   const getInitialSidebarWidth = (): number => {
     if (typeof window === "undefined") return 220;
+
     try {
       const stored = window.localStorage.getItem("sidebarExpanded");
+
       if (stored === null) return 220;
+
       return stored === "true" ? 220 : 80;
     } catch {
       return 220;
@@ -193,18 +177,24 @@ function App(): JSX.Element {
 
   // Theme management
   useEffect(() => {
-    localStorage.setItem('theme', 'dark');
-    setIsDarkMode(true);
+    const theme = localStorage.getItem("theme") ?? "dark";
+    const dark = theme === "dark";
+
+    setIsDarkMode(dark);
 
     const root = document.documentElement;
-    root.classList.remove('light');
+
+    if (dark) {
+      root.classList.remove("light");
+    } else {
+      root.classList.add("light");
+    }
   }, []);
 
-  // Scroll restoration:
-  // - On route changes without hash, go to top.
-  // - Keep hash-based anchor behavior (e.g. /#features) intact.
+  // Scroll restoration
   useEffect(() => {
     if (location.hash) return;
+
     window.scrollTo({ top: 0, left: 0, behavior: "auto" });
   }, [location.pathname, location.hash]);
 
@@ -243,18 +233,20 @@ function App(): JSX.Element {
     navigate("/dashboard");
   };
 
-  // const handleThemeToggle = (): void => {
-  //   const newThemeIsDark = !isDarkMode;
-  //   setIsDarkMode(newThemeIsDark);
-  //   localStorage.setItem('theme', newThemeIsDark ? 'dark' : 'light');
+  const handleThemeToggle = (): void => {
+    const newThemeIsDark = !isDarkMode;
 
-  //   const root = document.documentElement;
-  //   if (newThemeIsDark) {
-  //     root.classList.remove('light');
-  //   } else {
-  //     root.classList.add('light');
-  //   }
-  // };
+    setIsDarkMode(newThemeIsDark);
+    localStorage.setItem("theme", newThemeIsDark ? "dark" : "light");
+
+    const root = document.documentElement;
+
+    if (newThemeIsDark) {
+      root.classList.remove("light");
+    } else {
+      root.classList.add("light");
+    }
+  };
 
   const handleSidebarWidthChange = (width: number): void => {
     setSidebarWidth(width);
@@ -418,14 +410,142 @@ function App(): JSX.Element {
 
         <Route path="/styleguide" element={<StyleGuide />} />
 
-        {/* Fallback route */}
+        {/* Fallback Route */}
         <Route
           path="*"
           element={<LandingPage onSignInClick={() => navigate("/login")} />}
         />
       </Routes>
+
+      {showPublicEnhancements && (
+        <>
+          <section className="w-full bg-gradient-to-b from-surface-1 to-surface-2 px-6 py-16 text-text-strong">
+            <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[1.1fr_1.9fr] lg:items-center">
+              <div>
+                <span className="inline-flex rounded-full border border-accent-teal/20 bg-accent-teal/10 px-3 py-2 text-xs font-bold uppercase tracking-wide text-accent-teal">
+                  Audit Readiness
+                </span>
+
+                <h2 className="mt-4 max-w-2xl text-3xl font-bold leading-tight md:text-4xl">
+                  Built to support faster compliance preparation
+                </h2>
+
+                <p className="mt-4 max-w-2xl text-sm leading-7 text-text-muted md:text-base">
+                  AutoAudit brings evidence review, cloud visibility, and audit
+                  tracking into one streamlined workflow, helping teams stay
+                  prepared before compliance reviews begin.
+                </p>
+              </div>
+
+              <div className="grid gap-5 md:grid-cols-3">
+                <article className="min-h-40 rounded-2xl border border-text-muted/20 bg-surface-1/60 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
+                  <h3 className="text-base font-bold text-text-strong">
+                    Evidence Visibility
+                  </h3>
+                  <p className="mt-3 text-sm leading-6 text-text-muted">
+                    Organise and review audit evidence across connected systems.
+                  </p>
+                </article>
+
+                <article className="min-h-40 rounded-2xl border border-text-muted/20 bg-surface-1/60 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
+                  <h3 className="text-base font-bold text-text-strong">
+                    Risk Awareness
+                  </h3>
+                  <p className="mt-3 text-sm leading-6 text-text-muted">
+                    Highlight compliance gaps early so teams can respond before
+                    audit deadlines.
+                  </p>
+                </article>
+
+                <article className="min-h-40 rounded-2xl border border-text-muted/20 bg-surface-1/60 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
+                  <h3 className="text-base font-bold text-text-strong">
+                    Workflow Clarity
+                  </h3>
+                  <p className="mt-3 text-sm leading-6 text-text-muted">
+                    Keep compliance tasks clear, trackable, and easier to manage.
+                  </p>
+                </article>
+              </div>
+            </div>
+          </section>
+
+          <section className="w-full bg-surface-1 px-6 py-16 text-text-strong">
+            <div className="mx-auto max-w-7xl">
+              <div className="mb-9 max-w-3xl">
+                <span className="inline-flex rounded-full border border-accent-teal/20 bg-accent-teal/10 px-3 py-2 text-xs font-bold uppercase tracking-wide text-accent-teal">
+                  Platform Value
+                </span>
+
+                <h2 className="mt-4 text-3xl font-bold leading-tight md:text-4xl">
+                  Designed for clear, secure, and reliable audit workflows
+                </h2>
+
+                <p className="mt-4 text-sm leading-7 text-text-muted md:text-base">
+                  The public interface now communicates AutoAudit’s value more
+                  clearly by highlighting usability, consistency, compliance
+                  focus, and responsive access across different screen sizes.
+                </p>
+              </div>
+
+              <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
+                <article className="rounded-2xl border border-text-muted/20 bg-surface-2/70 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
+                  <span className="text-xs font-extrabold uppercase tracking-wide text-accent-teal">
+                    01
+                  </span>
+                  <h3 className="mt-4 text-base font-bold text-text-strong">
+                    Clear Navigation
+                  </h3>
+                  <p className="mt-3 text-sm leading-6 text-text-muted">
+                    Supports users in understanding audit-related features with
+                    less friction.
+                  </p>
+                </article>
+
+                <article className="rounded-2xl border border-text-muted/20 bg-surface-2/70 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
+                  <span className="text-xs font-extrabold uppercase tracking-wide text-accent-teal">
+                    02
+                  </span>
+                  <h3 className="mt-4 text-base font-bold text-text-strong">
+                    Consistent Interface
+                  </h3>
+                  <p className="mt-3 text-sm leading-6 text-text-muted">
+                    Strengthens the visual structure of public-facing product
+                    sections.
+                  </p>
+                </article>
+
+                <article className="rounded-2xl border border-text-muted/20 bg-surface-2/70 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
+                  <span className="text-xs font-extrabold uppercase tracking-wide text-accent-teal">
+                    03
+                  </span>
+                  <h3 className="mt-4 text-base font-bold text-text-strong">
+                    Compliance Focus
+                  </h3>
+                  <p className="mt-3 text-sm leading-6 text-text-muted">
+                    Highlights evidence, risk, and governance workflows in a
+                    professional way.
+                  </p>
+                </article>
+
+                <article className="rounded-2xl border border-text-muted/20 bg-surface-2/70 p-6 shadow-lg transition hover:-translate-y-1 hover:border-accent-teal/30 hover:shadow-xl">
+                  <span className="text-xs font-extrabold uppercase tracking-wide text-accent-teal">
+                    04
+                  </span>
+                  <h3 className="mt-4 text-base font-bold text-text-strong">
+                    Responsive Layout
+                  </h3>
+                  <p className="mt-3 text-sm leading-6 text-text-muted">
+                    Improves the presentation across desktop, tablet, and mobile
+                    screens using Tailwind utility classes.
+                  </p>
+                </article>
+              </div>
+            </div>
+          </section>
+        </>
+      )}
     </div>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 02adf836..6c8d1f71 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -35,10 +35,12 @@
   --landing-bg-alt-mid: 26 58 79;
   --landing-bg-alt-end: 42 74 95;
 
-  /* Spacing & Radius */
+  /* Spacing, Radius & Shadow */
   --radius-1: 8px;
   --radius-2: 12px;
   --radius-3: 16px;
+  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.2);
+  --shadow-2: 0 10px 25px rgba(0, 0, 0, 0.3);
 
   /* Fonts */
   --font-header: "League Spartan", ui-sans-serif, system-ui, "Segoe UI",
@@ -129,7 +131,8 @@
     outline-offset: 2px;
   }
 
-  a, button {
+  a,
+  button {
     @apply cursor-pointer;
   }
 
@@ -162,7 +165,7 @@
   }
 
   .stat-label {
-    @apply mb-1 font-medium text-sm;
+    @apply mb-1 text-sm font-medium;
     color: rgb(var(--text-muted));
   }
 
@@ -222,6 +225,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }