diff --git a/src/main/services/achievements/achievement-watcher-manager.ts b/src/main/services/achievements/achievement-watcher-manager.ts
index 97746ca0..c010f984 100644
--- a/src/main/services/achievements/achievement-watcher-manager.ts
+++ b/src/main/services/achievements/achievement-watcher-manager.ts
@@ -281,7 +281,7 @@ export class AchievementWatcherManager {
               totalNewGamesWithAchievements,
               totalNewAchievements,
               userPreferences.achievementCustomNotificationPosition ??
-                "top_left"
+                "top-left"
             );
           } else {
             publishCombinedNewAchievementNotification(
diff --git a/src/main/services/achievements/merge-achievements.ts b/src/main/services/achievements/merge-achievements.ts
index 801b53c7..6b40ad72 100644
--- a/src/main/services/achievements/merge-achievements.ts
+++ b/src/main/services/achievements/merge-achievements.ts
@@ -128,7 +128,7 @@ export const mergeAchievements = async (
     if (userPreferences?.achievementCustomNotificationsEnabled !== false) {
       WindowManager.notificationWindow?.webContents.send(
         "on-achievement-unlocked",
-        userPreferences.achievementCustomNotificationPosition ?? "top_left",
+        userPreferences.achievementCustomNotificationPosition ?? "top-left",
         achievementsInfo
       );
     } else {
diff --git a/src/main/services/window-manager.ts b/src/main/services/window-manager.ts
index 1ea5ea1d..91232f6e 100644
--- a/src/main/services/window-manager.ts
+++ b/src/main/services/window-manager.ts
@@ -289,35 +289,35 @@ export class WindowManager {
     const display = screen.getPrimaryDisplay();
     const { width, height } = display.workAreaSize;
 
-    if (position === "bottom_center") {
+    if (position === "bottom-center") {
       return {
         x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
         y: height - this.NOTIFICATION_WINDOW_HEIGHT,
       };
     }
 
-    if (position === "bottom_right") {
+    if (position === "bottom-right") {
       return {
         x: width - this.NOTIFICATION_WINDOW_WIDTH,
         y: height - this.NOTIFICATION_WINDOW_HEIGHT,
       };
     }
 
-    if (position === "top_center") {
+    if (position === "top-center") {
       return {
         x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
         y: 0,
       };
     }
 
-    if (position === "bottom_left") {
+    if (position === "bottom-left") {
       return {
         x: 0,
         y: height - this.NOTIFICATION_WINDOW_HEIGHT,
       };
     }
 
-    if (position === "top_right") {
+    if (position === "top-right") {
       return {
         x: width - this.NOTIFICATION_WINDOW_WIDTH,
         y: 0,
@@ -375,7 +375,7 @@ export class WindowManager {
         setTimeout(() => {
           this.notificationWindow?.webContents.send(
             "on-achievement-unlocked",
-            userPreferences.achievementCustomNotificationPosition ?? "top_left",
+            userPreferences.achievementCustomNotificationPosition ?? "top-left",
             [generateAchievementCustomNotificationTest(t, language)]
           );
         }, 1000);
diff --git a/src/renderer/src/components/achievements/notification/achievement-notification.scss b/src/renderer/src/components/achievements/notification/achievement-notification.scss
index e1df81d7..c1c9eb45 100644
--- a/src/renderer/src/components/achievements/notification/achievement-notification.scss
+++ b/src/renderer/src/components/achievements/notification/achievement-notification.scss
@@ -144,28 +144,28 @@ $margin-bottom: 28px;
   height: 192px;
   display: flex;
 
-  &.top_left {
+  &--top-left {
     align-items: start;
   }
 
-  &.top_center {
+  &--top-center {
     align-items: start;
   }
 
-  &.top_right {
+  &--top-right {
     justify-content: end;
     align-items: start;
   }
 
-  &.bottom_left {
+  &--bottom-left {
     align-items: end;
   }
 
-  &.bottom_center {
+  &--bottom-center {
     align-items: end;
   }
 
-  &.bottom_right {
+  &--bottom-right {
     justify-content: end;
     align-items: end;
   }
@@ -183,27 +183,27 @@ $margin-bottom: 28px;
     box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.25);
   }
 
-  &.top_left &__outer-container {
+  &--top-left &__outer-container {
     margin: $margin-top 0 0 $margin-horizontal;
   }
 
-  &.top_center &__outer-container {
+  &--top-center &__outer-container {
     margin: $margin-top 0 0 $margin-horizontal;
   }
 
-  &.top_right &__outer-container {
+  &--top-right &__outer-container {
     margin: $margin-top $margin-horizontal 0 0;
   }
 
-  &.bottom_left &__outer-container {
+  &--bottom-left &__outer-container {
     margin: 0 0 $margin-bottom $margin-horizontal;
   }
 
-  &.bottom_center &__outer-container {
+  &--bottom-center &__outer-container {
     margin: 0 0 $margin-bottom $margin-horizontal;
   }
 
-  &.bottom_right &__outer-container {
+  &--bottom-right &__outer-container {
     margin: 0 $margin-horizontal $margin-bottom 0;
   }
 
@@ -423,32 +423,32 @@ $margin-bottom: 28px;
     }
   }
 
-  &.top_left &__chip {
+  &--top-left &__chip {
     top: -12px;
     margin: $margin-top 0 0 $margin-horizontal;
   }
 
-  &.top_center &__chip {
+  &--top-center &__chip {
     top: -12px;
     margin: $margin-top 0 0 $margin-horizontal;
   }
 
-  &.top_right &__chip {
+  &--top-right &__chip {
     top: -12px;
     margin: $margin-top $margin-horizontal 0 0;
   }
 
-  &.bottom_left &__chip {
+  &--bottom-left &__chip {
     bottom: 70px;
     margin: 0 0 $margin-bottom $margin-horizontal;
   }
 
-  &.bottom_center &__chip {
+  &--bottom-center &__chip {
     bottom: 70px;
     margin: 0 0 $margin-bottom $margin-horizontal;
   }
 
-  &.bottom_right &__chip {
+  &--bottom-right &__chip {
     bottom: 70px;
     margin: 0 $margin-horizontal $margin-bottom 0;
   }
diff --git a/src/renderer/src/components/achievements/notification/achievement-notification.tsx b/src/renderer/src/components/achievements/notification/achievement-notification.tsx
index edd11d6a..1eefda8e 100644
--- a/src/renderer/src/components/achievements/notification/achievement-notification.tsx
+++ b/src/renderer/src/components/achievements/notification/achievement-notification.tsx
@@ -24,7 +24,7 @@ export function AchievementNotificationItem({
   return (
     <div
       className={cn("achievement-notification", {
-        [position]: true,
+        [`${baseClassName}--${position}`]: true,
         [`${baseClassName}--closing`]: isClosing,
         [`${baseClassName}--hidden`]: achievement.isHidden,
         [`${baseClassName}--rare`]: achievement.isRare,
diff --git a/src/renderer/src/pages/achievements/notification/achievement-notification.tsx b/src/renderer/src/pages/achievements/notification/achievement-notification.tsx
index fc71723e..ffc223c4 100644
--- a/src/renderer/src/pages/achievements/notification/achievement-notification.tsx
+++ b/src/renderer/src/pages/achievements/notification/achievement-notification.tsx
@@ -16,7 +16,7 @@ export function AchievementNotification() {
   const [isClosing, setIsClosing] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
   const [position, setPosition] =
-    useState<AchievementCustomNotificationPosition>("top_left");
+    useState<AchievementCustomNotificationPosition>("top-left");
 
   const [achievements, setAchievements] = useState<
     AchievementNotificationInfo[]
diff --git a/src/renderer/src/pages/settings/settings-general.tsx b/src/renderer/src/pages/settings/settings-general.tsx
index 792c4603..a0562374 100644
--- a/src/renderer/src/pages/settings/settings-general.tsx
+++ b/src/renderer/src/pages/settings/settings-general.tsx
@@ -41,7 +41,7 @@ export function SettingsGeneral() {
     achievementNotificationsEnabled: false,
     achievementCustomNotificationsEnabled: true,
     achievementCustomNotificationPosition:
-      "top_left" as AchievementCustomNotificationPosition,
+      "top-left" as AchievementCustomNotificationPosition,
     language: "",
     customStyles: window.localStorage.getItem("customStyles") || "",
   });
@@ -108,7 +108,7 @@ export function SettingsGeneral() {
         achievementCustomNotificationsEnabled:
           userPreferences.achievementCustomNotificationsEnabled ?? true,
         achievementCustomNotificationPosition:
-          userPreferences.achievementCustomNotificationPosition ?? "top_left",
+          userPreferences.achievementCustomNotificationPosition ?? "top-left",
         friendRequestNotificationsEnabled:
           userPreferences.friendRequestNotificationsEnabled ?? false,
         language: language ?? "en",
@@ -118,12 +118,12 @@ export function SettingsGeneral() {
 
   const achievementCustomNotificationPositionOptions = useMemo(() => {
     return [
-      "top_left",
-      "top_center",
-      "top_right",
-      "bottom_left",
-      "bottom_center",
-      "bottom_right",
+      "top-left",
+      "top-center",
+      "top-right",
+      "bottom-left",
+      "bottom-center",
+      "bottom-right",
     ].map((position) => ({
       key: position,
       value: position,
diff --git a/src/renderer/src/pages/theme-editor/theme-editor.tsx b/src/renderer/src/pages/theme-editor/theme-editor.tsx
index 4b7075dd..9d289c41 100644
--- a/src/renderer/src/pages/theme-editor/theme-editor.tsx
+++ b/src/renderer/src/pages/theme-editor/theme-editor.tsx
@@ -34,7 +34,7 @@ export default function ThemeEditor() {
   const [notificationVariation, setNotificationVariation] =
     useState<keyof typeof notificationVariations>("default");
   const [notificationAlignment, setNotificationAlignment] =
-    useState<AchievementCustomNotificationPosition>("top_left");
+    useState<AchievementCustomNotificationPosition>("top-left");
 
   const achievementPreview = useMemo(() => {
     return {
@@ -99,12 +99,12 @@ export default function ThemeEditor() {
 
   const achievementCustomNotificationPositionOptions = useMemo(() => {
     return [
-      "top_left",
-      "top_center",
-      "top_right",
-      "bottom_left",
-      "bottom_center",
-      "bottom_right",
+      "top-left",
+      "top-center",
+      "top-right",
+      "bottom-left",
+      "bottom-center",
+      "bottom-right",
     ].map((position) => ({
       key: position,
       value: position,
diff --git a/src/types/level.types.ts b/src/types/level.types.ts
index bdbb72a7..bca933c1 100644
--- a/src/types/level.types.ts
+++ b/src/types/level.types.ts
@@ -71,12 +71,12 @@ export interface GameAchievement {
 }
 
 export type AchievementCustomNotificationPosition =
-  | "top_left"
-  | "top_center"
-  | "top_right"
-  | "bottom_left"
-  | "bottom_center"
-  | "bottom_right";
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
 
 export interface UserPreferences {
   downloadsPath?: string | null;