diff --git a/Rules b/Rules
index 2305337ac..779ecc4b4 100644
--- a/Rules
+++ b/Rules
@@ -24,7 +24,6 @@ tdata      = Ryo.from_json(path: File.join(dirs.content, "json", "t.json"))
 surahs     = Ryo.from_json(path: File.join(dirs.content, "json", "surahs.json"))
 tidy       = `which tidy || which tidy5`.chomp
 buildenv   = ENV["buildenv"] || "development"
-etcdir     = File.join(__dir__, "etc")
 globals = {buildenv:, locales:, tidy:, tdata:, surahs:, name_by_id:}
 
 ##
diff --git a/etc/rubocop.yml b/etc/rubocop.yml
index 7c004f85d..1d29a6600 100644
--- a/etc/rubocop.yml
+++ b/etc/rubocop.yml
@@ -4,6 +4,7 @@ AllCops:
   TargetRubyVersion: 3.2
   Exclude:
     - submodules/**/*
+    - source/**/*
   Include:
     - Rakefile.rb
     - rake/tasks/*.rake
diff --git a/etc/tsconfig.json b/etc/tsconfig.json
index 9705588b2..4dae8b011 100644
--- a/etc/tsconfig.json
+++ b/etc/tsconfig.json
@@ -1,5 +1,9 @@
 {
-  "include": ["../src/**/*.ts", "../src/**/*.tsx"],
+  "include": [
+    "../src/js/typings/globals.d.ts",
+    "../src/**/*.ts",
+    "../src/**/*.tsx",
+  ],
   "exclude": ["../node_modules"],
   "compilerOptions": {
     "strict": true,
@@ -8,7 +12,7 @@
     "noImplicitAny": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [ "ES2020", "DOM" ],
 
     "baseUrl": "../src/",
diff --git a/etc/webpack.common.js b/etc/webpack.common.js
index 45451d8fc..a7ead9c1b 100644
--- a/etc/webpack.common.js
+++ b/etc/webpack.common.js
@@ -7,6 +7,10 @@ module.exports = {
       "@css": path.resolve(__dirname, "..", "src", "css"),
       "@json": path.resolve(__dirname, "..", "src", "json"),
       "~": path.resolve(__dirname, "..", "src", "js"),
+      "react": "preact/compat",
+      "react-dom/test-utils": "preact/test-utils",
+      "react-dom": "preact/compat",
+      "react/jsx-runtime": "preact/jsx-runtime",
     },
     extensions: [".js", ".ts", ".tsx", ".json", ".css", ".scss"],
   },
diff --git a/package-lock.json b/package-lock.json
index 4fe9b3c5c..6e3d07814 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,14 @@
       ],
       "dependencies": {
         "classnames": "^2.3",
-        "preact": "^10.23.2"
+        "preact": "^10.23.2",
+        "react": "npm:@preact/compat",
+        "react-dom": "npm:@preact/compat",
+        "react-jsxruntime": "npm:@preact/compat"
       },
       "devDependencies": {
         "@types/css-font-loading-module": "^0.0.13",
-        "@types/react": "^18.0",
-        "@types/react-dom": "^18.0",
+        "@types/react": "^18.3.5",
         "css-loader": "^7.1",
         "esbuild-loader": "^4.1",
         "eslint": "^9.8",
@@ -714,9 +716,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.4",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
-      "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
+      "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -724,16 +726,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
-      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.2.0.tgz",
@@ -3336,6 +3328,36 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/react": {
+      "name": "@preact/compat",
+      "version": "17.1.2",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-17.1.2.tgz",
+      "integrity": "sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": "*"
+      }
+    },
+    "node_modules/react-dom": {
+      "name": "@preact/compat",
+      "version": "17.1.2",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-17.1.2.tgz",
+      "integrity": "sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": "*"
+      }
+    },
+    "node_modules/react-jsxruntime": {
+      "name": "@preact/compat",
+      "version": "17.1.2",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-17.1.2.tgz",
+      "integrity": "sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": "*"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
diff --git a/package.json b/package.json
index 30df0fe73..725dc502d 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "classnames": "^2.3",
-    "preact": "^10.23.2"
+    "preact": "^10.23.2",
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat",
+    "react-jsxruntime": "npm:@preact/compat"
   },
   "devDependencies": {
     "@types/css-font-loading-module": "^0.0.13",
-    "@types/react": "^18.0",
-    "@types/react-dom": "^18.0",
+    "@types/react": "^18.3.5",
     "css-loader": "^7.1",
     "esbuild-loader": "^4.1",
     "eslint": "^9.8",
diff --git a/src/js/components/Select/Option.tsx b/src/js/components/Select/Option.tsx
index 3a73a0f16..87dfc8ec0 100644
--- a/src/js/components/Select/Option.tsx
+++ b/src/js/components/Select/Option.tsx
@@ -1,9 +1,17 @@
-type Rest = AnchorHTMLAttributes<HTMLAnchorElement>;
+import type { ReactNode } from "preact/compat";
+
 type Props = {
   value: string;
+  href?: string | undefined;
+  className?: string;
+  onClick?: () => void;
   children: ReactNode;
-} & Rest;
+};
 
-export function Option({ children, ...rest }: Props) {
-  return <a {...rest}>{children}</a>;
+export function Option({ children, href, className, onClick }: Props) {
+  return (
+    <a href={href || "#"} className={className} onClick={onClick}>
+      {String(children)}
+    </a>
+  );
 }
diff --git a/src/js/components/SurahStream/Stream.tsx b/src/js/components/SurahStream/Stream.tsx
index 2aaeb912b..9a0f6568f 100644
--- a/src/js/components/SurahStream/Stream.tsx
+++ b/src/js/components/SurahStream/Stream.tsx
@@ -37,11 +37,10 @@ export function Stream({
       >
         {stream.map((ayah: Ayah) => {
           return (
-            <li
-              key={ayah.id}
-              className="ayah fade mb-5"
-            >
-              <span className={classNames("flex h-8 items-center", {"mb-2": rtl})}>
+            <li key={ayah.id} className="ayah fade mb-5">
+              <span
+                className={classNames("flex h-8 items-center", { "mb-2": rtl })}
+              >
                 <AudioControl
                   hidden={!(isPaused || endOfStream)}
                   audio={new Audio()}
diff --git a/src/js/loaders/SurahIndexLoader.ts b/src/js/loaders/SurahIndexLoader.ts
index e309d5d12..9ade0bd0b 100644
--- a/src/js/loaders/SurahIndexLoader.ts
+++ b/src/js/loaders/SurahIndexLoader.ts
@@ -18,8 +18,8 @@ import { formatNumber } from "~/lib/t";
   const progressBar: HTMLProgressElement = loader.querySelector("progress")!;
   const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!;
   postman(
-    item.script(`/js/main/vendor.js?v=${rev}`, { id: 0 }),
-    item.script(`/js/main/surah-index.js?v=${rev}`, { id: 1 }),
+    item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
+    item.script(`/js/main/surah-index.js?v=${rev}`, { id: "1" }),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
     item.progress((percent: number) => {
       progressBar.value = percent;
@@ -35,7 +35,7 @@ import { formatNumber } from "~/lib/t";
       pkg.fonts.forEach((f) => document.fonts.add(f));
       pkg.css.forEach((s) => document.head.appendChild(s));
       pkg.scripts
-        .sort((s) => s.id)
+        .sort((s) => Number(s.id))
         .forEach((s) => {
           document.body.removeChild(document.body.appendChild(s));
         });
diff --git a/src/js/loaders/SurahStreamLoader.ts b/src/js/loaders/SurahStreamLoader.ts
index 8d46f2f57..c31498f42 100644
--- a/src/js/loaders/SurahStreamLoader.ts
+++ b/src/js/loaders/SurahStreamLoader.ts
@@ -19,8 +19,8 @@ import { formatNumber } from "~/lib/t";
   const progressBar = loader.querySelector("progress")!;
   const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!;
   postman(
-    item.script(`/js/main/vendor.js?v=${rev}`, { id: 0 }),
-    item.script(`/js/main/surah-stream.js?v=${rev}`, { id: 1 }),
+    item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
+    item.script(`/js/main/surah-stream.js?v=${rev}`, { id: "1" }),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
     /* eslint-disable */
     item.json(`/json/${doc.lang}/${surahId}/info.json?v=${rev}`, { className: "json surahinfo" }),
@@ -42,7 +42,7 @@ import { formatNumber } from "~/lib/t";
       pkg.css.forEach((s) => document.head.appendChild(s));
       pkg.json.forEach((o) => document.body.appendChild(o));
       pkg.scripts
-        .sort((s) => s.id)
+        .sort((s) => Number(s.id))
         .forEach((s) => {
           document.body.removeChild(document.body.appendChild(s));
         });
diff --git a/src/js/typings/globals.d.ts b/src/js/typings/globals.d.ts
new file mode 100644
index 000000000..7292d5e00
--- /dev/null
+++ b/src/js/typings/globals.d.ts
@@ -0,0 +1,11 @@
+import * as preact from "preact";
+import * as hooks from "preact/hooks";
+import fn from "classnames";
+
+declare global {
+  const render: typeof preact.render;
+  const useState: typeof hooks.useState;
+  const useEffect: typeof hooks.useEffect;
+  const useRef: typeof hooks.useRef;
+  const useMemo: typeof hooks.useMemo;
+}