diff --git a/src/assets/svg/bell-off.svg b/src/assets/svg/bell-off.svg
new file mode 100644
index 00000000..5e7d4408
--- /dev/null
+++ b/src/assets/svg/bell-off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 17V18C9 19.6569 10.3431 21 12 21C13.6569 21 15 19.6569 15 18V17M9 17L15 17M9 17L5.00022 17.0002C4.48738 17.0002 4.06449 16.6141 4.00673 16.1168L4 15.9998V15.4141C4 15.1489 4.10544 14.8949 4.29297 14.7073L4.80371 14.1963C4.92939 14.0706 5 13.9003 5 13.7225V9.99986C5 8.15821 5.7112 6.48267 6.87393 5.23291M15 17L18.9999 17M5 3L21 19M18.9995 12.999L19.0004 10C19.0004 6.13402 15.8665 3 12.0005 3L11.7598 3.00406C10.9548 3.03125 10.1845 3.19404 9.4707 3.47081" stroke="#323532" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/layout/Header/components/ChatHeader.tsx b/src/components/layout/Header/components/ChatHeader.tsx
index ecee837a..1489508f 100644
--- a/src/components/layout/Header/components/ChatHeader.tsx
+++ b/src/components/layout/Header/components/ChatHeader.tsx
@@ -39,45 +39,53 @@ function ChatHeader() {
         </button>
       </header>
 
-      {open && (
-        <div className="fixed inset-0 z-50 bg-black/30" onClick={() => setOpen(false)}>
-          <div className="absolute top-0 right-0 h-full w-72 bg-white p-4" onClick={(e) => e.stopPropagation()}>
-            <div className="mb-6 flex items-center justify-between border-b pb-4">
-              <span className="text-sm font-medium">알림</span>
+      <div
+        className={`fixed inset-0 z-50 transition-colors duration-300 ${
+          open ? 'pointer-events-auto bg-black/30' : 'pointer-events-none bg-black/0'
+        }`}
+        onClick={() => setOpen(false)}
+      >
+        <div
+          className={`absolute top-0 right-0 h-full w-72 transform bg-white p-4 transition-transform duration-300 ease-in-out ${
+            open ? 'translate-x-0' : 'translate-x-full'
+          }`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="mb-6 flex items-center justify-between border-b pb-4">
+            <span className="text-sm font-medium">알림</span>
 
-              <button
-                onClick={() => toggleMute()}
-                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                  isMuted ? 'bg-gray-300' : 'bg-primary'
+            <button
+              onClick={() => toggleMute()}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                isMuted ? 'bg-gray-300' : 'bg-primary'
+              }`}
+            >
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                  isMuted ? 'translate-x-1' : 'translate-x-6'
                 }`}
-              >
-                <span
-                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                    isMuted ? 'translate-x-1' : 'translate-x-6'
-                  }`}
-                />
-              </button>
-            </div>
+              />
+            </button>
+          </div>
 
-            {isGroup && (
-              <>
-                <div className="mb-4 text-sm font-bold">참여자 {clubMembers.length}명</div>
-                <div className="flex flex-col gap-3">
-                  {clubMembers.map((member) => (
-                    <div key={member.userId} className="flex items-center gap-3">
-                      <img src={member.imageUrl} className="h-8 w-8 rounded-full" />
-                      <div className="flex flex-col">
-                        <span className="text-sm font-medium">{member.name}</span>
-                        <span className="text-xs text-gray-400">{member.studentNumber}</span>
-                      </div>
+          {isGroup && (
+            <>
+              <div className="mb-4 text-sm font-bold">참여자 {clubMembers.length}명</div>
+              <div className="flex flex-col gap-3">
+                {clubMembers.map((member) => (
+                  <div key={member.userId} className="flex items-center gap-3">
+                    <img src={member.imageUrl} className="h-8 w-8 rounded-full" />
+                    <div className="flex flex-col">
+                      <span className="text-sm font-medium">{member.name}</span>
+                      <span className="text-xs text-gray-400">{member.studentNumber}</span>
                     </div>
-                  ))}
-                </div>
-              </>
-            )}
-          </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
         </div>
-      )}
+      </div>
     </>
   );
 }
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index a51b60b9..89b0b979 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import BellOfIcon from '@/assets/svg/bell-off.svg';
 import useChat from './hooks/useChat';
 
 function ChatListPage() {
@@ -44,6 +45,11 @@ function ChatListPage() {
                   <div className="text-sm leading-4 font-bold text-indigo-700">{room.roomName}</div>
 
                   {isGroup && <span className="bg-primary text-cap2 rounded px-1.5 py-0.5 text-white">단체</span>}
+                  {room.isMuted && (
+                    <span className="text-xs text-gray-400">
+                      <BellOfIcon className="h-4 w-4" />
+                    </span>
+                  )}
                 </div>
 
                 <div className="shrink-0 text-xs leading-3.5 font-medium text-indigo-300">