diff --git a/client/public/error.gif b/client/public/error.gif
new file mode 100644
index 0000000..54029f5
Binary files /dev/null and b/client/public/error.gif differ
diff --git a/client/src/main.tsx b/client/src/main.tsx
index bf0b4bd..70c4fd1 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -13,6 +13,7 @@ import {
 } from "./pages";
 import { AccountProvider } from "./context";
 import "./index.scss";
+import PageError from "./pages/PageError/PageError";
 
 const router = createBrowserRouter([
   {
@@ -44,8 +45,8 @@ const router = createBrowserRouter([
     element: <CreateProduct />,
   },
   {
-    path: "*",
-    element: <div>404</div>,
+    path: "/404-page",
+    element: <PageError />,
   },
 ]);
 
diff --git a/client/src/pages/PageError/PageError.style.scss b/client/src/pages/PageError/PageError.style.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/pages/PageError/PageError.tsx b/client/src/pages/PageError/PageError.tsx
new file mode 100644
index 0000000..595bec5
--- /dev/null
+++ b/client/src/pages/PageError/PageError.tsx
@@ -0,0 +1,17 @@
+import { Page } from "../../components";
+import "./PageError.style.scss";
+
+function PageError() {
+  return (
+    <Page>
+      <div className="404-page">
+        <center>
+          <h1>404:NOT FOUND</h1>
+          <img src="error.gif"></img>
+        </center>
+      </div>
+    </Page>
+  );
+}
+
+export default PageError;
diff --git a/client/src/pages/PageError/index.ts b/client/src/pages/PageError/index.ts
new file mode 100644
index 0000000..e10aa4c
--- /dev/null
+++ b/client/src/pages/PageError/index.ts
@@ -0,0 +1 @@
+export { default as PageError} from "./PageError";