diff --git a/src/app/(service)/(my)/notification/page.tsx b/src/app/(service)/(my)/notification/page.tsx
index aa396981..7c1c3f30 100644
--- a/src/app/(service)/(my)/notification/page.tsx
+++ b/src/app/(service)/(my)/notification/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 
+import { MemberNotificationResponse } from '@/api/openapi';
 import type { GetMemberNotificationsTopicTypeEnum } from '@/api/openapi/api/notification-api';
 import NotificationList from '@/components/lists/notification-list';
 import Button from '@/components/ui/button';
@@ -61,6 +62,14 @@ export default function NotificationPage() {
     readNotifications(ids);
   };
 
+  const handleNotificationClick = (
+    notification: MemberNotificationResponse,
+  ) => {
+    if (!notification.isRead) {
+      readNotifications([notification.id]);
+    }
+  };
+
   return (
     <div className="flex flex-col gap-300">
       {/* Header */}
@@ -83,7 +92,7 @@ export default function NotificationPage() {
         <div className="flex gap-100">
           <Button
             color="outlined"
-            className="font-designer-13r h-[32px]"
+            className="font-designer-13r h-400"
             onClick={handleMarkAllAsRead}
           >
             모두 읽음 처리
@@ -104,7 +113,10 @@ export default function NotificationPage() {
         </div>
       </div>
 
-      <NotificationList notifications={notifications} />
+      <NotificationList
+        notifications={notifications}
+        onNotificationClick={handleNotificationClick}
+      />
 
       {/* Pagination */}
       <div className="mt-200">
diff --git a/src/components/lists/notification-list.tsx b/src/components/lists/notification-list.tsx
index 5670b155..dcc54a2a 100644
--- a/src/components/lists/notification-list.tsx
+++ b/src/components/lists/notification-list.tsx
@@ -25,17 +25,20 @@ const getBadgeColor = (
 
 interface NotificationListProps {
   notifications?: MemberNotificationResponse[];
+  onNotificationClick?: (notification: MemberNotificationResponse) => void;
 }
 
 export default function NotificationList({
   notifications,
+  onNotificationClick,
 }: NotificationListProps) {
   return (
     <ul>
       {notifications?.map((notification) => (
         <li
           key={notification.id}
-          className="border-bottom-border-default bg-background-default flex items-center justify-between border-b py-150"
+          className="border-bottom-border-default bg-background-default hover:bg-background-neutral-subtle flex cursor-pointer items-center justify-between border-b py-150"
+          onClick={() => onNotificationClick?.(notification)}
         >
           <div className="flex items-center gap-150">
             <Badge
@@ -50,9 +53,11 @@ export default function NotificationList({
               {notification.title}
             </span>
           </div>
-          <span className="font-designer-11r text-text-subtlest whitespace-nowrap">
-            {format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
-          </span>
+          <div className="flex items-center gap-100">
+            <span className="font-designer-11r text-text-subtlest whitespace-nowrap">
+              {format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
+            </span>
+          </div>
         </li>
       ))}
     </ul>
diff --git a/src/components/modals/notification-dropdown.tsx b/src/components/modals/notification-dropdown.tsx
index 53245faa..33fc3ddc 100644
--- a/src/components/modals/notification-dropdown.tsx
+++ b/src/components/modals/notification-dropdown.tsx
@@ -3,11 +3,12 @@
 import { DotIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { MemberNotificationResponse } from '@/api/openapi';
 import NotificationList from '@/components/lists/notification-list';
 
 import {
   useGetNotifications,
-  useHasNewNotification,
+  useReadNotifications,
 } from '@/hooks/queries/notification-api';
 import NotiIcon from 'public/icons/notifications_none.svg';
 import {
@@ -30,9 +31,16 @@ export default function NotificationDropdown() {
     size: 5,
     hasRead: false,
   });
-  const { data: newData } = useHasNewNotification();
 
-  const isRead = newData?.isRead;
+  const { mutate: readNotifications } = useReadNotifications();
+
+  const handleNotificationClick = (
+    notification: MemberNotificationResponse,
+  ) => {
+    if (!notification.isRead) {
+      readNotifications([notification.id]);
+    }
+  };
 
   const notifications =
     mode === 'all'
@@ -48,8 +56,8 @@ export default function NotificationDropdown() {
         <div className="relative cursor-pointer">
           <NotiIcon />
 
-          {!isRead && (
-            <DotIcon className="absolute -top-100 -left-100 fill-red-500 stroke-red-500" />
+          {totalUnreadCount !== undefined && totalUnreadCount > 0 && (
+            <DotIcon className="absolute -top-100 -right-100 fill-red-500 stroke-red-500" />
           )}
         </div>
       </DropdownMenuTrigger>
@@ -87,7 +95,10 @@ export default function NotificationDropdown() {
               </p>
             </div>
           ) : (
-            <NotificationList notifications={notifications} />
+            <NotificationList
+              notifications={notifications}
+              onNotificationClick={handleNotificationClick}
+            />
           )}
         </div>