diff --git a/packages/react/src/components/common/NotFound.tsx b/packages/react/src/components/common/NotFound.tsx
new file mode 100644
index 000000000..a0dfe7011
--- /dev/null
+++ b/packages/react/src/components/common/NotFound.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/shadcn/ui/button";
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+export default function NotFound() {
+ const { t } = useTranslation();
+
+ return (
+ <>
+
+ {t("views.notFound.title")} - Holodex
+
+
+
{t("views.notFound.title")}
+
+
+ >
+ );
+}
diff --git a/packages/react/src/locales/en/ui.yml b/packages/react/src/locales/en/ui.yml
index f98a3a783..de0b38ef3 100644
--- a/packages/react/src/locales/en/ui.yml
+++ b/packages/react/src/locales/en/ui.yml
@@ -298,7 +298,7 @@ views:
dateuploadedLatestFirst: Upload date, latest first
dateuploadedEarliestFirst: Upload date, earliest first
notFound:
- title: Content not found
+ title: Content Not Found
back: Return Home
search:
sort:
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
index ad36d36d0..03f476887 100644
--- a/packages/react/src/routes/router.tsx
+++ b/packages/react/src/routes/router.tsx
@@ -101,6 +101,7 @@ const Watch = lazy(() =>
const ResetClientPage = lazy(() =>
import("./debug").then((module) => ({ default: module.ResetClientPage })),
);
+const NotFound = lazy(() => import("@/components/common/NotFound"));
const Playlist = lazy(() => import("./playlist"));
const Multiview = lazy(() =>
import("./multiview/multiview").then((module) => ({
@@ -174,6 +175,6 @@ export const routes = (
Debug Run} />
- Not found} />
+
);