diff --git a/.gitignore b/.gitignore
index 93bdc13..ef5d71d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -81,6 +81,7 @@ out
 # Nuxt.js build / generate output
 .nuxt
 dist
+next-env.d.ts
 
 # Gatsby files
 .cache/
diff --git a/app/globals.css b/app/globals.css
index 65ff396..794cfbc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -74,16 +74,16 @@ body::after {
 
 body::before {
   background-image:
-    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08), transparent 35%),
-    radial-gradient(circle at 80% 0%, rgba(168, 85, 247, 0.08), transparent 30%),
+    radial-gradient(circle at 20% 20%, hsl(var(--primary) / 0.08), transparent 35%),
+    radial-gradient(circle at 80% 0%, hsl(var(--accent) / 0.08), transparent 30%),
     linear-gradient(180deg, #f8fbff 0%, #f2f5f9 40%, #f9fafb 100%);
   opacity: 1;
 }
 
 body::after {
   background-image:
-    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08), transparent 35%),
-    radial-gradient(circle at 80% 0%, rgba(124, 58, 237, 0.12), transparent 30%),
+    radial-gradient(circle at 20% 20%, hsl(var(--primary) / 0.08), transparent 35%),
+    radial-gradient(circle at 80% 0%, hsl(var(--accent) / 0.12), transparent 30%),
     linear-gradient(180deg, #0f172a 0%, #0b1221 40%, #0a0f1c 100%);
   opacity: 0;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index cf1565a..5865918 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,6 @@ import "./globals.css";
 import type { ReactNode } from "react";
 import type { Metadata } from "next";
 import { cookies, headers } from "next/headers";
-import Script from "next/script";
 import {
   DEFAULT_LOCALE,
   LOCALE_COOKIE,
@@ -112,10 +111,13 @@ export default async function RootLayout({ children }: { children: ReactNode })
 
   return (
     <html lang={initialLocale} dir={dir} suppressHydrationWarning>
+      <head>
+        <script
+          id="theme-init"
+          dangerouslySetInnerHTML={{ __html: themeInitScript }}
+        />
+      </head>
       <body>
-        <Script id="theme-init" strategy="beforeInteractive">
-          {themeInitScript}
-        </Script>
         <Providers initialLocale={initialLocale}>{children}</Providers>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 7c58084..c3a57fe 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,9 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
-import { DashboardSkeleton } from "@/components/skeletons";
+import { AppFooter } from "@/components/app-footer";
+import { AppHeader } from "@/components/app-header";
 import { HomePageClient } from "@/components/home-page-client";
+import { Skeleton } from "@/components/ui/skeleton";
 import { JsonLd } from "@/components/seo/json-ld";
 import { toAbsoluteUrl } from "@/lib/seo";
 
@@ -63,11 +65,65 @@ const softwareSchema = {
   },
 };
 
+function HomePageFallback() {
+  return (
+    <main className="flex min-h-screen flex-col">
+      <AppHeader />
+
+      <div className="w-full flex-1 max-w-6xl mx-auto px-4 py-10 space-y-6">
+        <div className="rounded-2xl border border-border bg-card/90 p-6 shadow-lg backdrop-blur">
+          <div className="space-y-4 pb-4">
+            <Skeleton className="h-3 w-32 rounded-full" />
+            <Skeleton className="h-8 w-64 rounded-lg" />
+            <Skeleton className="h-4 w-full max-w-md rounded-lg" />
+          </div>
+
+          <div className="space-y-5">
+            <div className="grid gap-3 md:grid-cols-2">
+              <div className="space-y-1.5">
+                <Skeleton className="h-3 w-24 rounded-full" />
+                <Skeleton className="h-11 rounded-lg" />
+              </div>
+              <div className="space-y-1.5">
+                <Skeleton className="h-3 w-24 rounded-full" />
+                <Skeleton className="h-11 rounded-lg" />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-36 rounded-full" />
+              <div className="flex flex-wrap gap-2">
+                {Array.from({ length: 8 }).map((_, index) => (
+                  <Skeleton key={index} className="h-7 w-20 rounded-full" />
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Skeleton className="h-10 w-40 rounded-lg" />
+              <Skeleton className="h-10 w-10 rounded-lg" />
+              <Skeleton className="h-10 w-10 rounded-lg" />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center justify-center gap-4 py-20 text-center">
+          <Skeleton className="h-24 w-24 rounded-full sm:h-32 sm:w-32" />
+          <Skeleton className="h-6 w-64 rounded-lg" />
+          <Skeleton className="h-4 w-72 rounded-lg" />
+        </div>
+      </div>
+
+      <AppFooter />
+    </main>
+  );
+}
+
 export default function HomePage() {
   return (
     <>
       <JsonLd data={[websiteSchema, softwareSchema]} />
-      <Suspense fallback={<DashboardSkeleton />}>
+      <Suspense fallback={<HomePageFallback />}>
         <HomePageClient />
       </Suspense>
     </>
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index 75a06f3..cadf070 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -9,6 +9,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
       attribute="class"
       defaultTheme="system"
       enableSystem
+      enableColorScheme
       storageKey="devimpact-theme"
     >
       {children}
diff --git a/next-env.d.ts b/next-env.d.ts
deleted file mode 100644
index c4b7818..0000000
--- a/next-env.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
