diff --git a/src/components/base.tsx b/src/components/base.tsx
index e3c9aa5..9d5007f 100644
--- a/src/components/base.tsx
+++ b/src/components/base.tsx
@@ -16,10 +16,29 @@ export const BaseHtml = ({
       <meta name="webroot" content={webroot} />
       <title safe>{title}</title>
 
-      {/* Main stylesheet generated by Tailwind/Bun */}
+      {/* Inline theme bootstrap: runs BEFORE CSS & painting, prevents FOUC */}
+      <script>
+        {`
+          (function () {
+            var STORAGE_KEY = "convertx-theme";
+            try {
+              var theme = localStorage.getItem(STORAGE_KEY);
+              if (theme === "dark") {
+                document.documentElement.setAttribute("data-theme", "dark");
+              } else {
+                document.documentElement.removeAttribute("data-theme");
+              }
+            } catch (e) {
+              document.documentElement.removeAttribute("data-theme");
+            }
+          })();
+        `}
+      </script>
+
+      {/* FIXED: Correct JSX syntax for CSS path */}
       <link rel="stylesheet" href={`${webroot}/generated.css`} />
 
-      {/* Icons / manifest (original ConvertX setup) */}
+      {/* Icons */}
       <link
         rel="apple-touch-icon"
         sizes="180x180"
@@ -38,23 +57,17 @@ export const BaseHtml = ({
         href={`${webroot}/favicon-16x16.png`}
       />
       <link rel="manifest" href={`${webroot}/site.webmanifest`} />
-
-      {/* NEW: global theme initializer – runs on *all* pages */}
-      <script src={`${webroot}/theme-init.js`} defer></script>
     </head>
-    <body
-      class={`flex min-h-screen w-full flex-col bg-neutral-900 text-neutral-200`}
-    >
+
+    <body class="flex min-h-screen w-full flex-col bg-neutral-900 text-neutral-200">
       {children}
+
       <footer class="w-full">
         <div class="p-4 text-center text-sm text-neutral-500">
           <span>Powered by </span>
           <a
             href="https://github.com/C4illin/ConvertX"
-            class={`
-              text-neutral-400
-              hover:text-accent-500
-            `}
+            class="text-neutral-400 hover:text-accent-500"
           >
             ConvertX{" "}
           </a>
