diff --git a/package.json b/package.json
index 9a581ad3f0..1b765deb7a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.9.3",
+	"version": "12.119.0-calc.9.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index ecd4048ab6..f14d5d5545 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -24,19 +24,19 @@
 				<i class="ph-list-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle-fill"></i></span>
 			</div>
 		</button>
-		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')">
-			<div class="button-wrapper">
+		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/');">
+			<div class="button-wrapper" :class="buttonAnimIndex === 0 ? 'on' : ''">
 				<i class="ph-house-bold ph-lg"></i>
 			</div>
 		</button>
 		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')">
-			<div class="button-wrapper">
+			<div class="button-wrapper" :class="buttonAnimIndex === 1 ? 'on' : ''">
 				<i class="ph-bell-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle-fill"></i></span>
 			</div>
 		</button>
 		<button class="button widget _button" @click="mainRouter.push('/my/messaging')">
-			<div class="button-wrapper">
-				<i class="ph-chats-teardrop-bold ph-lg"></i>
+			<div class="button-wrapper" :class="buttonAnimIndex === 2 ? 'on' : ''">
+				<i class="ph-chats-teardrop-bold ph-lg"></i><span v-if="$i?.hasUnreadMessagingMessage" class="indicator"><i class="ph-circle-fill"></i></span>
 			</div>
 		</button>
 		<button class="button widget _button" @click="widgetsShowing = true">
@@ -107,6 +107,22 @@ window.addEventListener('resize', () => {
 	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
+const props = defineProps<{
+	buttonAnimIndex: number;
+}>();
+
+watch($$(mainRouter.currentRoute.value.name), () => {
+	let routerState = mainRouter.currentRoute.value.name;
+		const bottomButtons = ['index', 'notifications', 'messaging'];
+		bottomButtons.forEach(i => {
+			if (routerState.includes(i)) {
+				props.buttonAnimIndex = bottomButtons.findIndex(e => e.includes(i))
+			}
+		});
+	}
+);
+
+
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 const widgetsEl = $ref<HTMLElement>();
 const postButton = $ref<HTMLElement>();
@@ -370,9 +386,9 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 				transition: background 0.1s;
 			}
 
-			> .button-wrapper:active {
+			> .button-wrapper.on {
 				background-color: var(--accentedBg);
-				width: 60%;
+				width: 100%;
 				border-radius: 10px;
 				transform: translateY(-0.5em);
 				transition: all 0.2s;