diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index d582c9348..d190e80ef 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -50,7 +50,7 @@
 		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
 		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
 		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
-		<button :class="$style.navButton" class="_button post" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
+		<button :class="[$style.navButton, $style.postButton]" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 	</div>
 
 	<Transition :name="$store.state.animation ? 'menu-back' : ''">
@@ -400,11 +400,11 @@ async function deleteProfile() {
 			opacity: 0.5;
 		}
 	}
+}
 
-	&.post {
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-		color: var(--fgOnAccent);
-	}
+.postButton {
+	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	color: var(--fgOnAccent);
 }
 
 .navButtonIcon {
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index fcc0b468e..00e65ebee 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -23,7 +23,7 @@
 		<button :class="$style.navButton" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
 		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
 		<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
-		<button :class="$style.navButton" class="_button post" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
+		<button :class="[$style.navButton, $style.postButton]" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 	</div>
 
 	<Transition
@@ -347,11 +347,11 @@ $widgets-hide-threshold: 1090px;
 			opacity: 0.5;
 		}
 	}
+}
 
-	&.post {
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-		color: var(--fgOnAccent);
-	}
+.postButton {
+	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	color: var(--fgOnAccent);
 }
 
 .navButtonIcon {