diff --git a/packages/client/src/components/MkAchievements.vue b/packages/client/src/components/MkAchievements.vue
index 8e9d25274..55dd403e9 100644
--- a/packages/client/src/components/MkAchievements.vue
+++ b/packages/client/src/components/MkAchievements.vue
@@ -1,34 +1,34 @@
 <template>
 <div>
-	<div v-if="achievements" :class=".root">
-		<div v-for="achievement in achievements" :key="achievement" :class=".achievement" class="_panel">
-			<div :class=".icon">
-				<div :class="[.iconFrame, ['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
-					<div :class="[.iconInner]" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
-						<img :class=".iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
+		<div v-if="achievements" class="root">
+		<div v-for="achievement in achievements" :key="achievement" class="_panel achievement">
+			<div class="icon">
+				<div :class="[['iconFrame'], ['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
+					<div class="iconInner" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
+						<img class="iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
 					</div>
 				</div>
 			</div>
-			<div :class=".body">
-				<div :class=".header">
-					<span :class=".title">{{ i18n.ts._achievements._types['_' + achievement.name].title }}</span>
-					<span :class=".time">
+			<div class="body">
+				<div class="header">
+					<span class="title">{{ i18n.ts._achievements._types['_' + achievement.name].title }}</span>
+					<span class="time">
 						<time v-tooltip="new Date(achievement.unlockedAt).toLocaleString()">{{ new Date(achievement.unlockedAt).getFullYear() }}/{{ new Date(achievement.unlockedAt).getMonth() + 1 }}/{{ new Date(achievement.unlockedAt).getDate() }}</time>
 					</span>
 				</div>
-				<div :class=".description">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
-				<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" :class=".flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
+				<div class="description">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
+				<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" class="flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
 			</div>
 		</div>
 		<template v-if="withLocked">
-			<div v-for="achievement in lockedAchievements" :key="achievement" :class="[.achievement, .locked]" class="_panel" @click="achievement === 'clickedClickHere' ? clickHere() : () => {}">
-				<div :class=".icon">
+			<div v-for="achievement in lockedAchievements" :key="achievement" class="_panel achievement locked" @click="achievement === 'clickedClickHere' ? clickHere() : () => {}">
+				<div class="icon">
 				</div>
-				<div :class=".body">
-					<div :class=".header">
-						<span :class=".title">???</span>
+				<div class="body">
+					<div class="header">
+						<span class="title">???</span>
 					</div>
-					<div :class=".description">???</div>
+					<div class="description">???</div>
 				</div>
 			</div>
 		</template>
@@ -77,7 +77,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" module>
+<style lang="scss" scoped>
 .root {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, min(380px, 100%));