diff --git a/script/serve-public.js b/script/serve-public.js
index c5b2d7e1e5..6f0486fa01 100755
--- a/script/serve-public.js
+++ b/script/serve-public.js
@@ -41,9 +41,8 @@ const handler = (request, response) => {
         fileStream.pipe(response);
     } catch(e) {
         console.log(`Could not read ${filename}`);
-        response.writeHead(404, {'Content-Type': 'text/plain'});
-        response.write('404 Not Found\n');
-        response.end();
+        response.writeHead(404, {'Content-Type': 'text/html'});
+        fs.createReadStream(path.join(basePath, '404.html')).pipe(response);
         return;
     }
 };
diff --git a/tests/git-scm.spec.js b/tests/git-scm.spec.js
index e8674a84bb..7d3dde39f0 100644
--- a/tests/git-scm.spec.js
+++ b/tests/git-scm.spec.js
@@ -230,3 +230,18 @@ test('book', async ({ page }) => {
   }
   await expect(page.getByRole('document')).toHaveText(/Snapshot’lar, Fərqlər Yox/)
 })
+
+test('404', async ({ page }) => {
+  await page.goto(`${url}does-not.exist`)
+
+  await expect(page.locator('.inner h1')).toHaveText(`That page doesn't exist.`)
+
+  // the 404 page should be styled
+  await expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute('href', /application(\.min)?\.css$/)
+
+  // the search box is shown
+  await expect(page.locator('#search-text')).toBeVisible()
+
+  // the usual navbar is shown
+  await expect(page.getByRole('link', { name: 'Community' })).toBeVisible()
+})