diff --git a/packages/frontend/src/ui/_common_/statusbars.vue b/packages/frontend/src/ui/_common_/statusbars.vue
index b1e2c80f10..bb245c7dd8 100644
--- a/packages/frontend/src/ui/_common_/statusbars.vue
+++ b/packages/frontend/src/ui/_common_/statusbars.vue
@@ -1,18 +1,18 @@
 <template>
-<div class="dlrsnxqu">
+<div :class="$style.root">
 	<div
-		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
-			verySmall: x.size === 'verySmall',
-			small: x.size === 'small',
-			medium: x.size === 'medium',
-			large: x.size === 'large',
-			veryLarge: x.size === 'veryLarge',
+		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black,
+			[$style.verySmall]: x.size === 'verySmall',
+			[$style.small]: x.size === 'small',
+			[$style.medium]: x.size === 'medium',
+			[$style.large]: x.size === 'large',
+			[$style.veryLarge]: x.size === 'veryLarge',
 		}]"
 	>
-		<span class="name">{{ x.name }}</span>
-		<XRss v-if="x.type === 'rss'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
-		<XFederation v-else-if="x.type === 'federation'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
-		<XUserList v-else-if="x.type === 'userList'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/>
+		<span :class="$style.name">{{ x.name }}</span>
+		<XRss v-if="x.type === 'rss'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
+		<XFederation v-else-if="x.type === 'federation'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
+		<XUserList v-else-if="x.type === 'userList'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/>
 	</div>
 </div>
 </template>
@@ -25,67 +25,67 @@ const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vu
 const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
 </script>
 
-<style lang="scss" scoped>
-.dlrsnxqu {
+<style lang="scss" module>
+.root {
 	font-size: 15px;
 	background: var(--panel);
+}
 
-	> .item {
-		--height: 24px;
-		--nameMargin: 10px;
-		font-size: 0.85em;
+.item {
+	--height: 24px;
+	--nameMargin: 10px;
+	font-size: 0.85em;
 
-		&.verySmall {
-			--nameMargin: 7px;
-			--height: 16px;
-			font-size: 0.75em;
-		}
+	&.verySmall {
+		--nameMargin: 7px;
+		--height: 16px;
+		font-size: 0.75em;
+	}
 
-		&.small {
-			--nameMargin: 8px;
-			--height: 20px;
-			font-size: 0.8em;
-		}
+	&.small {
+		--nameMargin: 8px;
+		--height: 20px;
+		font-size: 0.8em;
+	}
 
-		&.large {
-			--nameMargin: 12px;
-			--height: 26px;
-			font-size: 0.875em;
-		}
+	&.large {
+		--nameMargin: 12px;
+		--height: 26px;
+		font-size: 0.875em;
+	}
 
-		&.veryLarge {
-			--nameMargin: 14px;
-			--height: 30px;
-			font-size: 0.9em;
-		}
+	&.veryLarge {
+		--nameMargin: 14px;
+		--height: 30px;
+		font-size: 0.9em;
+	}
 
-		display: flex;
-		vertical-align: bottom;
-		width: 100%;
-		line-height: var(--height);
-		height: var(--height);
-		overflow: clip;
-		contain: strict;
+	display: flex;
+	vertical-align: bottom;
+	width: 100%;
+	line-height: var(--height);
+	height: var(--height);
+	overflow: clip;
+	contain: strict;
 
-		> .name {
-			padding: 0 var(--nameMargin);
-			font-weight: bold;
-			color: var(--accent);
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .body {
-			min-width: 0;
-			flex: 1;
-		}
-
-		&.black {
-			background: #000;
-			color: #fff;
-		}
+	&.black {
+		background: #000;
+		color: #fff;
 	}
 }
+
+.name {
+	padding: 0 var(--nameMargin);
+	font-weight: bold;
+	color: var(--accent);
+
+	&:empty {
+		display: none;
+	}
+}
+
+.body {
+	min-width: 0;
+	flex: 1;
+}
 </style>