diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx
index aa0dea8e..28118c83 100644
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@@ -14,12 +14,14 @@ import {
 
 import { routes } from "./routes";
 
-import * as styles from "./sidebar.css";
+import "./sidebar.scss";
+
 import { buildGameDetailsPath } from "@renderer/helpers";
 
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { SidebarProfile } from "./sidebar-profile";
 import { sortBy } from "lodash-es";
+import cn from "classnames";
 import { CommentDiscussionIcon } from "@primer/octicons-react";
 
 const SIDEBAR_MIN_WIDTH = 200;
@@ -168,9 +170,9 @@ export function Sidebar() {
   return (
     <aside
       ref={sidebarRef}
-      className={styles.sidebar({
-        resizing: isResizing,
-        darwin: window.electron.platform === "darwin",
+      className={cn("sidebar", {
+        "sidebar--resizing": isResizing,
+        "sidebar--darwin": window.electron.platform === "darwin",
       })}
       style={{
         width: sidebarWidth,
@@ -183,19 +185,19 @@ export function Sidebar() {
       >
         <SidebarProfile />
 
-        <div className={styles.content}>
-          <section className={styles.section}>
-            <ul className={styles.menu}>
+        <div className="sidebar__content">
+          <section className="sidebar__section">
+            <ul className="sidebar__menu">
               {routes.map(({ nameKey, path, render }) => (
                 <li
                   key={nameKey}
-                  className={styles.menuItem({
-                    active: location.pathname === path,
+                  className={cn("sidebar__menu-item", {
+                    "sidebar__menu-item--active": location.pathname === path,
                   })}
                 >
                   <button
                     type="button"
-                    className={styles.menuItemButton}
+                    className="sidebar__menu-item-button"
                     onClick={() => handleSidebarItemClick(path)}
                   >
                     {render()}
@@ -206,8 +208,8 @@ export function Sidebar() {
             </ul>
           </section>
 
-          <section className={styles.section}>
-            <small className={styles.sectionTitle}>{t("my_library")}</small>
+          <section className="sidebar__section">
+            <small className="sidebar__section-title">{t("my_library")}</small>
 
             <TextField
               ref={filterRef}
@@ -216,34 +218,35 @@ export function Sidebar() {
               theme="dark"
             />
 
-            <ul className={styles.menu}>
+            <ul className="sidebar__menu">
               {filteredLibrary.map((game) => (
                 <li
-                  key={`${game.shop}-${game.objectId}`}
-                  className={styles.menuItem({
-                    active:
+                  key={game.id}
+                  className={cn("sidebar__menu-item", {
+                    "sidebar__menu-item--active":
                       location.pathname ===
                       `/game/${game.shop}/${game.objectId}`,
-                    muted: game.download?.status === "removed",
+                    "sidebar__menu-item--muted":
+                      game.download?.status === "removed",
                   })}
                 >
                   <button
                     type="button"
-                    className={styles.menuItemButton}
+                    className="sidebar__menu-item-button"
                     onClick={(event) => handleSidebarGameClick(event, game)}
                   >
                     {game.iconUrl ? (
                       <img
-                        className={styles.gameIcon}
+                        className="sidebar__game-icon"
                         src={game.iconUrl}
                         alt={game.title}
                         loading="lazy"
                       />
                     ) : (
-                      <SteamLogo className={styles.gameIcon} />
+                      <SteamLogo className="sidebar__game-icon" />
                     )}
 
-                    <span className={styles.menuItemButtonLabel}>
+                    <span className="sidebar__menu-item-button-label">
                       {getGameTitle(game)}
                     </span>
                   </button>
@@ -257,10 +260,10 @@ export function Sidebar() {
       {hasActiveSubscription && (
         <button
           type="button"
-          className={styles.helpButton}
+          className="sidebar__help-button"
           data-open-support-chat
         >
-          <div className={styles.helpButtonIcon}>
+          <div className="sidebar__help-button-icon">
             <CommentDiscussionIcon size={14} />
           </div>
           <span>{t("need_help")}</span>
@@ -269,7 +272,7 @@ export function Sidebar() {
 
       <button
         type="button"
-        className={styles.handle}
+        className="sidebar__handle"
         onMouseDown={handleMouseDown}
       />
     </aside>
diff --git a/src/renderer/src/components/toast/toast.css.ts b/src/renderer/src/components/toast/toast.css.ts
deleted file mode 100644
index 03db1040..00000000
--- a/src/renderer/src/components/toast/toast.css.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { keyframes, style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const enter = keyframes({
-  "0%": {
-    opacity: 0,
-    transform: "translateY(100%)",
-  },
-  "100%": {
-    opacity: 1,
-    transform: "translateY(0)",
-  },
-});
-
-export const exit = keyframes({
-  "0%": {
-    opacity: 1,
-    transform: "translateY(0)",
-  },
-  "100%": {
-    opacity: 0,
-    transform: "translateY(100%)",
-  },
-});
-
-export const toast = recipe({
-  base: {
-    animationDuration: "0.15s",
-    animationTimingFunction: "ease-in-out",
-    maxWidth: "420px",
-    position: "absolute",
-    backgroundColor: vars.color.background,
-    borderRadius: "4px",
-    border: `solid 1px ${vars.color.border}`,
-    right: "0",
-    bottom: "0",
-    overflow: "hidden",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    zIndex: vars.zIndex.toast,
-  },
-  variants: {
-    closing: {
-      true: {
-        animationName: exit,
-        transform: "translateY(100%)",
-      },
-      false: {
-        animationName: enter,
-        transform: "translateY(0)",
-      },
-    },
-  },
-});
-
-export const toastContent = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  justifyContent: "center",
-  alignItems: "center",
-});
-
-export const progress = style({
-  width: "100%",
-  height: "3px",
-  "::-webkit-progress-bar": {
-    backgroundColor: vars.color.darkBackground,
-  },
-  "::-webkit-progress-value": {
-    backgroundColor: vars.color.muted,
-  },
-});
-
-export const closeButton = style({
-  color: vars.color.body,
-  cursor: "pointer",
-  transition: "all ease 0.15s",
-  ":hover": {
-    color: vars.color.muted,
-  },
-});
-
-export const successIcon = style({
-  color: vars.color.success,
-});
-
-export const errorIcon = style({
-  color: vars.color.danger,
-});
-
-export const warningIcon = style({
-  color: vars.color.warning,
-});
diff --git a/src/renderer/src/components/toast/toast.tsx b/src/renderer/src/components/toast/toast.tsx
index 34c76a3e..116d26fa 100644
--- a/src/renderer/src/components/toast/toast.tsx
+++ b/src/renderer/src/components/toast/toast.tsx
@@ -6,12 +6,13 @@ import {
   XIcon,
 } from "@primer/octicons-react";
 
-import * as styles from "./toast.css";
-import { SPACING_UNIT } from "@renderer/theme.css";
+import "./toast.scss";
+import cn from "classnames";
 
 export interface ToastProps {
   visible: boolean;
-  message: string;
+  title: string;
+  message?: string;
   type: "success" | "error" | "warning";
   duration?: number;
   onClose: () => void;
@@ -21,9 +22,10 @@ const INITIAL_PROGRESS = 100;
 
 export function Toast({
   visible,
+  title,
   message,
   type,
-  duration = 5000,
+  duration = 2500,
   onClose,
 }: Readonly<ToastProps>) {
   const [isClosing, setIsClosing] = useState(false);
@@ -79,12 +81,16 @@ export function Toast({
   if (!visible) return null;
 
   return (
-    <div className={styles.toast({ closing: isClosing })}>
-      <div className={styles.toastContent}>
+    <div
+      className={cn("toast", {
+        "toast--closing": isClosing,
+      })}
+    >
+      <div className="toast__content">
         <div
           style={{
             display: "flex",
-            gap: `${SPACING_UNIT}px`,
+            gap: `8px`,
             flexDirection: "column",
           }}
         >
@@ -93,24 +99,26 @@ export function Toast({
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center",
-              gap: `${SPACING_UNIT}px`,
+              gap: `8px`,
             }}
           >
             {type === "success" && (
-              <CheckCircleFillIcon className={styles.successIcon} />
+              <CheckCircleFillIcon className="toast__icon--success" />
             )}
 
             {type === "error" && (
-              <XCircleFillIcon className={styles.errorIcon} />
+              <XCircleFillIcon className="toast__icon--error" />
             )}
 
-            {type === "warning" && <AlertIcon className={styles.warningIcon} />}
+            {type === "warning" && (
+              <AlertIcon className="toast__icon--warning" />
+            )}
 
-            <span style={{ fontWeight: "bold", flex: 1 }}>{message}</span>
+            <span style={{ fontWeight: "bold", flex: 1 }}>{title}</span>
 
             <button
               type="button"
-              className={styles.closeButton}
+              className="toast__close-button"
               onClick={startAnimateClosing}
               aria-label="Close toast"
             >
@@ -118,14 +126,11 @@ export function Toast({
             </button>
           </div>
 
-          <p>
-            This is a really really long message that should wrap to the next
-            line
-          </p>
+          {message && <p>{message}</p>}
         </div>
       </div>
 
-      <progress className={styles.progress} value={progress} max={100} />
+      <progress className="toast__progress" value={progress} max={100} />
     </div>
   );
 }
diff --git a/src/renderer/src/pages/achievements/achievement-list.tsx b/src/renderer/src/pages/achievements/achievement-list.tsx
index 6066f241..8862ce48 100644
--- a/src/renderer/src/pages/achievements/achievement-list.tsx
+++ b/src/renderer/src/pages/achievements/achievement-list.tsx
@@ -1,43 +1,38 @@
 import { useDate } from "@renderer/hooks";
 import type { UserAchievement } from "@types";
 import { useTranslation } from "react-i18next";
-import * as styles from "./achievements.css";
+import "./achievements.scss";
 import { EyeClosedIcon } from "@primer/octicons-react";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
-import { vars } from "@renderer/theme.css";
 
 interface AchievementListProps {
   achievements: UserAchievement[];
 }
 
-export function AchievementList({ achievements }: AchievementListProps) {
+export function AchievementList({
+  achievements,
+}: Readonly<AchievementListProps>) {
   const { t } = useTranslation("achievement");
   const { showHydraCloudModal } = useSubscription();
   const { formatDateTime } = useDate();
 
   return (
-    <ul className={styles.list}>
+    <ul className="achievements__list">
       {achievements.map((achievement) => (
-        <li
-          key={achievement.name}
-          className={styles.listItem}
-          style={{ display: "flex" }}
-        >
+        <li key={achievement.name} className="achievements__item">
           <img
-            className={styles.listItemImage({
-              unlocked: achievement.unlocked,
-            })}
+            className={`achievements__item-image ${!achievement.unlocked ? "achievements__item-image--locked" : ""}`}
             src={achievement.icon}
             alt={achievement.displayName}
             loading="lazy"
           />
 
-          <div style={{ flex: 1 }}>
-            <h4 style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+          <div className="achievements__item-content">
+            <h4 className="achievements__item-title">
               {achievement.hidden && (
                 <span
-                  style={{ display: "flex" }}
+                  className="achievements__item-hidden-icon"
                   title={t("hidden_achievement_tooltip")}
                 >
                   <EyeClosedIcon size={12} />
@@ -47,48 +42,36 @@ export function AchievementList({ achievements }: AchievementListProps) {
             </h4>
             <p>{achievement.description}</p>
           </div>
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: "8px",
-              alignItems: "flex-end",
-            }}
-          >
+
+          <div className="achievements__item-meta">
             {achievement.points != undefined ? (
               <div
-                style={{ display: "flex", alignItems: "center", gap: "4px" }}
+                className="achievements__item-points"
                 title={t("achievement_earn_points", {
                   points: achievement.points,
                 })}
               >
-                <HydraIcon width={20} height={20} />
-                <p style={{ fontSize: "1.1em" }}>{achievement.points}</p>
+                <HydraIcon className="achievements__item-points-icon" />
+                <p className="achievements__item-points-value">
+                  {achievement.points}
+                </p>
               </div>
             ) : (
               <button
                 onClick={() => showHydraCloudModal("achievements")}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "4px",
-                  cursor: "pointer",
-                  color: vars.color.warning,
-                }}
-                title={t("achievement_earn_points", {
-                  points: "???",
-                })}
+                className="achievements__item-points achievements__item-points--locked"
+                title={t("achievement_earn_points", { points: "???" })}
               >
-                <HydraIcon width={20} height={20} />
-                <p style={{ fontSize: "1.1em" }}>???</p>
+                <HydraIcon className="achievements__item-points-icon" />
+                <p className="achievements__item-points-value">???</p>
               </button>
             )}
             {achievement.unlockTime != null && (
               <div
+                className="achievements__item-unlock-time"
                 title={t("unlocked_at", {
                   date: formatDateTime(achievement.unlockTime),
                 })}
-                style={{ whiteSpace: "nowrap", gap: "4px", display: "flex" }}
               >
                 <small>{formatDateTime(achievement.unlockTime)}</small>
               </div>
diff --git a/src/renderer/src/pages/downloads/download-group.tsx b/src/renderer/src/pages/downloads/download-group.tsx
index 2bd1c67c..8c61672c 100644
--- a/src/renderer/src/pages/downloads/download-group.tsx
+++ b/src/renderer/src/pages/downloads/download-group.tsx
@@ -12,9 +12,8 @@ import { Downloader, formatBytes, steamUrlBuilder } from "@shared";
 import { DOWNLOADER_NAME } from "@renderer/constants";
 import { useAppSelector, useDownload } from "@renderer/hooks";
 
-import * as styles from "./download-group.css";
+import "./download-group.scss";
 import { useTranslation } from "react-i18next";
-import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { useMemo } from "react";
 import {
   DropdownMenu,
@@ -260,44 +259,26 @@ export function DownloadGroup({
   if (!library.length) return null;
 
   return (
-    <div className={styles.downloadGroup}>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
+    <div className="download-group">
+      <div className="download-group__header">
         <h2>{title}</h2>
-
-        <div
-          style={{
-            flex: 1,
-            backgroundColor: vars.color.border,
-            height: "1px",
-          }}
-        />
-        <h3 style={{ fontWeight: "400" }}>{library.length}</h3>
+        <div className="download-group__header-divider" />
+        <h3 className="download-group__header-count">{library.length}</h3>
       </div>
 
-      <ul className={styles.downloads}>
+      <ul className="download-group__downloads">
         {library.map((game) => {
           return (
-            <li
-              key={game.id}
-              className={styles.download}
-              style={{ position: "relative" }}
-            >
-              <div className={styles.downloadCover}>
-                <div className={styles.downloadCoverBackdrop}>
+            <li key={game.id} className="download-group__item">
+              <div className="download-group__cover">
+                <div className="download-group__cover-backdrop">
                   <img
                     src={steamUrlBuilder.library(game.objectId)}
-                    className={styles.downloadCoverImage}
+                    className="download-group__cover-image"
                     alt={game.title}
                   />
 
-                  <div className={styles.downloadCoverContent}>
+                  <div className="download-group__cover-content">
                     <Badge>
                       {
                         DOWNLOADER_NAME[
@@ -308,12 +289,12 @@ export function DownloadGroup({
                   </div>
                 </div>
               </div>
-              <div className={styles.downloadRightContent}>
-                <div className={styles.downloadDetails}>
-                  <div className={styles.downloadTitleWrapper}>
+              <div className="download-group__right-content">
+                <div className="download-group__details">
+                  <div className="download-group__title-wrapper">
                     <button
                       type="button"
-                      className={styles.downloadTitle}
+                      className="download-group__title"
                       onClick={() =>
                         navigate(
                           buildGameDetailsPath({
@@ -337,15 +318,7 @@ export function DownloadGroup({
                     sideOffset={-75}
                   >
                     <Button
-                      style={{
-                        position: "absolute",
-                        top: "12px",
-                        right: "12px",
-                        borderRadius: "50%",
-                        border: "none",
-                        padding: "8px",
-                        minHeight: "unset",
-                      }}
+                      className="download-group__menu-button"
                       theme="outline"
                     >
                       <ThreeBarsIcon />
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx
index 3d90ad91..ba30879c 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx
@@ -1,24 +1,18 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import * as styles from "./hero-panel.css";
 import { formatDownloadProgress } from "@renderer/helpers";
 import { useDate, useDownload, useFormat } from "@renderer/hooks";
 import { Link } from "@renderer/components";
-
 import { gameDetailsContext } from "@renderer/context";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+import "./hero-panel-playtime.scss";
 
 export function HeroPanelPlaytime() {
   const [lastTimePlayed, setLastTimePlayed] = useState("");
-
   const { game, isGameRunning } = useContext(gameDetailsContext);
-
   const { t } = useTranslation("game_details");
-
   const { numberFormatter } = useFormat();
-
   const { progress, lastPacket } = useDownload();
-
   const { formatDistance } = useDate();
 
   useEffect(() => {
@@ -56,8 +50,8 @@ export function HeroPanelPlaytime() {
     game.download?.status === "active" && lastPacket?.gameId === game.id;
 
   const downloadInProgressInfo = (
-    <div className={styles.downloadDetailsRow}>
-      <Link to="/downloads" className={styles.downloadsLink}>
+    <div className="hero-panel-playtime__download-details">
+      <Link to="/downloads" className="hero-panel-playtime__downloads-link">
         {game.download?.status === "active"
           ? t("download_in_progress")
           : t("download_paused")}
@@ -84,7 +78,6 @@ export function HeroPanelPlaytime() {
     return (
       <>
         <p>{t("playing_now")}</p>
-
         {hasDownload && downloadInProgressInfo}
       </>
     );
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.tsx b/src/renderer/src/pages/game-details/hero/hero-panel.tsx
index c93fc9f9..e9d110f0 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.tsx
@@ -4,10 +4,10 @@ import { useTranslation } from "react-i18next";
 import { useDate, useDownload } from "@renderer/hooks";
 
 import { HeroPanelActions } from "./hero-panel-actions";
-import * as styles from "./hero-panel.css";
 import { HeroPanelPlaytime } from "./hero-panel-playtime";
 
 import { gameDetailsContext } from "@renderer/context";
+import "./hero-panel.scss";
 
 export interface HeroPanelProps {
   isHeaderStuck: boolean;
@@ -54,30 +54,28 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
     game?.download?.status === "paused";
 
   return (
-    <>
-      <div
-        style={{ backgroundColor: gameColor }}
-        className={styles.panel({ stuck: isHeaderStuck })}
-      >
-        <div className={styles.content}>{getInfo()}</div>
-        <div className={styles.actions}>
-          <HeroPanelActions />
-        </div>
-
-        {showProgressBar && (
-          <progress
-            max={1}
-            value={
-              isGameDownloading
-                ? lastPacket?.progress
-                : game?.download?.progress
-            }
-            className={styles.progressBar({
-              disabled: game?.download?.status === "paused",
-            })}
-          />
-        )}
+    <div
+      style={{ backgroundColor: gameColor }}
+      className={`hero-panel ${isHeaderStuck ? "hero-panel--stuck" : ""}`}
+    >
+      <div className="hero-panel__content">{getInfo()}</div>
+      <div className="hero-panel__actions">
+        <HeroPanelActions />
       </div>
-    </>
+
+      {showProgressBar && (
+        <progress
+          max={1}
+          value={
+            isGameDownloading ? lastPacket?.progress : game?.download?.progress
+          }
+          className={`hero-panel__progress-bar ${
+            game?.download?.status === "paused"
+              ? "hero-panel__progress-bar--disabled"
+              : ""
+          }`}
+        />
+      )}
+    </div>
   );
 }
diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
index 8a872df9..6d788095 100644
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
@@ -2,7 +2,6 @@ import { useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Modal, TextField } from "@renderer/components";
 import type { LibraryGame } from "@types";
-import * as styles from "./game-options-modal.css";
 import { gameDetailsContext } from "@renderer/context";
 import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
 import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
@@ -10,6 +9,7 @@ import { RemoveGameFromLibraryModal } from "./remove-from-library-modal";
 import { ResetAchievementsModal } from "./reset-achievements-modal";
 import { FileDirectoryIcon, FileIcon } from "@primer/octicons-react";
 import { debounce } from "lodash-es";
+import "./game-options-modal.scss";
 
 export interface GameOptionsModalProps {
   visible: boolean;
@@ -21,7 +21,7 @@ export function GameOptionsModal({
   visible,
   game,
   onClose,
-}: GameOptionsModalProps) {
+}: Readonly<GameOptionsModalProps>) {
   const { t } = useTranslation("game_details");
 
   const { showSuccessToast, showErrorToast } = useToast();
@@ -192,14 +192,12 @@ export function GameOptionsModal({
         onClose={() => setShowDeleteModal(false)}
         deleteGame={handleDeleteGame}
       />
-
       <RemoveGameFromLibraryModal
         visible={showRemoveGameModal}
         onClose={() => setShowRemoveGameModal(false)}
         removeGameFromLibrary={handleRemoveGameFromLibrary}
         game={game}
       />
-
       <ResetAchievementsModal
         visible={showResetAchievementsModal}
         onClose={() => setShowResetAchievementsModal(false)}
@@ -213,59 +211,66 @@ export function GameOptionsModal({
         onClose={onClose}
         large={true}
       >
-        <div className={styles.optionsContainer}>
-          <div className={styles.gameOptionHeader}>
-            <h2>{t("executable_section_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
-              {t("executable_section_description")}
-            </h4>
+        <div className="game-options-modal__container">
+          <div className="game-options-modal__section">
+            <div className="game-options-modal__header">
+              <h2>{t("executable_section_title")}</h2>
+              <h4 className="game-options-modal__header-description">
+                {t("executable_section_description")}
+              </h4>
+            </div>
+
+            <div className="game-options-modal__executable-field">
+              <TextField
+                value={game.executablePath || ""}
+                readOnly
+                theme="dark"
+                disabled
+                placeholder={t("no_executable_selected")}
+                rightContent={
+                  <>
+                    <Button
+                      type="button"
+                      theme="outline"
+                      onClick={handleChangeExecutableLocation}
+                    >
+                      <FileIcon />
+                      {t("select_executable")}
+                    </Button>
+                    {game.executablePath && (
+                      <Button
+                        onClick={handleClearExecutablePath}
+                        theme="outline"
+                      >
+                        {t("clear")}
+                      </Button>
+                    )}
+                  </>
+                }
+              />
+
+              {game.executablePath && (
+                <div className="game-options-modal__executable-field-buttons">
+                  <Button
+                    type="button"
+                    theme="outline"
+                    onClick={handleOpenGameExecutablePath}
+                  >
+                    {t("open_folder")}
+                  </Button>
+                  <Button onClick={handleCreateShortcut} theme="outline">
+                    {t("create_shortcut")}
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
 
-          <TextField
-            value={game.executablePath || ""}
-            readOnly
-            theme="dark"
-            disabled
-            placeholder={t("no_executable_selected")}
-            rightContent={
-              <>
-                <Button
-                  type="button"
-                  theme="outline"
-                  onClick={handleChangeExecutableLocation}
-                >
-                  <FileIcon />
-                  {t("select_executable")}
-                </Button>
-                {game.executablePath && (
-                  <Button onClick={handleClearExecutablePath} theme="outline">
-                    {t("clear")}
-                  </Button>
-                )}
-              </>
-            }
-          />
-
-          {game.executablePath && (
-            <div className={styles.gameOptionRow}>
-              <Button
-                type="button"
-                theme="outline"
-                onClick={handleOpenGameExecutablePath}
-              >
-                {t("open_folder")}
-              </Button>
-              <Button onClick={handleCreateShortcut} theme="outline">
-                {t("create_shortcut")}
-              </Button>
-            </div>
-          )}
-
           {shouldShowWinePrefixConfiguration && (
-            <div className={styles.optionsContainer}>
-              <div className={styles.gameOptionHeader}>
+            <div className="game-options-modal__wine-prefix">
+              <div className="game-options-modal__header">
                 <h2>{t("wine_prefix")}</h2>
-                <h4 className={styles.gameOptionHeaderDescription}>
+                <h4 className="game-options-modal__header-description">
                   {t("wine_prefix_description")}
                 </h4>
               </div>
@@ -300,11 +305,13 @@ export function GameOptionsModal({
           )}
 
           {shouldShowLaunchOptionsConfiguration && (
-            <div className={styles.gameOptionHeader}>
-              <h2>{t("launch_options")}</h2>
-              <h4 className={styles.gameOptionHeaderDescription}>
-                {t("launch_options_description")}
-              </h4>
+            <div className="game-options-modal__launch-options">
+              <div className="game-options-modal__header">
+                <h2>{t("launch_options")}</h2>
+                <h4 className="game-options-modal__header-description">
+                  {t("launch_options_description")}
+                </h4>
+              </div>
               <TextField
                 value={launchOptions}
                 theme="dark"
@@ -321,72 +328,76 @@ export function GameOptionsModal({
             </div>
           )}
 
-          <div className={styles.gameOptionHeader}>
-            <h2>{t("downloads_secion_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
-              {t("downloads_section_description")}
-            </h4>
+          <div className="game-options-modal__downloads">
+            <div className="game-options-modal__header">
+              <h2>{t("downloads_secion_title")}</h2>
+              <h4 className="game-options-modal__header-description">
+                {t("downloads_section_description")}
+              </h4>
+            </div>
+
+            <div className="game-options-modal__row">
+              <Button
+                onClick={() => setShowRepacksModal(true)}
+                theme="outline"
+                disabled={deleting || isGameDownloading || !repacks.length}
+              >
+                {t("open_download_options")}
+              </Button>
+              {game.download?.downloadPath && (
+                <Button
+                  onClick={handleOpenDownloadFolder}
+                  theme="outline"
+                  disabled={deleting}
+                >
+                  {t("open_download_location")}
+                </Button>
+              )}
+            </div>
           </div>
 
-          <div className={styles.gameOptionRow}>
-            <Button
-              onClick={() => setShowRepacksModal(true)}
-              theme="outline"
-              disabled={deleting || isGameDownloading || !repacks.length}
-            >
-              {t("open_download_options")}
-            </Button>
-            {game.download?.downloadPath && (
+          <div className="game-options-modal__danger-zone">
+            <div className="game-options-modal__header">
+              <h2>{t("danger_zone_section_title")}</h2>
+              <h4 className="game-options-modal__danger-zone-description">
+                {t("danger_zone_section_description")}
+              </h4>
+            </div>
+
+            <div className="game-options-modal__danger-zone-buttons">
               <Button
-                onClick={handleOpenDownloadFolder}
-                theme="outline"
+                onClick={() => setShowRemoveGameModal(true)}
+                theme="danger"
                 disabled={deleting}
               >
-                {t("open_download_location")}
+                {t("remove_from_library")}
               </Button>
-            )}
-          </div>
 
-          <div className={styles.gameOptionHeader}>
-            <h2>{t("danger_zone_section_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
-              {t("danger_zone_section_description")}
-            </h4>
-          </div>
+              <Button
+                onClick={() => setShowResetAchievementsModal(true)}
+                theme="danger"
+                disabled={
+                  deleting ||
+                  isDeletingAchievements ||
+                  !hasAchievements ||
+                  !userDetails
+                }
+              >
+                {t("reset_achievements")}
+              </Button>
 
-          <div className={styles.gameOptionRow}>
-            <Button
-              onClick={() => setShowRemoveGameModal(true)}
-              theme="danger"
-              disabled={deleting}
-            >
-              {t("remove_from_library")}
-            </Button>
-
-            <Button
-              onClick={() => setShowResetAchievementsModal(true)}
-              theme="danger"
-              disabled={
-                deleting ||
-                isDeletingAchievements ||
-                !hasAchievements ||
-                !userDetails
-              }
-            >
-              {t("reset_achievements")}
-            </Button>
-
-            <Button
-              onClick={() => {
-                setShowDeleteModal(true);
-              }}
-              theme="danger"
-              disabled={
-                isGameDownloading || deleting || !game.download?.downloadPath
-              }
-            >
-              {t("remove_files")}
-            </Button>
+              <Button
+                onClick={() => {
+                  setShowDeleteModal(true);
+                }}
+                theme="danger"
+                disabled={
+                  isGameDownloading || deleting || !game.download?.downloadPath
+                }
+              >
+                {t("remove_files")}
+              </Button>
+            </div>
           </div>
         </div>
       </Modal>
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx
index 3e11be21..36ee24fd 100644
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx
@@ -7,7 +7,6 @@ import type {
 import { useTranslation } from "react-i18next";
 import { Button, Link } from "@renderer/components";
 
-import * as styles from "./sidebar.css";
 import { gameDetailsContext } from "@renderer/context";
 import { useDate, useFormat, useUserDetails } from "@renderer/hooks";
 import {
@@ -20,8 +19,8 @@ import { HowLongToBeatSection } from "./how-long-to-beat-section";
 import { howLongToBeatEntriesTable } from "@renderer/dexie";
 import { SidebarSection } from "../sidebar-section/sidebar-section";
 import { buildGameAchievementPath } from "@renderer/helpers";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { useSubscription } from "@renderer/hooks/use-subscription";
+import "./sidebar.scss";
 
 const achievementsPlaceholder: UserAchievement[] = [
   {
@@ -64,7 +63,6 @@ export function Sidebar() {
   }>({ isLoading: true, data: null });
 
   const { userDetails, hasActiveSubscription } = useUserDetails();
-
   const [activeRequirement, setActiveRequirement] =
     useState<keyof SteamAppDetails["pc_requirements"]>("minimum");
 
@@ -72,10 +70,8 @@ export function Sidebar() {
     useContext(gameDetailsContext);
 
   const { showHydraCloudModal } = useSubscription();
-
   const { t } = useTranslation("game_details");
   const { formatDateTime } = useDate();
-
   const { numberFormatter } = useFormat();
 
   useEffect(() => {
@@ -118,7 +114,7 @@ export function Sidebar() {
   }, [objectId, shop, gameTitle]);
 
   return (
-    <aside className={styles.contentSidebar}>
+    <aside className="content-sidebar">
       {userDetails === null && (
         <SidebarSection title={t("achievements")}>
           <div
@@ -133,21 +129,21 @@ export function Sidebar() {
               justifyContent: "center",
               alignItems: "center",
               flexDirection: "column",
-              gap: `${SPACING_UNIT}px`,
+              gap: "8px",
             }}
           >
             <LockIcon size={36} />
             <h3>{t("sign_in_to_see_achievements")}</h3>
           </div>
-          <ul className={styles.list} style={{ filter: "blur(4px)" }}>
-            {achievementsPlaceholder.map((achievement, index) => (
-              <li key={index}>
-                <div className={styles.listItem}>
+          <ul className="list" style={{ filter: "blur(4px)" }}>
+            {achievementsPlaceholder.map((achievement) => (
+              <li key={achievement.displayName}>
+                <div className="list__item">
                   <img
                     style={{ filter: "blur(8px)" }}
-                    className={styles.listItemImage({
-                      unlocked: achievement.unlocked,
-                    })}
+                    className={`list__item-image ${
+                      achievement.unlocked ? "" : "list__item-image--locked"
+                    }`}
                     src={achievement.icon}
                     alt={achievement.displayName}
                   />
@@ -164,6 +160,7 @@ export function Sidebar() {
           </ul>
         </SidebarSection>
       )}
+
       {userDetails && achievements && achievements.length > 0 && (
         <SidebarSection
           title={t("achievements_count", {
@@ -171,10 +168,10 @@ export function Sidebar() {
             achievementsCount: achievements.length,
           })}
         >
-          <ul className={styles.list}>
+          <ul className="list">
             {!hasActiveSubscription && (
               <button
-                className={styles.subscriptionRequiredButton}
+                className="subscription-required-button"
                 onClick={() => showHydraCloudModal("achievements")}
               >
                 <CloudOfflineIcon size={16} />
@@ -182,21 +179,21 @@ export function Sidebar() {
               </button>
             )}
 
-            {achievements.slice(0, 4).map((achievement, index) => (
-              <li key={index}>
+            {achievements.slice(0, 4).map((achievement) => (
+              <li key={achievement.displayName}>
                 <Link
                   to={buildGameAchievementPath({
                     shop: shop,
                     objectId: objectId!,
                     title: gameTitle,
                   })}
-                  className={styles.listItem}
+                  className="list__item"
                   title={achievement.description}
                 >
                   <img
-                    className={styles.listItemImage({
-                      unlocked: achievement.unlocked,
-                    })}
+                    className={`list__item-image ${
+                      achievement.unlocked ? "" : "list__item-image--locked"
+                    }`}
                     src={achievement.icon}
                     alt={achievement.displayName}
                   />
@@ -226,17 +223,17 @@ export function Sidebar() {
 
       {stats && (
         <SidebarSection title={t("stats")}>
-          <div className={styles.statsSection}>
-            <div className={styles.statsCategory}>
-              <p className={styles.statsCategoryTitle}>
+          <div className="stats__section">
+            <div className="stats__category">
+              <p className="stats__category-title">
                 <DownloadIcon size={18} />
                 {t("download_count")}
               </p>
               <p>{numberFormatter.format(stats?.downloadCount)}</p>
             </div>
 
-            <div className={styles.statsCategory}>
-              <p className={styles.statsCategoryTitle}>
+            <div className="stats__category">
+              <p className="stats__category-title">
                 <PeopleIcon size={18} />
                 {t("player_count")}
               </p>
@@ -252,9 +249,9 @@ export function Sidebar() {
       />
 
       <SidebarSection title={t("requirements")}>
-        <div className={styles.requirementButtonContainer}>
+        <div className="requirement__button-container">
           <Button
-            className={styles.requirementButton}
+            className="requirement__button"
             onClick={() => setActiveRequirement("minimum")}
             theme={activeRequirement === "minimum" ? "primary" : "outline"}
           >
@@ -262,7 +259,7 @@ export function Sidebar() {
           </Button>
 
           <Button
-            className={styles.requirementButton}
+            className="requirement__button"
             onClick={() => setActiveRequirement("recommended")}
             theme={activeRequirement === "recommended" ? "primary" : "outline"}
           >
@@ -271,7 +268,7 @@ export function Sidebar() {
         </div>
 
         <div
-          className={styles.requirementsDetails}
+          className="requirement__details"
           dangerouslySetInnerHTML={{
             __html:
               shopDetails?.pc_requirements?.[activeRequirement] ??