diff --git a/web/package.json b/web/package.json
index a1ba41fbd..32811ab7e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -64,6 +64,7 @@
     "build:watch": "lerna run build:alone:watch --scope=@dzcode.io/web --include-dependencies --parallel",
     "bundle": "npm run build && npm run bundle:alone",
     "bundle:alone": "cross-env NODE_ENV=production rsbuild build",
+    "bundle:preview": "rsbuild preview",
     "bundle:doctor": "RSDOCTOR=true rsbuild build",
     "clean": "lerna run clean:alone --scope=@dzcode.io/web --include-dependencies --stream",
     "clean:alone": "rimraf dist coverage bundle node_modules/.cache && rimraf ./cloudflare/public",
diff --git a/web/src/_build/gen-multiple-htmls.ts b/web/src/_build/gen-multiple-htmls.ts
index 474a9decd..57c2c2b3a 100644
--- a/web/src/_build/gen-multiple-htmls.ts
+++ b/web/src/_build/gen-multiple-htmls.ts
@@ -1,6 +1,6 @@
 // for dev, run:
 // npm run clean && npm run bundle && npm run generate:htmls
-// npm run rsbuild preview
+// npm run bundle:preview
 
 import { join } from "path";
 import { readFileSync, writeFileSync, mkdirSync } from "fs";
@@ -24,13 +24,14 @@ const SKIP_ROOT_HTML = process.env.SKIP_ROOT_HTML === "true";
 console.log(`generating ${allPages.length} html files ...`);
 
 allPages.forEach((pageInfo) => {
-  const pathName = pageInfo.uri;
-  const outputHtmlDir = join(distFolder, pathName);
-  const outputHtmlPath = join(outputHtmlDir, "index.html");
-  if (SKIP_ROOT_HTML && outputHtmlPath === indexHtmlPath) {
-    console.log(`skipping root html: ${outputHtmlPath}`);
+  let pathName = pageInfo.uri.replace(/\/$/, "");
+  pathName = `${pathName || "index"}.html`;
+  if (SKIP_ROOT_HTML && pathName === "index.html") {
+    console.log(`skipping root html`);
     return;
   }
+  const outputHtmlPath = join(distFolder, pathName);
+  const outputHtmlParentDir = join(outputHtmlPath, "..");
 
   let newHtml = indexHtml;
   newHtml = newHtml.replace(
@@ -58,7 +59,7 @@ allPages.forEach((pageInfo) => {
   newHtml = newHtml.replace(/{{ogImage}}/g, pageInfo.ogImage);
   newHtml = newHtml.replace(/{{sentryOrigin}}/g, `https://${SENTRY_ORIGIN}`);
 
-  mkdirSync(outputHtmlDir, { recursive: true });
+  mkdirSync(outputHtmlParentDir, { recursive: true });
   writeFileSync(outputHtmlPath, newHtml);
 
   console.log(outputHtmlPath, "✅");
diff --git a/web/src/_build/gen-robots-txt.ts b/web/src/_build/gen-robots-txt.ts
index 8874fcb76..274878016 100644
--- a/web/src/_build/gen-robots-txt.ts
+++ b/web/src/_build/gen-robots-txt.ts
@@ -1,6 +1,6 @@
 // for dev, run:
 // npm run clean && npm run bundle && npm run generate:robots-txt
-// npm run rsbuild preview
+// npm run bundle:preview
 
 import { join } from "path";
 import { writeFileSync } from "fs";
diff --git a/web/src/_build/pages/static-pages.ts b/web/src/_build/pages/static-pages.ts
index c200372b3..c02b5f493 100644
--- a/web/src/_build/pages/static-pages.ts
+++ b/web/src/_build/pages/static-pages.ts
@@ -48,6 +48,14 @@ const staticURLs: PageInfoWithLocalKeys[] = [
       "https://images.unsplash.com/photo-1526663089957-f2aa2776f572?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80&auto=format&fit=crop&w=1200&h=627&q=80",
     keywords: "faq, open-source, algeria, dzcode",
   },
+  {
+    uri: "/404",
+    title: "notfound-title",
+    description: "notfound-description",
+    ogImage:
+      "https://images.unsplash.com/photo-1510133768164-a8f7e4d4e3dc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80&auto=format&fit=crop&w=1200&h=627&q=80",
+    keywords: "faq, open-source, algeria, dzcode",
+  },
 ];
 
 export const staticPages: PageInfo[] = staticURLs.reduce<PageInfo[]>(