diff --git a/tsugini/src/components/app/drawer/menu/Server.vue b/tsugini/src/components/app/drawer/menu/Server.vue
index 4e6509ddc..68e473211 100644
--- a/tsugini/src/components/app/drawer/menu/Server.vue
+++ b/tsugini/src/components/app/drawer/menu/Server.vue
@@ -1,5 +1,6 @@
 <template>
   <q-expansion-item
+    v-model="expanded"
     icon="mdi-cog"
     :label="
       $formatMessage({
@@ -12,12 +13,14 @@
     <template #header>
       <q-item-section avatar>
         <q-icon name="mdi-cog">
-          <q-badge
-            v-if="unreadCount > 0"
-            color="info"
-            rounded
-            floating
-          />
+          <Transition name="fab">
+            <q-badge
+              v-if="!expanded && unreadCount > 0"
+              color="info"
+              rounded
+              floating
+            />
+          </Transition>
         </q-icon>
       </q-item-section>
       <q-item-section>
@@ -73,15 +76,15 @@
           }}
         </q-item-label>
       </q-item-section>
-      <q-item-section
-        side
-        v-if="unreadCount > 0"
-      >
-        <q-badge
-          color="info"
-          rounded
-          >{{ unreadCount }}</q-badge
-        >
+      <q-item-section side>
+        <Transition name="fab">
+          <q-badge
+            v-if="unreadCount > 0"
+            color="info"
+            rounded
+            >{{ unreadCount }}</q-badge
+          >
+        </Transition>
       </q-item-section>
     </q-item>
 
@@ -167,4 +170,10 @@
 import { useAnnouncements } from 'colada/queries/announcements'
 
 const { unreadCount } = useAnnouncements()
+
+const expanded = ref<boolean>(false)
 </script>
+
+<style scoped lang="scss">
+@use 'styles/transitions/fab';
+</style>
diff --git a/tsugini/src/styles/transitions/_fab.scss b/tsugini/src/styles/transitions/_fab.scss
new file mode 100644
index 000000000..c3fad8f7c
--- /dev/null
+++ b/tsugini/src/styles/transitions/_fab.scss
@@ -0,0 +1,13 @@
+.fab {
+    &-enter-active,
+    &-leave-active {
+        transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
+
+    &-enter-from,
+    &-leave-to {
+        opacity: 0;
+        transform: rotate(180deg) scale(0.2) skew(20deg);
+        filter: hue-rotate(90deg);
+    }
+}
diff --git a/tsugini/src/styles/transitions/_fade.scss b/tsugini/src/styles/transitions/_fade.scss
new file mode 100644
index 000000000..3f45ec73c
--- /dev/null
+++ b/tsugini/src/styles/transitions/_fade.scss
@@ -0,0 +1,11 @@
+.fade {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity 0.5s ease;
+    }
+
+    &-enter-from,
+    &-leave-to {
+        opacity: 0;
+    }
+}