diff --git a/components/notification.jsx b/components/notification.jsx
new file mode 100644
index 0000000..cf4bedf
--- /dev/null
+++ b/components/notification.jsx
@@ -0,0 +1,27 @@
+import Sidebar from "./Sidebar";
+import Navbar from "./Navbar";
+import Image from "next/image";
+import Bell from "@/public/images/bell.png";
+
+function Notification() {
+  return (
+    <div className="flex h-screen">
+      <Sidebar />
+      <div className="flex flex-col flex-1">
+        <Navbar className="w-full" />
+        
+        <div className="flex-1 flex flex-col items-center justify-center gap-3">
+          <Image src={Bell} alt="bell" width={150} height={150} />
+          <div className="bg-white w-[366px] p-6 text-center">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-4">No notification</h2>
+            <p className="text-gray-600">
+              Your notification is empty. Once you receive a notification, it will appear here.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Notification;
diff --git a/pages/notification/index.js b/pages/notification/index.js
new file mode 100644
index 0000000..6b8710b
--- /dev/null
+++ b/pages/notification/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+import Notification from "../../components/notification";
+
+function index() {
+  return (
+    <div>
+      <Notification />
+    </div>
+  );
+}
+
+export default index;
diff --git a/public/images/bell.png b/public/images/bell.png
new file mode 100644
index 0000000..81f75ea
Binary files /dev/null and b/public/images/bell.png differ