diff --git a/src/widgets/main/notification/notification-card.tsx b/src/widgets/main/notification/notification-card.tsx
new file mode 100644
index 0000000..8f9ade6
--- /dev/null
+++ b/src/widgets/main/notification/notification-card.tsx
@@ -0,0 +1,23 @@
+import ChevronRightIcon from '@shared/assets/icon/chevron-right.svg?react';
+export interface NotificationCardProps {
+  value: string;
+  time: string;
+}
+
+export function NotificationCard({ value, time }: NotificationCardProps) {
+  return (
+    <div className="w-[27.6rem] h-[7.6rem] pb-[1.2rem] border-b">
+      <button className="flex text-start gap-[1.2rem] h-[6.1rem]">
+        <div className="flex flex-col">
+          <p className="w-[24rem] h-[4.2rem] typo-body2 line-clamp-2">
+            {value}
+          </p>
+          <span className="typo-caption text-gray-300">{time}</span>
+        </div>
+        <div className="flex justify-center items-center w-[2.4rem] h-[6.4rem]">
+          <ChevronRightIcon width={'2.4rem'} height={'2.4rem'} />
+        </div>
+      </button>
+    </div>
+  );
+}
diff --git a/src/widgets/main/notification/notificationPanel.tsx b/src/widgets/main/notification/notificationPanel.tsx
new file mode 100644
index 0000000..2019575
--- /dev/null
+++ b/src/widgets/main/notification/notificationPanel.tsx
@@ -0,0 +1,28 @@
+import {
+  NotificationCard,
+  type NotificationCardProps,
+} from '@widgets/main/notification/notification-card';
+
+interface NotificationPanelProps {
+  notifications: NotificationCardProps[];
+}
+
+export function NotificationPanel({ notifications }: NotificationPanelProps) {
+  return (
+    <div className="w-[30rem] px-[1.2rem] h-[30.6rem] border border-gray-200 rounded-[12px]">
+      <div className="flex h-[5.4rem] justify-between">
+        <span className="w-[6.4rem] h-[2.2rem] pt-[1.2rem] typo-h3">
+          알림 내역
+        </span>
+        <button className="w-[4.1rem] h-[1.8rem] pt-[1.4rem] typo-cation text-gray-300">
+          전체삭제
+        </button>
+      </div>
+      <div className="flex flex-col gap-[1.2rem]">
+        {notifications.map((item, index) => (
+          <NotificationCard key={index} value={item.value} time={item.time} />
+        ))}
+      </div>
+    </div>
+  );
+}