Merge branch 'custom404' into playwright

* custom404:
  [pre-commit.ci] auto fixes from pre-commit.com hooks
  Added NotFound.test.tsx
  Resolve ' issue
  [pre-commit.ci] auto fixes from pre-commit.com hooks
  Added Custom 404 Page.

frontend/src/components/NotFound.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import NotFound from "./NotFound";
+
+interface NotFoundTestParams {
+  path: string;
+  expectedText: string;
+}
+
+const testCases: NotFoundTestParams[] = [
+  {
+    path: "/random-path",
+    expectedText: "404 Not Found",
+  },
+];
+
+describe.each(testCases)("NotFound Component", ({ path, expectedText }) => {
+  const testName = `Render correctly when navigating to '${path}'`;
+  test(testName, () => {
+    render(
+      <MemoryRouter initialEntries={[path]}>
+        <Routes>
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+    expect(screen.getByText(expectedText)).not.toBeNull();
+  });
+});

frontend/src/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from "react-router";
+import { useContext } from "react";
+import { ThemeContext } from "../context/ThemeContext";
+
+const NotFound = () => {
+  const { isDarkMode } = useContext(ThemeContext);
+
+  return (
+    <div className="vh-100 d-flex flex-column align-items-center justify-content-center">
+      <h1
+        className={`display-4 fw-bold mb-4 ${isDarkMode ? "text-info" : "text-secondary"}`}
+      >
+        404 Not Found
+      </h1>
+      <p className="fs-5 text-muted mb-4 text-center">
+        Sorry, the page you&apos;re looking for doesn&apos;t exist.
+      </p>
+      <Link to="/" className="btn btn-primary btn-lg px-4 py-2 shadow-sm">
+        Go To Home
+      </Link>
+    </div>
+  );
+};
+
+export default NotFound;

frontend/src/index.tsx

@@ -17,6 +17,7 @@ import {
   ImplementationReport,
   prepareDialectsComplianceReportFor,
 } from "./data/parseReportData";
+import NotFound from "./components/NotFound";
 
 const implementationReportViewDataLoader = async (implementationId: string) => {
   document.title = `Bowtie - ${implementationId}`;
@@ -116,6 +117,10 @@ const router = createHashRouter([
       },
     ],
   },
+  {
+    path: "*",
+    Component: NotFound,
+  },
 ]);
 
 document.addEventListener("DOMContentLoaded", () => {