diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 0af109b4..08748b26 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,4 +1,10 @@
-function notfound() {
-  return <div>notfound</div>;
+import NotFoundCont from '@/domains/not-found/components/NotFoundCont';
+
+function NotFound() {
+  return (
+    <div className="page-layout max-w-1024 flex-center">
+      <NotFoundCont />
+    </div>
+  );
 }
-export default notfound;
+export default NotFound;
diff --git a/src/domains/not-found/components/NotFoundCont.tsx b/src/domains/not-found/components/NotFoundCont.tsx
new file mode 100644
index 00000000..a2154e2c
--- /dev/null
+++ b/src/domains/not-found/components/NotFoundCont.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import Image from 'next/image';
+import CrySsury from '@/shared/assets/ssury/ssury_cry.webp';
+import Button from '@/shared/components/button/Button';
+import { useRouter } from 'next/navigation';
+
+function NotFoundCont() {
+  const router = useRouter();
+
+  return (
+    <div className="flex flex-col items-center gap-5">
+      <Image
+        src={CrySsury}
+        alt=""
+        aria-hidden
+        width={128}
+        height={128}
+        className="w-25 h-25 sm:w-32 sm:h-32"
+      />
+      <h1 className="text-center">페이지를 찾을 수 없어요🥲</h1>
+      <Button
+        type="button"
+        color="default"
+        onClick={() => {
+          router.push('/');
+        }}
+      >
+        메인으로 이동
+      </Button>
+    </div>
+  );
+}
+export default NotFoundCont;
diff --git a/src/shared/assets/ssury/ssury_cry.webp b/src/shared/assets/ssury/ssury_cry.webp
index fdcd5d6e..e2f52779 100644
Binary files a/src/shared/assets/ssury/ssury_cry.webp and b/src/shared/assets/ssury/ssury_cry.webp differ