diff --git a/fe_calckey/frontend/client/src/components/MagNotificationGroup.vue b/fe_calckey/frontend/client/src/components/MagNotificationGroup.vue
index c6f4c47..6f94946 100644
--- a/fe_calckey/frontend/client/src/components/MagNotificationGroup.vue
+++ b/fe_calckey/frontend/client/src/components/MagNotificationGroup.vue
@@ -69,11 +69,13 @@
                 <MagAvatar
                     v-if="notif.type === 'Renote'"
                     class="icon"
+                    :class="{ 'is-read': notif.is_read }"
                     :user="notif.note.user"
                 />
                 <MagAvatar
                     v-else-if="notif.type === 'Reaction'"
                     class="icon"
+                    :class="{ 'is-read': notif.is_read }"
                     :user="notif.user"
                 />
                 <div class="sub-icon" :class="notif.type">
@@ -264,6 +266,11 @@ const hookTooltip = (
                 width: 100%;
                 height: 100%;
                 border-radius: 6px;
+
+                &:not(.is-read) {
+                    outline: 1px solid var(--accentDarken);
+                    outline-offset: 2px;
+                }
             }
 
             > .sub-icon {
@@ -314,7 +321,7 @@ const hookTooltip = (
                 flex-wrap: wrap;
                 align-items: baseline;
                 margin-inline-end: 10px;
-                gap: 0.2em;
+                gap: 0.4em;
 
                 > .name {
                     text-overflow: ellipsis;
@@ -322,10 +329,15 @@ const hookTooltip = (
                     overflow: hidden;
                     min-width: 0;
                     flex: 0 1 auto;
-                }
+                    max-width: 150px;
+                    border: 1px solid var(--accentedBg);
+                    border-radius: 20px;
+                    padding-inline: 10px;
 
-                > .name:not(:last-child)::after {
-                    content: ",";
+                    &:hover {
+                        background-color: var(--accentedBg);
+                        border-color: var(--accent);
+                    }
                 }
             }