diff --git a/web/src/less/not-found.less b/web/src/less/not-found.less
new file mode 100644
index 00000000..d1722325
--- /dev/null
+++ b/web/src/less/not-found.less
@@ -0,0 +1,18 @@
+.page-wrapper.not-found {
+  @apply w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
+  
+  > .page-container {
+    @apply relative w-full min-h-full mx-auto flex flex-col justify-center items-center;
+      
+    > .title-text {
+      @apply text-xl sm:text-4xl text-gray-700 dark:text-gray-200;
+    }
+
+    > .action-button-container {
+      > .link-btn {
+        @apply block text-gray-600 dark:text-gray-200 dark:border-gray-600 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 my-3;
+      }
+    }
+  }
+}
+  
\ No newline at end of file
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 908f77b5..71749946 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -236,7 +236,8 @@
     "succeed-copy-resource-link": "Succeed to copy resource link to clipboard",
     "succeed-update-customized-profile": "Succeed to update customized profile",
     "succeed-update-additional-script": "Succeed to update additional script",
-    "update-succeed": "Update succeed"
+    "update-succeed": "Update succeed",
+    "page-not-found": "404 - Page Not Found 😥"
   },
   "days": {
     "monday": "Monday",
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index 6ec0de9f..9c847599 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -236,7 +236,8 @@
     "succeed-copy-resource-link": "复制资源链接到剪贴板成功",
     "succeed-update-customized-profile": "更新自定义配置文件成功",
     "succeed-update-additional-script": "更新附加脚本成功",
-    "update-succeed": "更新成功"
+    "update-succeed": "更新成功",
+    "page-not-found": "404 - 未找到网页 😥"
   },
   "days": {
     "monday": "星期一",
diff --git a/web/src/pages/NotFound.tsx b/web/src/pages/NotFound.tsx
new file mode 100644
index 00000000..884ab79e
--- /dev/null
+++ b/web/src/pages/NotFound.tsx
@@ -0,0 +1,22 @@
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import "../less/not-found.less";
+
+const NotFound = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="page-wrapper not-found">
+      <div className="page-container">
+        <p className="title-text">{t("message.page-not-found")}</p>
+        <div className="action-button-container">
+          <Link to="/" className="link-btn">
+            <span>🏠</span> {t("common.back-to-home")}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
index c20eadfa..b9748c83 100644
--- a/web/src/router/index.tsx
+++ b/web/src/router/index.tsx
@@ -9,6 +9,7 @@ const Explore = lazy(() => import("../pages/Explore"));
 const Home = lazy(() => import("../pages/Home"));
 const MemoDetail = lazy(() => import("../pages/MemoDetail"));
 const EmbedMemo = lazy(() => import("../pages/EmbedMemo"));
+const NotFound = lazy(() => import("../pages/NotFound"));
 
 const router = createBrowserRouter([
   {
@@ -110,6 +111,18 @@ const router = createBrowserRouter([
       return null;
     },
   },
+  {
+    path: "*",
+    element: <NotFound />,
+    loader: async () => {
+      try {
+        await initialGlobalState();
+      } catch (error) {
+        // do nth
+      }
+      return null;
+    },
+  },
 ]);
 
 export default router;