diff --git a/src/components/TopBar/components/NotificationsPop.vue b/src/components/TopBar/components/NotificationsPop.vue
index b1f8b570..1dae173a 100644
--- a/src/components/TopBar/components/NotificationsPop.vue
+++ b/src/components/TopBar/components/NotificationsPop.vue
@@ -75,7 +75,7 @@ function getUnreadMessageCount() {
   <div
     style="backdrop-filter: var(--bew-filter-glass-1);"
     bg="$bew-elevated"
-    w="170px"
+    w="180px"
     p="4"
     rounded="$bew-radius"
     shadow="[var(--bew-shadow-edge-glow-1),var(--bew-shadow-3)]"
@@ -88,23 +88,26 @@ function getUnreadMessageCount() {
       :href="item.url"
       :target="isHomePage() ? '_blank' : '_self'"
       pos="relative"
-      flex="~ items-center gap-2"
+      flex="~ items-center justify-between gap-2"
       p="x-4 y-2"
       bg="hover:$bew-fill-2"
       rounded="$bew-radius"
       transition="all duration-300"
       m="b-1 last:b-0"
     >
-      <i :class="item.icon" text="$bew-text-2" />
-      <span class="flex-1 ml-2 mr-1">{{ item.name }}</span>
+      <div flex="~ items-center gap-2">
+        <i :class="item.icon" text="$bew-text-2" />
+        <span class="flex-1 ml-2 mr-1">{{ item.name }}</span>
+      </div>
       <template v-if="item.unreadCount > 0">
         <div
           bg="$bew-theme-color"
-          rounded="full"
+          rounded="$bew-radius"
           text="white xs leading-none center"
-          p="1"
-          min-w="21px"
-          min-h="21px"
+          grid="~ place-items-center"
+          px-1
+          min-w="14px"
+          h="14px"
         >
           {{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
         </div>