diff --git a/client/src/assets/images/sushi_404.svg b/client/src/assets/images/sushi_404.svg
new file mode 100644
index 000000000..c90a1058a
--- /dev/null
+++ b/client/src/assets/images/sushi_404.svg
@@ -0,0 +1,1735 @@
+
+
\ No newline at end of file
diff --git a/client/src/pages/errors/NotFound.tsx b/client/src/pages/errors/NotFound.tsx
index 7c733284e..00e0bb037 100644
--- a/client/src/pages/errors/NotFound.tsx
+++ b/client/src/pages/errors/NotFound.tsx
@@ -1,5 +1,46 @@
-const NotFound = () => {
- return "Not Found, fail";
+import PropTypes from "prop-types";
+import NotFoundSvg from "@/assets/images/sushi_404.svg";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { Button } from "@/components/inputs";
+import { useNavigate } from "react-router-dom";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+
+const DefaultValue = {
+ title: "Oh no! You dropped your sushi!",
+ desc: "Either the URL doesn't exist, or you don't have access to it.",
+};
+
+const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
+ const navigate = useNavigate();
+ const theme = useTheme();
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+ {title}
+
+ {desc}
+
+
+
+ );
+};
+
+NotFound.propTypes = {
+ title: PropTypes.string,
+ desc: PropTypes.string,
};
export default NotFound;