diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index 2733903cb..4ee705d3a 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -3,30 +3,28 @@
 	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
 			<template v-for="item in items">
-				<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
+				<button v-if="item.action" class="_button" :class="{ indicated: item.indicated }" @click="$event => { item.action($event); close(); }">
 					<i class="icon" :class="item.icon"></i>
-					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
+					<span>{{ item.text }}</span>
 				</button>
-				<MkA v-else :to="item.to" @click.passive="close()">
+				<MkA v-else :to="item.to" :class="{ indicated: item.indicated }" @click.passive="close()">
 					<i class="icon" :class="item.icon"></i>
-					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
+					<span>{{ item.text }}</span>
 				</MkA>
 			</template>
 		</div>
 		<div class="sub">
 			<button class="_button" @click="help">
 				<i class="fas fa-question-circle icon"></i>
-				<div class="text">{{ i18n.ts.help }}</div>
+				<span>{{ i18n.ts.help }}</span>
 			</button>
 			<MkA to="/about" @click.passive="close()">
 				<i class="fas fa-info-circle icon"></i>
-				<div class="text">{{ i18n.ts.instanceInfo }}</div>
+				<span>{{ i18n.ts.instanceInfo }}</span>
 			</MkA>
 			<MkA to="/about-foundkey" @click.passive="close()">
 				<img src="/static-assets/favicon.png" class="icon"/>
-				<div class="text">{{ i18n.ts.aboutMisskey }}</div>
+				<span>{{ i18n.ts.aboutMisskey }}</span>
 			</MkA>
 		</div>
 	</div>
@@ -66,7 +64,7 @@ const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuD
 	icon: def.icon,
 	to: def.to,
 	action: def.action,
-	indicate: def.indicated,
+	indicated: def.indicated,
 }));
 
 function close() {
@@ -141,25 +139,11 @@ function help(ev: MouseEvent) {
 				height: 24px;
 			}
 
-			> .text {
+			> span {
 				margin-top: 12px;
 				font-size: 0.8em;
 				line-height: 1.5em;
 			}
-
-			> .indicator {
-				position: absolute;
-				top: 32px;
-				left: 32px;
-				color: var(--indicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-
-				@media (max-width: 500px) {
-					top: 16px;
-					left: 16px;
-				}
-			}
 		}
 	}
 
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 29359ef35..7824da238 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -14,29 +14,25 @@
 		<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
 			<span><MkEllipsis/></span>
 		</span>
-		<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
+		<MkA v-else-if="item.type === 'link'" :class="{ indicated: item.indicate }" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
-			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</MkA>
-		<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close()">
+		<a v-else-if="item.type === 'a'" :class="{ indicated: item.indicate }" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close()">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<span>{{ item.text }}</span>
-			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</a>
-		<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
+		<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active, indicated: item.indicate }" :disabled="item.active" @click="clicked(item.action, $event)">
 			<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
-			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
 		<span v-else-if="item.type === 'switch'" :tabindex="i" class="item">
 			<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
 		</span>
-		<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
+		<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active, indicated: item.indicate }" :disabled="item.active" @click="clicked(item.action, $event)">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
-			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
 	</template>
 	<span v-if="items2.length === 0" class="none item">
@@ -236,15 +232,6 @@ function focusDown() {
 			width: 20px;
 			height: 20px;
 		}
-
-		> .indicator {
-			position: absolute;
-			top: 5px;
-			left: 13px;
-			color: var(--indicator);
-			font-size: 12px;
-			animation: blink 1s infinite;
-		}
 	}
 
 	> .divider {
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index f96b0e63f..6dbbe688f 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -481,10 +481,14 @@ hr {
 	transform: scale(0.9);
 }
 
-@keyframes blink {
-	0% { opacity: 1; transform: scale(1); }
-	30% { opacity: 1; transform: scale(1); }
-	90% { opacity: 0; transform: scale(0.5); }
+.indicated {
+	i {
+		color: var(--indicator);
+		filter: saturate(2);
+	}
+	span {
+		font-weight: bold;
+	}
 }
 
 @keyframes tada {
diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5
index cda66a508..2ebaf6aee 100644
--- a/packages/client/src/themes/_dark.json5
+++ b/packages/client/src/themes/_dark.json5
@@ -35,7 +35,6 @@
 		navFg: '@fg',
 		navHoverFg: ':lighten<17<@fg',
 		navActive: '@accent',
-		navIndicator: '@indicator',
 		link: '#44a4c1',
 		hashtag: '#ff9156',
 		mention: '@accent',
diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5
index 50c5388e0..3066964e8 100644
--- a/packages/client/src/themes/_light.json5
+++ b/packages/client/src/themes/_light.json5
@@ -35,7 +35,6 @@
 		navFg: '@fg',
 		navHoverFg: ':darken<17<@fg',
 		navActive: '@accent',
-		navIndicator: '@indicator',
 		link: '#44a4c1',
 		hashtag: '#ff9156',
 		mention: '@accent',
diff --git a/packages/client/src/themes/d-astro.json5 b/packages/client/src/themes/d-astro.json5
index 7b9034020..7e67cf1dc 100644
--- a/packages/client/src/themes/d-astro.json5
+++ b/packages/client/src/themes/d-astro.json5
@@ -41,7 +41,6 @@
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
 		buttonGradateA: '@accent',
diff --git a/packages/client/src/themes/d-pumpkin.json5 b/packages/client/src/themes/d-pumpkin.json5
index ff2bc9509..2f6552412 100644
--- a/packages/client/src/themes/d-pumpkin.json5
+++ b/packages/client/src/themes/d-pumpkin.json5
@@ -63,7 +63,6 @@
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		navIndicator: '@indicator',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
 		driveFolderBg: ':alpha<0.3<@accent',
diff --git a/packages/client/src/themes/l-vivid.json5 b/packages/client/src/themes/l-vivid.json5
index 66d97f3a0..c0e013c41 100644
--- a/packages/client/src/themes/l-vivid.json5
+++ b/packages/client/src/themes/l-vivid.json5
@@ -44,7 +44,6 @@
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
 		driveFolderBg: ':alpha<0.3<@accent',
diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
index 88d5c0bf4..96322287b 100644
--- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
@@ -9,24 +9,27 @@
 		</MkA>
 		<template v-for="item in menu" :key="item">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
-				<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }, { indicated: menuDef[item].indicated }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+				<i class="fa-fw" :class="menuDef[item].icon"></i>
+				<span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 			</component>
 		</template>
 		<div class="divider"></div>
 		<MkA v-if="iAmModerator" class="item" active-class="active" to="/admin">
-			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+			<i class="fas fa-door-open fa-fw"></i>
+			<span class="text">{{ i18n.ts.controlPanel }}</span>
 		</MkA>
-		<button class="item _button" @click="more">
-			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-			<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+		<button class="item _button" :class="{ indicated: otherMenuItemIndicated }" @click="more">
+			<i class="fa fa-ellipsis-h fa-fw"></i>
+			<span class="text">{{ i18n.ts.more }}</span>
 		</button>
 		<MkA class="item" active-class="active" to="/settings">
-			<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+			<i class="fas fa-cog fa-fw"></i>
+			<span class="text">{{ i18n.ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="post">
-			<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+			<i class="fas fa-pencil-alt fa-fw"></i>
+			<span class="text">{{ i18n.ts.note }}</span>
 		</button>
 	</div>
 </div>
@@ -104,15 +107,6 @@ function more(): void {
 				vertical-align: middle;
 			}
 
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 20px;
-				color: var(--navIndicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-			}
-
 			> .text {
 				position: relative;
 				font-size: 0.9em;
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
index e3912df40..78b0f79b0 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/sidebar.vue
@@ -9,24 +9,27 @@
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
-				<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }, { indicated: menuDef[item].indicated }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+				<i class="fa-fw" :class="menuDef[item].icon"></i>
+				<span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 			</component>
 		</template>
 		<div class="divider"></div>
 		<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin">
-			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+			<i class="fas fa-door-open fa-fw"></i>
+			<span class="text">{{ i18n.ts.controlPanel }}</span>
 		</MkA>
-		<button class="item _button" @click="more">
-			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-			<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+		<button class="item _button" :class="{ indicated: otherMenuItemIndicated }" @click="more">
+			<i class="fa fa-ellipsis-h fa-fw"></i>
+			<span class="text">{{ i18n.ts.more }}</span>
 		</button>
 		<MkA class="item" active-class="active" to="/settings">
-			<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+			<i class="fas fa-cog fa-fw"></i>
+			<span class="text">{{ i18n.ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="os.post">
-			<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+			<i class="fas fa-pencil-alt fa-fw"></i>
+			<span class="text">{{ i18n.ts.note }}</span>
 		</button>
 	</div>
 </div>
@@ -137,15 +140,6 @@ function more(ev: MouseEvent) {
 				vertical-align: middle;
 			}
 
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 20px;
-				color: var(--navIndicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-			}
-
 			> .text {
 				position: relative;
 				font-size: 0.9em;
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 41d861661..13a9c4333 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -7,18 +7,16 @@
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
-				<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-tooltip="i18n.ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+				<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-tooltip="i18n.ts[menuDef[item].title]" class="item _button" :class="[ item, { indicated: menuDef[item].indicated }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 					<i class="fa-fw" :class="menuDef[item].icon"></i>
-					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
 			<MkA v-if="iAmModerator" v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="fas fa-door-open fa-fw"></i>
 			</MkA>
-			<button class="item _button" @click="more">
+			<button class="item _button" :class="{ indicated: otherNavItemIndicated }" @click="more">
 				<i class="fas fa-ellipsis-h fa-fw"></i>
-				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</button>
 		</div>
 		<div class="right">
@@ -129,15 +127,6 @@ function openAccountMenuWrapper(ev: MouseEvent): void {
 					vertical-align: middle;
 				}
 
-				> .indicator {
-					position: absolute;
-					top: 0;
-					left: 0;
-					color: var(--navIndicator);
-					font-size: 8px;
-					animation: blink 1s infinite;
-				}
-
 				&:hover {
 					text-decoration: none;
 					color: var(--navHoverFg);
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 00177ba15..489216f21 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -14,18 +14,18 @@
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
-		<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-			<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
-			<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+		<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[ item, { indicated: menuDef[item].indicated } ]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+			<i class="fa-fw" :class="menuDef[item].icon"></i>
+			<span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 		</component>
 	</template>
 	<div class="divider"></div>
 	<MkA v-if="iAmModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
 		<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 	</MkA>
-	<button class="item _button" @click="more">
-		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+	<button class="item _button" @click="more" :class="{ indicated: otherNavItemIndicated }">
+		<i class="fas fa-ellipsis-h fa-fw"></i>
+		<span class="text">{{ i18n.ts.more }}</span>
 	</button>
 	<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 		<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
@@ -214,15 +214,6 @@ function openAccountMenuWrapper(ev: MouseEvent): void {
 			vertical-align: middle;
 		}
 
-		> .indicator {
-			position: absolute;
-			top: 0;
-			left: 0;
-			color: var(--navIndicator);
-			font-size: 8px;
-			animation: blink 1s infinite;
-		}
-
 		&:hover {
 			text-decoration: none;
 			color: var(--navHoverFg);
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index b3b9ddd55..a5d4eebcf 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -27,10 +27,18 @@
 	</template>
 
 	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button home _button" @click="mainRouter.push('/')"><i class="fas fa-home"></i></button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
+		<button class="button nav _button" :class="{ indicated: menuIndicated }" @click="drawerMenuShowing = true">
+			<i class="fas fa-bars"></i>
+		</button>
+		<button class="button home _button" @click="mainRouter.push('/')">
+			<i class="fas fa-home"></i>
+		</button>
+		<button class="button notifications _button" :class="{ indicated: $i?.hasUnreadNotification }" @click="mainRouter.push('/my/notifications')">
+			<i class="fas fa-bell"></i>
+		</button>
+		<button class="button post _button" @click="os.post()">
+			<i class="fas fa-pencil-alt"></i>
+		</button>
 	</div>
 
 	<transition :name="$store.state.animation ? 'menu-back' : ''">
@@ -245,15 +253,6 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
 				background: var(--X2);
 			}
 
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 0;
-				color: var(--indicator);
-				font-size: 16px;
-				animation: blink 1s infinite;
-			}
-
 			&:first-child {
 				margin-left: 0;
 			}
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 8abcecd62..bc1ed33c8 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -18,11 +18,21 @@
 	<button class="widgetButton _button" :class="{ show: true }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
 
 	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="fas fa-home"></i></button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-		<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
+		<button class="button nav _button" :class="{ indicated: menuIndicated }" @click="drawerMenuShowing = true">
+			<i class="fas fa-bars"></i>
+		</button>
+		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')">
+			<i class="fas fa-home"></i>
+		</button>
+		<button class="button notifications _button" :class="{ indicated: $i?.hasUnreadNotification }" @click="mainRouter.push('/my/notifications')">
+			<i class="fas fa-bell"></i>
+		</button>
+		<button class="button widget _button" @click="widgetsShowing = true">
+			<i class="fas fa-layer-group"></i>
+		</button>
+		<button class="button post _button" @click="os.post()">
+			<i class="fas fa-pencil-alt"></i>
+		</button>
 	</div>
 
 	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
@@ -344,15 +354,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 				background: var(--X2);
 			}
 
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 0;
-				color: var(--indicator);
-				font-size: 16px;
-				animation: blink 1s infinite;
-			}
-
 			&:first-child {
 				margin-left: 0;
 			}