diff --git a/src/renderer/src/_theme.scss b/src/renderer/src/_theme.scss
new file mode 100644
index 00000000..50113a69
--- /dev/null
+++ b/src/renderer/src/_theme.scss
@@ -0,0 +1,21 @@
+$spacing-unit: 8px;
+
+$color-background: #1c1c1c;
+$color-dark-background: #151515;
+$color-muted: #c0c1c7;
+$color-body: #8e919b;
+$color-border: rgba(255, 255, 255, 0.15);
+$color-success: #1c9749;
+$color-danger: #e11d48;
+$color-warning: #ffc107;
+
+$opacity-disabled: 0.5;
+$opacity-active: 0.7;
+
+$size-body: 14px;
+$size-small: 12px;
+
+$z-index-toast: 5;
+$z-index-bottom-panel: 3;
+$z-index-title-bar: 4;
+$z-index-backdrop: 4;
diff --git a/src/renderer/src/app.css.ts b/src/renderer/src/app.css.ts
deleted file mode 100644
index 25c453c8..00000000
--- a/src/renderer/src/app.css.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import {
-  ComplexStyleRule,
-  createContainer,
-  globalStyle,
-  style,
-} from "@vanilla-extract/css";
-import { SPACING_UNIT, vars } from "./theme.css";
-
-export const appContainer = createContainer();
-
-globalStyle("*", {
-  boxSizing: "border-box",
-});
-
-globalStyle("::-webkit-scrollbar", {
-  width: "9px",
-  backgroundColor: vars.color.darkBackground,
-});
-
-globalStyle("::-webkit-scrollbar-track", {
-  backgroundColor: "rgba(255, 255, 255, 0.03)",
-});
-
-globalStyle("::-webkit-scrollbar-thumb", {
-  backgroundColor: "rgba(255, 255, 255, 0.08)",
-  borderRadius: "24px",
-});
-
-globalStyle("::-webkit-scrollbar-thumb:hover", {
-  backgroundColor: "rgba(255, 255, 255, 0.16)",
-});
-
-globalStyle("html, body, #root, main", {
-  height: "100%",
-});
-
-globalStyle("body", {
-  overflow: "hidden",
-  userSelect: "none",
-  fontFamily: "Noto Sans, sans-serif",
-  fontSize: vars.size.body,
-  color: vars.color.body,
-  margin: "0",
-});
-
-globalStyle("button", {
-  padding: "0",
-  backgroundColor: "transparent",
-  border: "none",
-  fontFamily: "inherit",
-});
-
-globalStyle("h1, h2, h3, h4, h5, h6, p", {
-  margin: 0,
-});
-
-globalStyle("p", {
-  lineHeight: "20px",
-});
-
-globalStyle("#root, main", {
-  display: "flex",
-});
-
-globalStyle("#root", {
-  flexDirection: "column",
-});
-
-globalStyle("main", {
-  overflow: "hidden",
-});
-
-globalStyle(
-  "input::-webkit-outer-spin-button, input::-webkit-inner-spin-button",
-  {
-    WebkitAppearance: "none",
-    margin: "0",
-  }
-);
-
-globalStyle("label", {
-  fontSize: vars.size.body,
-});
-
-globalStyle("input[type=number]", {
-  MozAppearance: "textfield",
-});
-
-globalStyle("img", {
-  WebkitUserDrag: "none",
-} as Record<string, string>);
-
-globalStyle("progress[value]", {
-  WebkitAppearance: "none",
-});
-
-export const container = style({
-  width: "100%",
-  height: "100%",
-  overflow: "hidden",
-  display: "flex",
-  flexDirection: "column",
-  containerName: appContainer,
-  containerType: "inline-size",
-});
-
-export const content = style({
-  overflowY: "auto",
-  alignItems: "center",
-  display: "flex",
-  flexDirection: "column",
-  position: "relative",
-  height: "100%",
-  background: `linear-gradient(0deg, ${vars.color.darkBackground} 50%, ${vars.color.background} 100%)`,
-});
-
-export const titleBar = style({
-  display: "flex",
-  width: "100%",
-  height: "35px",
-  minHeight: "35px",
-  backgroundColor: vars.color.darkBackground,
-  alignItems: "center",
-  padding: `0 ${SPACING_UNIT * 2}px`,
-  WebkitAppRegion: "drag",
-  zIndex: "4",
-  borderBottom: `1px solid ${vars.color.border}`,
-} as ComplexStyleRule);
-
-export const cloudText = style({
-  background: "linear-gradient(270deg, #16B195 50%, #3E62C0 100%)",
-  backgroundClip: "text",
-  color: "transparent",
-});
diff --git a/src/renderer/src/app.scss b/src/renderer/src/app.scss
index 18d46dd4..1623e83d 100644
--- a/src/renderer/src/app.scss
+++ b/src/renderer/src/app.scss
@@ -1,4 +1,4 @@
-@use "./scss/globals.scss";
+@import "../../scss/variables";
 
 * {
   box-sizing: border-box;
@@ -6,7 +6,7 @@
 
 ::-webkit-scrollbar {
   width: 9px;
-  background-color: globals.$dark-background-color;
+  background-color: $dark-background-color;
 }
 
 ::-webkit-scrollbar-track {
@@ -32,11 +32,9 @@ main {
 body {
   overflow: hidden;
   user-select: none;
-  font-family:
-    Noto Sans,
-    sans-serif;
-  font-size: globals.$body-font-size;
-  color: globals.$body-color;
+  font-family: "Noto Sans, sans-serif";
+  font-size: 14px; // Assuming vars.size.body is 14px
+  color: $body-color;
   margin: 0;
 }
 
@@ -81,7 +79,11 @@ input::-webkit-inner-spin-button {
 }
 
 label {
-  font-size: globals.$body-font-size;
+  font-size: 14px; // Assuming vars.size.body is 14px
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
 }
 
 img {
@@ -92,45 +94,43 @@ progress[value] {
   -webkit-appearance: none;
 }
 
-.container {
+.app-container {
   width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  container-name: globals.$app-container;
-  container-type: inline-size;
-
-  &__content {
-    overflow-y: auto;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    height: 100%;
-    background: linear-gradient(
-      0deg,
-      globals.$dark-background-color 50%,
-      globals.$background-color 100%
-    );
-  }
 }
 
-.title-bar {
+.app-container__content {
+  overflow-y: auto;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  background: linear-gradient(
+    0deg,
+    $dark-background-color 50%,
+    $background-color 100%
+  );
+}
+
+.app-container__title-bar {
   display: flex;
   width: 100%;
   height: 35px;
   min-height: 35px;
-  background-color: globals.$dark-background-color;
+  background-color: $dark-background-color;
   align-items: center;
-  padding: 0 calc(globals.$spacing-unit * 2);
+  padding: 0 $spacing-unit * 2;
   -webkit-app-region: drag;
-  z-index: 4;
-  border-bottom: 1px solid globals.$border-color;
-
-  &__cloud-text {
-    background: linear-gradient(270deg, #16b195 50%, #3e62c0 100%);
-    background-clip: text;
-    color: transparent;
-  }
+  z-index: $title-bar-z-index;
+  border-bottom: 1px solid $border-color;
+}
+
+.app-container__cloud-text {
+  background: linear-gradient(270deg, #16b195 50%, #3e62c0 100%);
+  background-clip: text;
+  color: transparent;
 }
diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx
index 31309256..a6b8a798 100644
--- a/src/renderer/src/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -275,10 +275,10 @@ export function App() {
       <main>
         <Sidebar />
 
-        <article className="container">
+        <article className="app-container">
           <Header />
 
-          <section ref={contentRef} className="container__content">
+          <section ref={contentRef} className="app-container__content">
             <Outlet />
           </section>
         </article>
diff --git a/src/renderer/src/components/avatar/avatar.scss b/src/renderer/src/components/avatar/avatar.scss
index 57ad6ebf..2745d0ed 100644
--- a/src/renderer/src/components/avatar/avatar.scss
+++ b/src/renderer/src/components/avatar/avatar.scss
@@ -1,14 +1,14 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .profile-avatar {
   border-radius: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: globals.$background-color;
-  border: solid 1px globals.$border-color;
+  background-color: $background-color;
+  border: solid 1px $border-color;
   cursor: pointer;
-  color: globals.$muted-color;
+  color: $muted-color;
   position: relative;
 
   &__image {
diff --git a/src/renderer/src/components/backdrop/backdrop.scss b/src/renderer/src/components/backdrop/backdrop.scss
index d62ff9a9..b06cdf92 100644
--- a/src/renderer/src/components/backdrop/backdrop.scss
+++ b/src/renderer/src/components/backdrop/backdrop.scss
@@ -1,4 +1,4 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .backdrop {
   animation-name: backdrop-fade-in;
@@ -10,9 +10,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: globals.$backdrop-z-index;
+  z-index: $backdrop-z-index;
   top: 0;
-  padding: calc(globals.$spacing-unit * 3);
+  padding: calc($spacing-unit * 3);
   backdrop-filter: blur(2px);
   transition: all ease 0.2s;
 
@@ -23,7 +23,7 @@
   }
 
   &--windows {
-    padding-top: calc(#{globals.$spacing-unit * 3} + 35);
+    padding-top: calc(#{$spacing-unit * 3} + 35);
   }
 }
 
diff --git a/src/renderer/src/components/badge/badge.scss b/src/renderer/src/components/badge/badge.scss
index f32c398f..b1c35b7f 100644
--- a/src/renderer/src/components/badge/badge.scss
+++ b/src/renderer/src/components/badge/badge.scss
@@ -1,10 +1,10 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .badge {
-  color: globals.$muted-color;
+  color: $muted-color;
   font-size: 10px;
-  padding: calc(globals.$spacing-unit / 2) globals.$spacing-unit;
-  border: solid 1px globals.$muted-color;
+  padding: calc($spacing-unit / 2) $spacing-unit;
+  border: solid 1px $muted-color;
   border-radius: 4px;
   display: flex;
   align-items: center;
diff --git a/src/renderer/src/components/bottom-panel/bottom-panel.scss b/src/renderer/src/components/bottom-panel/bottom-panel.scss
index 5103e916..4dfebb8a 100644
--- a/src/renderer/src/components/bottom-panel/bottom-panel.scss
+++ b/src/renderer/src/components/bottom-panel/bottom-panel.scss
@@ -1,23 +1,23 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .bottom-panel {
   width: 100%;
-  border-top: solid 1px globals.$border-color;
-  background-color: globals.$background-color;
-  padding: calc(globals.$spacing-unit / 2) calc(globals.$spacing-unit * 2);
+  border-top: solid 1px $border-color;
+  background-color: $background-color;
+  padding: calc($spacing-unit / 2) calc($spacing-unit * 2);
   display: flex;
   align-items: center;
   transition: all ease 0.2s;
   justify-content: space-between;
   position: relative;
-  z-index: globals.$bottom-panel-z-index;
+  z-index: $bottom-panel-z-index;
 
   &__downloads-button {
-    color: globals.$body-color;
+    color: $body-color;
     border-bottom: solid 1px transparent;
 
     &:hover {
-      border-bottom: solid 1px globals.$body-color;
+      border-bottom: solid 1px $body-color;
       cursor: pointer;
     }
   }
diff --git a/src/renderer/src/components/button/button.scss b/src/renderer/src/components/button/button.scss
index 0dea5576..cf33bbe1 100644
--- a/src/renderer/src/components/button/button.scss
+++ b/src/renderer/src/components/button/button.scss
@@ -1,8 +1,8 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .button {
-  padding: globals.$spacing-unit globals.$spacing-unit * 2;
-  background-color: globals.$muted-color;
+  padding: $spacing-unit $spacing-unit * 2;
+  background-color: $muted-color;
   border-radius: 8px;
   border: solid 1px transparent;
   transition: all ease 0.2s;
@@ -11,14 +11,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: globals.$spacing-unit;
+  gap: $spacing-unit;
 
   &:active {
-    opacity: globals.$active-opacity;
+    opacity: $active-opacity;
   }
 
   &:disabled {
-    opacity: globals.$disabled-opacity;
+    opacity: $disabled-opacity;
     cursor: not-allowed;
   }
 
@@ -28,14 +28,14 @@
     }
 
     &:disabled {
-      background-color: globals.$muted-color;
+      background-color: $muted-color;
     }
   }
 
   &--outline {
     background-color: transparent;
-    border: solid 1px globals.$border-color;
-    color: globals.$muted-color;
+    border: solid 1px $border-color;
+    color: $muted-color;
 
     &:hover {
       background-color: rgba(255, 255, 255, 0.1);
@@ -47,14 +47,14 @@
   }
 
   &--dark {
-    background-color: globals.$dark-background-color;
-    color: globals.$muted-color;
+    background-color: $dark-background-color;
+    color: $muted-color;
   }
 
   &--danger {
     border-color: transparent;
-    background-color: globals.$danger-color;
-    color: globals.$muted-color;
+    background-color: $danger-color;
+    color: $muted-color;
 
     &:hover {
       background-color: #b3203f;
diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.scss b/src/renderer/src/components/checkbox-field/checkbox-field.scss
index 06235687..d895d6d8 100644
--- a/src/renderer/src/components/checkbox-field/checkbox-field.scss
+++ b/src/renderer/src/components/checkbox-field/checkbox-field.scss
@@ -1,23 +1,23 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .checkbox-field {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: globals.$spacing-unit;
+  gap: $spacing-unit;
   cursor: pointer;
 
   &__checkbox {
     width: 20px;
     height: 20px;
     border-radius: 4px;
-    background-color: globals.$dark-background-color;
+    background-color: $dark-background-color;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     transition: all ease 0.2s;
-    border: solid 1px globals.$border-color;
+    border: solid 1px $border-color;
     &:hover {
       border-color: rgba(255, 255, 255, 0.5);
     }
diff --git a/src/renderer/src/components/confirmation-modal/confirmation-modal.scss b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss
index 428818c4..8d816151 100644
--- a/src/renderer/src/components/confirmation-modal/confirmation-modal.scss
+++ b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss
@@ -1,14 +1,14 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .confirmation-modal {
   display: flex;
   flex-direction: column;
-  gap: calc(globals.$spacing-unit * 2);
+  gap: calc($spacing-unit * 2);
 
   &__actions {
     display: flex;
     align-self: flex-end;
-    gap: calc(globals.$spacing-unit * 2);
+    gap: calc($spacing-unit * 2);
   }
   &__description {
     font-size: 16px;
diff --git a/src/renderer/src/components/dropdown-menu/dropdown-menu.scss b/src/renderer/src/components/dropdown-menu/dropdown-menu.scss
index 0f73c608..847ccfb7 100644
--- a/src/renderer/src/components/dropdown-menu/dropdown-menu.scss
+++ b/src/renderer/src/components/dropdown-menu/dropdown-menu.scss
@@ -1,9 +1,9 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .dropdown-menu {
   &__content {
-    background-color: globals.$dark-background-color;
-    border: 1px solid globals.$border-color;
+    background-color: $dark-background-color;
+    border: 1px solid $border-color;
     border-radius: 6px;
     min-width: 200px;
     flex-direction: column;
@@ -20,13 +20,13 @@
     padding: 4px 12px;
     font-size: 14px;
     font-weight: 500;
-    color: globals.$muted-color;
+    color: $muted-color;
   }
 
   &__separator {
     width: 100%;
     height: 1px;
-    background-color: globals.$border-color;
+    background-color: $border-color;
   }
 
   &__item {
@@ -49,12 +49,12 @@
   }
 
   &:not(&__item--disabled) &__item:hover {
-    background-color: globals.$background-color;
-    color: globals.$muted-color;
+    background-color: $background-color;
+    color: $muted-color;
   }
 
   &__item:focus {
-    background-color: globals.$background-color;
+    background-color: $background-color;
     outline: none;
   }
 
diff --git a/src/renderer/src/components/game-card/game-card.scss b/src/renderer/src/components/game-card/game-card.scss
index ee4a22b1..060069ed 100644
--- a/src/renderer/src/components/game-card/game-card.scss
+++ b/src/renderer/src/components/game-card/game-card.scss
@@ -1,4 +1,4 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .game-card {
   width: 100%;
@@ -7,12 +7,12 @@
   overflow: hidden;
   border-radius: 4px;
   transition: all ease 0.2s;
-  border: solid 1px globals.$border-color;
+  border: solid 1px $border-color;
   cursor: pointer;
   z-index: 1;
 
   &:active {
-    opacity: globals.$active-opacity;
+    opacity: $active-opacity;
   }
 
   &__backdrop {
@@ -37,10 +37,10 @@
 
   &__content {
     color: #dadbe1;
-    padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
+    padding: $spacing-unit calc($spacing-unit * 2);
     display: flex;
     align-items: flex-start;
-    gap: globals.$spacing-unit;
+    gap: $spacing-unit;
     flex-direction: column;
     transition: all ease 0.2s;
     transform: translateY(24px);
@@ -56,21 +56,21 @@
     display: flex;
     margin: 0;
     padding: 0;
-    gap: globals.$spacing-unit;
+    gap: $spacing-unit;
     flex-wrap: wrap;
     list-style: none;
   }
 
   &__specifics {
     display: flex;
-    gap: calc(globals.$spacing-unit * 2);
+    gap: calc($spacing-unit * 2);
     justify-content: center;
   }
 
   &__specifics-item {
-    gap: globals.$spacing-unit;
+    gap: $spacing-unit;
     display: flex;
-    color: globals.$muted-color;
+    color: $muted-color;
     font-size: 12px;
     align-items: flex-end;
   }
@@ -78,8 +78,8 @@
   &__title-container {
     display: flex;
     align-items: center;
-    gap: globals.$spacing-unit;
-    color: globals.$muted-color;
+    gap: $spacing-unit;
+    color: $muted-color;
   }
 
   &__shop-icon {
@@ -89,7 +89,7 @@
   }
 
   &__no-download-label {
-    color: globals.$body-color;
+    color: $body-color;
     font-weight: bold;
   }
 
diff --git a/src/renderer/src/components/header/header.scss b/src/renderer/src/components/header/header.scss
index ef3090e3..44cb3f20 100644
--- a/src/renderer/src/components/header/header.scss
+++ b/src/renderer/src/components/header/header.scss
@@ -1,16 +1,16 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: calc(globals.$spacing-unit * 2);
+  gap: calc($spacing-unit * 2);
   -webkit-app-region: drag;
   width: 100%;
-  padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
-  color: globals.$muted-color;
-  border-bottom: solid 1px globals.$border-color;
-  background-color: globals.$dark-background-color;
+  padding: calc($spacing-unit * 2) calc($spacing-unit * 3);
+  color: $muted-color;
+  border-bottom: solid 1px $border-color;
+  background-color: $dark-background-color;
 
   &--dragging-disabled {
     -webkit-app-region: no-drag;
@@ -21,13 +21,13 @@
   }
 
   &__search {
-    background-color: globals.$background-color;
+    background-color: $background-color;
     display: inline-flex;
     transition: all ease 0.2s;
     width: 200px;
     align-items: center;
     border-radius: 8px;
-    border: solid 1px globals.$border-color;
+    border: solid 1px $border-color;
     height: 40px;
     -webkit-app-region: no-drag;
     &:hover {
@@ -60,7 +60,7 @@
     color: inherit;
     cursor: pointer;
     transition: all ease 0.2s;
-    padding: globals.$spacing-unit;
+    padding: $spacing-unit;
 
     &:hover {
       color: #dadbe1;
@@ -70,13 +70,13 @@
   &__section {
     display: flex;
     align-items: center;
-    gap: calc(globals.$spacing-unit * 2);
+    gap: calc($spacing-unit * 2);
     height: 100%;
     overflow: hidden;
   }
 
   &__back-button {
-    color: globals.$body-color;
+    color: $body-color;
     cursor: pointer;
     -webkit-app-region: no-drag;
     position: absolute;
@@ -108,6 +108,18 @@
       width: calc(100% - 28px);
     }
   }
+
+  &__new-version-link {
+    display: flex;
+    align-items: center;
+    gap: $spacing-unit;
+    color: $body-color;
+    font-size: $new-version-font-size;
+  }
+
+  &__new-version-icon {
+    color: $success-color;
+  }
 }
 
 @keyframes slide-in {
diff --git a/src/renderer/src/components/hero/hero.scss b/src/renderer/src/components/hero/hero.scss
index ea14c059..4e30974a 100644
--- a/src/renderer/src/components/hero/hero.scss
+++ b/src/renderer/src/components/hero/hero.scss
@@ -1,4 +1,4 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .hero {
   width: 100%;
@@ -10,7 +10,7 @@
   overflow: hidden;
   box-shadow: 0px 0px 15px 0px #000000;
   cursor: pointer;
-  border: solid 1px globals.$border-color;
+  border: solid 1px $border-color;
   z-index: 1;
 
   &__media {
@@ -22,9 +22,10 @@
     height: 100%;
     transition: all ease 0.2s;
     image-rendering: revert;
-  }
-  &:hover &__media {
-    transform: scale(1.02);
+
+    &:hover {
+      transform: scale(1.02);
+    }
   }
 
   &__backdrop {
@@ -38,17 +39,17 @@
 
   &__description {
     max-width: 700px;
-    color: globals.$muted-color;
+    color: $muted-color;
     text-align: left;
     line-height: 20px;
-    margin-top: calc(globals.$spacing-unit * 2);
+    margin-top: $spacing-unit * 2;
   }
 
   &__content {
     width: 100%;
     height: 100%;
-    padding: calc(globals.$spacing-unit * 4) calc(globals.$spacing-unit * 3);
-    gap: calc(globals.$spacing-unit * 2);
+    padding: $spacing-unit * 4 $spacing-unit * 3;
+    gap: $spacing-unit * 2;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
diff --git a/src/renderer/src/components/link/link.scss b/src/renderer/src/components/link/link.scss
index 170f10f6..905edf1e 100644
--- a/src/renderer/src/components/link/link.scss
+++ b/src/renderer/src/components/link/link.scss
@@ -1,6 +1,9 @@
+@import "../../scss/variables";
+
 .link {
   text-decoration: none;
-  color: #c0c1c7;
+  color: $muted-color;
+
   &:hover {
     text-decoration: underline;
   }
diff --git a/src/renderer/src/components/modal/modal.scss b/src/renderer/src/components/modal/modal.scss
index dbaee730..5bf420d6 100644
--- a/src/renderer/src/components/modal/modal.scss
+++ b/src/renderer/src/components/modal/modal.scss
@@ -1,15 +1,15 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .modal {
   animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
     running;
-  background-color: globals.$background-color;
+  background-color: $background-color;
   border-radius: 4px;
   min-width: 400px;
   max-width: 600px;
-  color: globals.$body-color;
+  color: $body-color;
   max-height: 100%;
-  border: solid 1px globals.$border-color;
+  border: solid 1px $border-color;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -27,14 +27,14 @@
   &__content {
     height: 100%;
     overflow: auto;
-    padding: calc(globals.$spacing-unit * 3) calc(globals.$spacing-unit * 2);
+    padding: calc($spacing-unit * 3) calc($spacing-unit * 2);
   }
 
   &__header {
     display: flex;
-    gap: globals.$spacing-unit;
-    padding: calc(globals.$spacing-unit * 2);
-    border-bottom: solid 1px globals.$border-color;
+    gap: $spacing-unit;
+    padding: calc($spacing-unit * 2);
+    border-bottom: solid 1px $border-color;
     justify-content: space-between;
     align-items: center;
   }
@@ -50,7 +50,7 @@
   }
 
   &__close-button-icon {
-    color: globals.$body-color;
+    color: $body-color;
   }
 }
 
diff --git a/src/renderer/src/components/select-field/select-field.scss b/src/renderer/src/components/select-field/select-field.scss
index 38dfc65b..74c41c5c 100644
--- a/src/renderer/src/components/select-field/select-field.scss
+++ b/src/renderer/src/components/select-field/select-field.scss
@@ -1,4 +1,4 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .select-field {
   display: inline-flex;
@@ -6,7 +6,7 @@
   width: fit-content;
   align-items: center;
   border-radius: 8px;
-  border: 1px solid globals.$border-color;
+  border: 1px solid $border-color;
   height: 40px;
   min-height: 40px;
   &:hover {
@@ -18,15 +18,15 @@
   }
 
   &--primary {
-    background-color: globals.$dark-background-color;
+    background-color: $dark-background-color;
   }
 
   &--dark {
-    background-color: globals.$background-color;
+    background-color: $background-color;
   }
 
   &__option {
-    background-color: globals.$dark-background-color;
+    background-color: $dark-background-color;
     border-right: 4px solid;
     border-color: transparent;
     border-radius: 8px;
@@ -36,14 +36,14 @@
     color: #dadbe1;
     cursor: default;
     font-family: inherit;
-    font-size: globals.$body-font-size;
+    font-size: $body-font-size;
     text-overflow: ellipsis;
-    padding: globals.$spacing-unit;
+    padding: $spacing-unit;
   }
 
   &__label {
-    margin-bottom: globals.$spacing-unit;
+    margin-bottom: $spacing-unit;
     display: block;
-    color: globals.$body-color;
+    color: $body-color;
   }
 }
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.scss b/src/renderer/src/components/sidebar/sidebar-profile.scss
index 9a6e6bbb..a6014d70 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.scss
+++ b/src/renderer/src/components/sidebar/sidebar-profile.scss
@@ -1,21 +1,22 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .sidebar-profile {
   position: relative;
   display: flex;
   align-items: center;
-  gap: globals.$spacing-unit;
-  padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
+  gap: $spacing-unit;
+  padding: $spacing-unit $spacing-unit * 2;
 
   &__button {
     display: flex;
     cursor: pointer;
     transition: all ease 0.1s;
-    color: globals.$muted-color;
+    color: $muted-color;
     width: 100%;
     overflow: hidden;
     border-radius: 4px;
-    padding: globals.$spacing-unit globals.$spacing-unit;
+    padding: $spacing-unit $spacing-unit;
+
     &:hover {
       background-color: rgba(255, 255, 255, 0.15);
     }
@@ -24,7 +25,7 @@
   &__button-content {
     display: flex;
     align-items: center;
-    gap: calc(globals.$spacing-unit + globals.$spacing-unit / 2);
+    gap: $spacing-unit + $spacing-unit / 2;
     width: 100%;
   }
 
@@ -38,7 +39,7 @@
 
   &__button-title {
     font-weight: bold;
-    font-size: globals.$body-font-size;
+    font-size: 14px;
     width: 100%;
     text-align: left;
     overflow: hidden;
@@ -47,23 +48,24 @@
   }
 
   &__friends-button {
-    color: globals.$muted-color;
+    color: $muted-color;
     cursor: pointer;
     border-radius: 50%;
     width: 40px;
     min-width: 40px;
     min-height: 40px;
     height: 40px;
-    background-color: globals.$background-color;
+    background-color: $background-color;
     position: relative;
     transition: all ease 0.3s;
+
     &:hover {
       background-color: rgba(255, 255, 255, 0.15);
     }
   }
 
   &__friends-button-badge {
-    background-color: globals.$success-color;
+    background-color: $success-color;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/renderer/src/components/sidebar/sidebar.scss b/src/renderer/src/components/sidebar/sidebar.scss
index c11a1041..e4ebbdf5 100644
--- a/src/renderer/src/components/sidebar/sidebar.scss
+++ b/src/renderer/src/components/sidebar/sidebar.scss
@@ -1,4 +1,4 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .sidebar {
   background-color: globals.$dark-background-color;
diff --git a/src/renderer/src/components/text-field/text-field.scss b/src/renderer/src/components/text-field/text-field.scss
index c84e8eab..428485f8 100644
--- a/src/renderer/src/components/text-field/text-field.scss
+++ b/src/renderer/src/components/text-field/text-field.scss
@@ -1,75 +1,75 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .text-field-container {
   flex: 1;
-  gap: globals.$spacing-unit;
+  gap: $spacing-unit;
   display: flex;
   flex-direction: column;
+}
 
-  &__text-field {
-    display: inline-flex;
-    transition: all ease 0.2s;
-    width: 100%;
-    align-items: center;
-    border-radius: 8px;
-    border: solid 1px globals.$border-color;
-    height: 40px;
-    min-height: 40px;
+.text-field {
+  display: inline-flex;
+  transition: all ease 0.2s;
+  width: 100%;
+  align-items: center;
+  border-radius: 8px;
+  border: solid 1px $border-color;
+  height: 40px;
+  min-height: 40px;
 
-    &:hover {
-      border-color: rgba(255, 255, 255, 0.5);
-    }
-
-    &--primary {
-      background-color: globals.$dark-background-color;
-    }
-
-    &--dark {
-      background-color: globals.$background-color;
-    }
-
-    &--has-error {
-      border-color: globals.$danger-color;
-    }
-
-    &--focused {
-      border-color: #dadbe1;
-    }
+  &--primary {
+    background-color: $dark-background-color;
   }
 
-  &__text-field-input {
-    background-color: transparent;
-    border: none;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    color: #dadbe1;
-    cursor: default;
-    font-family: inherit;
-    text-overflow: ellipsis;
-    padding: globals.$spacing-unit;
-
-    &:focus {
-      cursor: text;
-    }
-
-    &--read-only {
-      text-overflow: inherit;
-    }
+  &--dark {
+    background-color: $background-color;
   }
 
-  &__toggle-password-button {
-    cursor: pointer;
-    color: globals.$muted-color;
-    padding: globals.$spacing-unit;
+  &--has-error {
+    border-color: $danger-color;
   }
 
-  &__text-field-wrapper {
-    display: flex;
-    gap: globals.$spacing-unit;
+  &--focused {
+    border-color: $search-border-color-focused;
   }
 
-  &__error-label {
-    color: globals.$danger-color;
+  &:not(&--focused):hover {
+    border-color: $search-border-color-hover;
   }
 }
+
+.text-field__input {
+  background-color: transparent;
+  border: none;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  color: $search-input-color;
+  cursor: default;
+  font-family: inherit;
+  text-overflow: ellipsis;
+  padding: $spacing-unit;
+
+  &:focus {
+    cursor: text;
+  }
+
+  &--read-only {
+    text-overflow: inherit;
+  }
+}
+
+.text-field__toggle-password-button {
+  cursor: pointer;
+  color: $muted-color;
+  padding: $spacing-unit;
+}
+
+.text-field__wrapper {
+  display: flex;
+  gap: $spacing-unit;
+}
+
+.text-field__error-label {
+  color: $danger-color;
+}
diff --git a/src/renderer/src/components/toast/toast.scss b/src/renderer/src/components/toast/toast.scss
index 796475a0..918f5442 100644
--- a/src/renderer/src/components/toast/toast.scss
+++ b/src/renderer/src/components/toast/toast.scss
@@ -1,87 +1,87 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
-$toast-height: 80px;
+@keyframes slideIn {
+  0% {
+    transform: translateY(96px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(96px);
+  }
+}
 
 .toast {
   animation-duration: 0.2s;
   animation-timing-function: ease-in-out;
-  max-height: $toast-height;
+  max-height: 80px;
   position: fixed;
-  background-color: globals.$background-color;
+  background-color: $background-color;
   border-radius: 4px;
-  border: solid 1px globals.$border-color;
-  right: calc(globals.$spacing-unit * 2);
-  //bottom panel height + 16px
-  bottom: calc(26px + #{globals.$spacing-unit * 2});
+  border: solid 1px $border-color;
+  right: $spacing-unit * 2;
+  bottom: 42px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  z-index: globals.$toast-z-index;
+  z-index: $toast-z-index;
   max-width: 500px;
-  animation-name: slide-in;
-  transform: translateY(0);
 
   &--closing {
-    animation-name: slide-out;
-    transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
+    animation-name: slideOut;
+    transform: translateY(96px);
   }
 
-  &__content {
-    display: flex;
-    gap: calc(globals.$spacing-unit * 2);
-    padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 2);
-    justify-content: center;
-    align-items: center;
-  }
-
-  &__progress {
-    width: 100%;
-    height: 5px;
-    &::-webkit-progress-bar {
-      background-color: globals.$dark-background-color;
-    }
-    &::-webkit-progress-value {
-      background-color: globals.$muted-color;
-    }
-  }
-
-  &__close-button {
-    color: globals.$body-color;
-    cursor: pointer;
-    padding: 0;
-    margin: 0;
-  }
-
-  &__success-icon {
-    color: globals.$success-color;
-  }
-
-  &__error-icon {
-    color: globals.$danger-color;
-  }
-
-  &__warning-icon {
-    color: globals.$warning-color;
-  }
-}
-
-@keyframes slide-in {
-  0% {
-    transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
-  }
-
-  100% {
+  &--opening {
+    animation-name: slideIn;
     transform: translateY(0);
   }
 }
 
-@keyframes slide-out {
-  0% {
-    transform: translateY(0);
+.toast__content {
+  display: flex;
+  gap: $spacing-unit * 2;
+  padding: $spacing-unit * 2;
+  justify-content: center;
+  align-items: center;
+}
+
+.toast__progress {
+  width: 100%;
+  height: 5px;
+
+  &::-webkit-progress-bar {
+    background-color: $dark-background-color;
   }
 
-  100% {
-    transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
+  &::-webkit-progress-value {
+    background-color: $muted-color;
   }
 }
+
+.toast__close-button {
+  color: $body-color;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+}
+
+.toast__success-icon {
+  color: $success-color;
+}
+
+.toast__error-icon {
+  color: $danger-color;
+}
+
+.toast__warning-icon {
+  color: $warning-color;
+}
diff --git a/src/renderer/src/pages/achievements/achievement-panel.css.ts b/src/renderer/src/pages/achievements/achievement-panel.css.ts
deleted file mode 100644
index f8daeab9..00000000
--- a/src/renderer/src/pages/achievements/achievement-panel.css.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const panel = style({
-  width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
-  backgroundColor: vars.color.background,
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "start",
-  justifyContent: "space-between",
-  borderBottom: `solid 1px ${vars.color.border}`,
-});
-
-export const content = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  justifyContent: "center",
-});
-
-export const actions = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadDetailsRow = style({
-  gap: `${SPACING_UNIT}px`,
-  display: "flex",
-  color: vars.color.body,
-  alignItems: "center",
-});
-
-export const downloadsLink = style({
-  color: vars.color.body,
-  textDecoration: "underline",
-});
-
-export const progressBar = recipe({
-  base: {
-    position: "absolute",
-    bottom: "0",
-    left: "0",
-    width: "100%",
-    height: "3px",
-    transition: "all ease 0.2s",
-    "::-webkit-progress-bar": {
-      backgroundColor: "transparent",
-    },
-    "::-webkit-progress-value": {
-      backgroundColor: vars.color.muted,
-    },
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: vars.opacity.disabled,
-      },
-    },
-  },
-});
-
-export const link = style({
-  textAlign: "start",
-  color: vars.color.body,
-  ":hover": {
-    textDecoration: "underline",
-    cursor: "pointer",
-  },
-});
diff --git a/src/renderer/src/pages/achievements/achievement-panel.scss b/src/renderer/src/pages/achievements/achievement-panel.scss
new file mode 100644
index 00000000..0f048036
--- /dev/null
+++ b/src/renderer/src/pages/achievements/achievement-panel.scss
@@ -0,0 +1,66 @@
+@import "../../scss/variables";
+
+.achievement-panel {
+  width: 100%;
+  padding: #{$spacing-unit * 2} #{$spacing-unit * 3};
+  background-color: $color-background;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  border-bottom: solid 1px $color-border;
+
+  &__content {
+    display: flex;
+    gap: $spacing-unit;
+    justify-content: center;
+  }
+
+  &__actions {
+    display: flex;
+    gap: $spacing-unit;
+  }
+
+  &__download-details-row {
+    gap: $spacing-unit;
+    display: flex;
+    color: $color-body;
+    align-items: center;
+  }
+
+  &__downloads-link {
+    color: $color-body;
+    text-decoration: underline;
+  }
+
+  &__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    transition: all ease 0.2s;
+
+    &::-webkit-progress-bar {
+      background-color: transparent;
+    }
+
+    &::-webkit-progress-value {
+      background-color: $color-muted;
+    }
+
+    &--disabled {
+      opacity: $opacity-disabled;
+    }
+  }
+
+  &__link {
+    text-align: start;
+    color: $color-body;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/achievements/achievements.css.ts b/src/renderer/src/pages/achievements/achievements.css.ts
deleted file mode 100644
index 242ed6f6..00000000
--- a/src/renderer/src/pages/achievements/achievements.css.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import { SPACING_UNIT, vars } from "../../theme.css";
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const HERO_HEIGHT = 150;
-const LOGO_HEIGHT = 100;
-const LOGO_MAX_WIDTH = 200;
-
-export const wrapper = style({
-  display: "flex",
-  flexDirection: "column",
-  overflow: "hidden",
-  width: "100%",
-  height: "100%",
-  transition: "all ease 0.3s",
-});
-
-export const hero = style({
-  width: "100%",
-  height: `${HERO_HEIGHT}px`,
-  minHeight: `${HERO_HEIGHT}px`,
-  display: "flex",
-  flexDirection: "column",
-  position: "relative",
-  transition: "all ease 0.2s",
-});
-
-export const heroContent = style({
-  padding: `${SPACING_UNIT * 2}px`,
-  width: "100%",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-});
-
-export const gameLogo = style({
-  width: LOGO_MAX_WIDTH,
-  height: LOGO_HEIGHT,
-  objectFit: "contain",
-  transition: "all ease 0.2s",
-  ":hover": {
-    transform: "scale(1.05)",
-  },
-});
-
-export const container = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  overflow: "auto",
-  zIndex: "1",
-});
-
-export const tableHeader = recipe({
-  base: {
-    width: "100%",
-    backgroundColor: vars.color.darkBackground,
-    transition: "all ease 0.2s",
-    borderBottom: `solid 1px ${vars.color.border}`,
-    position: "sticky",
-    top: "0",
-    zIndex: "1",
-  },
-  variants: {
-    stuck: {
-      true: {
-        boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.8)",
-      },
-    },
-  },
-});
-
-export const list = style({
-  listStyle: "none",
-  margin: "0",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-  padding: `${SPACING_UNIT * 2}px`,
-  width: "100%",
-  backgroundColor: vars.color.background,
-});
-
-export const listItem = style({
-  transition: "all ease 0.1s",
-  color: vars.color.muted,
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT * 2}px`,
-  alignItems: "center",
-  textAlign: "left",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    textDecoration: "none",
-  },
-});
-
-export const listItemImage = recipe({
-  base: {
-    width: "54px",
-    height: "54px",
-    borderRadius: "4px",
-    objectFit: "cover",
-  },
-  variants: {
-    unlocked: {
-      false: {
-        filter: "grayscale(100%)",
-      },
-    },
-  },
-});
-
-export const achievementsProgressBar = style({
-  width: "100%",
-  height: "8px",
-  transition: "all ease 0.2s",
-  "::-webkit-progress-bar": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    borderRadius: "4px",
-  },
-  "::-webkit-progress-value": {
-    backgroundColor: vars.color.muted,
-    borderRadius: "4px",
-  },
-});
-
-export const heroLogoBackdrop = style({
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-end",
-});
-
-export const heroImageSkeleton = style({
-  height: "150px",
-});
-
-export const heroPanelSkeleton = style({
-  width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  height: "72px",
-  borderBottom: `solid 1px ${vars.color.border}`,
-});
-
-export const listItemSkeleton = style({
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT * 2}px`,
-});
-
-export const profileAvatar = style({
-  height: "54px",
-  width: "54px",
-  borderRadius: "4px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  position: "relative",
-  objectFit: "cover",
-});
-
-export const profileAvatarSmall = style({
-  height: "32px",
-  width: "32px",
-  borderRadius: "4px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  position: "relative",
-  objectFit: "cover",
-});
-
-export const subscriptionRequiredButton = style({
-  textDecoration: "none",
-  display: "flex",
-  justifyContent: "center",
-  width: "100%",
-  gap: `${SPACING_UNIT / 2}px`,
-  color: vars.color.body,
-  cursor: "pointer",
-  ":hover": {
-    textDecoration: "underline",
-  },
-});
diff --git a/src/renderer/src/pages/achievements/achievements.scss b/src/renderer/src/pages/achievements/achievements.scss
new file mode 100644
index 00000000..c7d4239d
--- /dev/null
+++ b/src/renderer/src/pages/achievements/achievements.scss
@@ -0,0 +1,192 @@
+@import "../../scss/variables";
+
+$hero-height: 150px;
+$logo-height: 100px;
+$logo-max-width: 200px;
+
+.achievements {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    transition: all ease 0.3s;
+  }
+
+  &__hero {
+    width: 100%;
+    height: $hero-height;
+    min-height: $hero-height;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: all ease 0.2s;
+  }
+
+  &__hero-content {
+    padding: #{$spacing-unit * 2};
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__game-logo {
+    width: $logo-max-width;
+    height: $logo-height;
+    object-fit: contain;
+    transition: all ease 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    z-index: 1;
+  }
+
+  &__table-header {
+    width: 100%;
+    background-color: $dark-background-color;
+    transition: all ease 0.2s;
+    border-bottom: solid 1px $border-color;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+
+    &--stuck {
+      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
+    }
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 2};
+    padding: #{$spacing-unit * 2};
+    width: 100%;
+    background-color: $background-color;
+  }
+
+  &__list-item {
+    transition: all ease 0.1s;
+    color: $muted-color;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    padding: $spacing-unit;
+    gap: #{$spacing-unit * 2};
+    align-items: center;
+    text-align: left;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      text-decoration: none;
+    }
+  }
+
+  &__list-item-image {
+    width: 54px;
+    height: 54px;
+    border-radius: 4px;
+    object-fit: cover;
+
+    &--unlocked {
+      filter: grayscale(100%);
+    }
+  }
+
+  &__achievements-progress-bar {
+    width: 100%;
+    height: 8px;
+    transition: all ease 0.2s;
+
+    &::-webkit-progress-bar {
+      background-color: rgba(255, 255, 255, 0.15);
+      border-radius: 4px;
+    }
+
+    &::-webkit-progress-value {
+      background-color: $muted-color;
+      border-radius: 4px;
+    }
+  }
+
+  &__hero-logo-backdrop {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  &__hero-image-skeleton {
+    height: 150px;
+  }
+
+  &__hero-panel-skeleton {
+    width: 100%;
+    padding: #{$spacing-unit * 2};
+    display: flex;
+    align-items: center;
+    background-color: $background-color;
+    height: 72px;
+    border-bottom: solid 1px $border-color;
+  }
+
+  &__list-item-skeleton {
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    padding: $spacing-unit;
+    gap: #{$spacing-unit * 2};
+  }
+
+  &__profile-avatar {
+    height: 54px;
+    width: 54px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $background-color;
+    position: relative;
+    object-fit: cover;
+  }
+
+  &__profile-avatar-small {
+    height: 32px;
+    width: 32px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $background-color;
+    position: relative;
+    object-fit: cover;
+  }
+
+  &__subscription-required-button {
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    gap: #{$spacing-unit / 2};
+    color: $body-color;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/catalogue/catalogue.scss b/src/renderer/src/pages/catalogue/catalogue.scss
index 701652df..9272ad94 100644
--- a/src/renderer/src/pages/catalogue/catalogue.scss
+++ b/src/renderer/src/pages/catalogue/catalogue.scss
@@ -1,10 +1,10 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .catalogue {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: calc(globals.$spacing-unit * 2);
+  gap: calc($spacing-unit * 2);
   width: 100%;
   padding: 16px;
   scroll-behavior: smooth;
@@ -13,10 +13,10 @@
     width: 270px;
     min-width: 270px;
     max-width: 270px;
-    background-color: globals.$dark-background-color;
+    background-color: $dark-background-color;
     border-radius: 4px;
     padding: 16px;
-    border: 1px solid globals.$border-color;
+    border: 1px solid $border-color;
     align-self: flex-start;
   }
 }
diff --git a/src/renderer/src/pages/catalogue/game-item.scss b/src/renderer/src/pages/catalogue/game-item.scss
index 83d182f4..3c5aa23a 100644
--- a/src/renderer/src/pages/catalogue/game-item.scss
+++ b/src/renderer/src/pages/catalogue/game-item.scss
@@ -1,7 +1,7 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .game-item {
-  background-color: globals.$dark-background-color;
+  background-color: $dark-background-color;
   width: 100%;
   color: #fff;
   display: flex;
@@ -9,9 +9,9 @@
   overflow: hidden;
   position: relative;
   border-radius: 4px;
-  border: 1px solid globals.$border-color;
+  border: 1px solid $border-color;
   cursor: pointer;
-  gap: calc(globals.$spacing-unit * 2);
+  gap: calc($spacing-unit * 2);
   transition: all ease 0.2s;
 
   &:hover {
@@ -22,7 +22,7 @@
     width: 200px;
     height: 100%;
     object-fit: cover;
-    border-right: 1px solid globals.$border-color;
+    border-right: 1px solid $border-color;
   }
 
   &__details {
@@ -30,11 +30,11 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
-    padding: calc(globals.$spacing-unit * 2) 0;
+    padding: calc($spacing-unit * 2) 0;
   }
 
   &__genres {
-    color: globals.$body-color;
+    color: $body-color;
     font-size: 12px;
     text-align: left;
     margin-bottom: 4px;
@@ -42,7 +42,7 @@
 
   &__repackers {
     display: flex;
-    gap: globals.$spacing-unit;
+    gap: $spacing-unit;
     flex-wrap: wrap;
   }
 }
diff --git a/src/renderer/src/pages/downloads/delete-game-modal.css.ts b/src/renderer/src/pages/downloads/delete-game-modal.css.ts
deleted file mode 100644
index ca6c3888..00000000
--- a/src/renderer/src/pages/downloads/delete-game-modal.css.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const deleteActionsButtonsCtn = style({
-  display: "flex",
-  width: "100%",
-  justifyContent: "end",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/downloads/delete-game-modal.scss b/src/renderer/src/pages/downloads/delete-game-modal.scss
new file mode 100644
index 00000000..7b1b25f6
--- /dev/null
+++ b/src/renderer/src/pages/downloads/delete-game-modal.scss
@@ -0,0 +1,11 @@
+@import "../../scss/variables";
+
+.delete-game-modal {
+  &__actions-buttons-ctn {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+    align-items: center;
+    gap: $spacing-unit;
+  }
+}
diff --git a/src/renderer/src/pages/downloads/download-group.css.ts b/src/renderer/src/pages/downloads/download-group.css.ts
deleted file mode 100644
index cbbb4f8e..00000000
--- a/src/renderer/src/pages/downloads/download-group.css.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const downloadTitleWrapper = style({
-  display: "flex",
-  alignItems: "center",
-  marginBottom: `${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadTitle = style({
-  fontWeight: "bold",
-  cursor: "pointer",
-  color: vars.color.body,
-  textAlign: "left",
-  fontSize: "16px",
-  display: "block",
-  ":hover": {
-    textDecoration: "underline",
-  },
-});
-
-export const downloads = style({
-  width: "100%",
-  gap: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-  margin: "0",
-  padding: "0",
-  marginTop: `${SPACING_UNIT}px`,
-});
-
-export const downloadCover = style({
-  width: "280px",
-  minWidth: "280px",
-  height: "auto",
-  borderRight: `solid 1px ${vars.color.border}`,
-  position: "relative",
-  zIndex: "1",
-});
-
-export const downloadCoverContent = style({
-  width: "100%",
-  height: "100%",
-  padding: `${SPACING_UNIT}px`,
-  display: "flex",
-  alignItems: "flex-end",
-  justifyContent: "flex-end",
-});
-
-export const downloadCoverBackdrop = style({
-  width: "100%",
-  height: "100%",
-  background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 5%, transparent 100%)",
-  display: "flex",
-  overflow: "hidden",
-  zIndex: "1",
-});
-
-export const downloadCoverImage = style({
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  zIndex: "-1",
-});
-
-export const download = style({
-  width: "100%",
-  backgroundColor: vars.color.background,
-  display: "flex",
-  borderRadius: "8px",
-  border: `solid 1px ${vars.color.border}`,
-  overflow: "hidden",
-  boxShadow: "0px 0px 5px 0px #000000",
-  transition: "all ease 0.2s",
-  height: "140px",
-  minHeight: "140px",
-  maxHeight: "140px",
-});
-
-export const downloadDetails = style({
-  display: "flex",
-  flexDirection: "column",
-  flex: "1",
-  justifyContent: "center",
-  gap: `${SPACING_UNIT / 2}px`,
-  fontSize: "14px",
-});
-
-export const downloadRightContent = style({
-  display: "flex",
-  padding: `${SPACING_UNIT * 2}px`,
-  flex: "1",
-  gap: `${SPACING_UNIT}px`,
-  background: "linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%)",
-});
-
-export const downloadActions = style({
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadGroup = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-});
diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss
new file mode 100644
index 00000000..c43b181b
--- /dev/null
+++ b/src/renderer/src/pages/downloads/download-group.scss
@@ -0,0 +1,110 @@
+@import "../../scss/variables";
+
+.download-group {
+  &__title-wrapper {
+    display: flex;
+    align-items: center;
+    margin-bottom: $spacing-unit;
+    gap: $spacing-unit;
+  }
+
+  &__title {
+    font-weight: bold;
+    cursor: pointer;
+    color: $body-color;
+    text-align: left;
+    font-size: 16px;
+    display: block;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__downloads {
+    width: 100%;
+    gap: #{$spacing-unit * 2};
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    margin-top: $spacing-unit;
+  }
+
+  &__cover {
+    width: 280px;
+    min-width: 280px;
+    height: auto;
+    border-right: solid 1px $border-color;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__cover-content {
+    width: 100%;
+    height: 100%;
+    padding: $spacing-unit;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+
+  &__cover-backdrop {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 5%, transparent 100%);
+    display: flex;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  &__cover-image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: -1;
+  }
+
+  &__download {
+    width: 100%;
+    background-color: $background-color;
+    display: flex;
+    border-radius: 8px;
+    border: solid 1px $border-color;
+    overflow: hidden;
+    box-shadow: 0px 0px 5px 0px #000000;
+    transition: all ease 0.2s;
+    height: 140px;
+    min-height: 140px;
+    max-height: 140px;
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    gap: #{$spacing-unit / 2};
+    font-size: 14px;
+  }
+
+  &__right-content {
+    display: flex;
+    padding: #{$spacing-unit * 2};
+    flex: 1;
+    gap: $spacing-unit;
+    background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%);
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: $spacing-unit;
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 2};
+  }
+}
diff --git a/src/renderer/src/pages/downloads/downloads.css.ts b/src/renderer/src/pages/downloads/downloads.css.ts
deleted file mode 100644
index abb3c30b..00000000
--- a/src/renderer/src/pages/downloads/downloads.css.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const downloadsContainer = style({
-  display: "flex",
-  padding: `${SPACING_UNIT * 3}px`,
-  flexDirection: "column",
-  width: "100%",
-});
-
-export const downloadGroups = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 3}px`,
-  flexDirection: "column",
-});
-
-export const arrowIcon = style({
-  width: "60px",
-  height: "60px",
-  borderRadius: "50%",
-  backgroundColor: "rgba(255, 255, 255, 0.06)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
-
-export const noDownloads = style({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/downloads/downloads.scss b/src/renderer/src/pages/downloads/downloads.scss
new file mode 100644
index 00000000..7dcf859e
--- /dev/null
+++ b/src/renderer/src/pages/downloads/downloads.scss
@@ -0,0 +1,37 @@
+@import "../../scss/variables";
+
+.downloads {
+  &__container {
+    display: flex;
+    padding: #{$spacing-unit * 3};
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__groups {
+    display: flex;
+    gap: #{$spacing-unit * 3};
+    flex-direction: column;
+  }
+
+  &__arrow-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: #{$spacing-unit * 2};
+  }
+
+  &__no-downloads {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: $spacing-unit;
+  }
+}
diff --git a/src/renderer/src/pages/editor/editor.scss b/src/renderer/src/pages/editor/editor.scss
index b617577c..2b475175 100644
--- a/src/renderer/src/pages/editor/editor.scss
+++ b/src/renderer/src/pages/editor/editor.scss
@@ -1,18 +1,18 @@
-@use "../../scss/globals.scss";
+@import "../../scss/variables";
 
 .editor-header {
   width: 100%;
   height: 36px;
-  background-color: globals.$dark-background-color;
+  background-color: $dark-background-color;
   display: flex;
   align-items: center;
   justify-content: start;
-  padding: 0 calc(globals.$spacing-unit * 2);
+  padding: 0 calc($spacing-unit * 2);
   -webkit-app-region: drag;
 }
 
 .editor-header-title {
   font-size: 7px;
   font-weight: 500;
-  color: globals.$body-color;
+  color: $body-color;
 }
diff --git a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts
deleted file mode 100644
index 0dbab770..00000000
--- a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const mappingMethods = style({
-  display: "grid",
-  gap: `${SPACING_UNIT}px`,
-  gridTemplateColumns: "repeat(2, 1fr)",
-});
-
-export const fileList = style({
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-  marginTop: `${SPACING_UNIT * 2}px`,
-});
-
-export const fileItem = style({
-  flex: 1,
-  color: vars.color.muted,
-  textDecoration: "underline",
-  display: "flex",
-  cursor: "pointer",
-});
diff --git a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss
new file mode 100644
index 00000000..84efd47e
--- /dev/null
+++ b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss
@@ -0,0 +1,27 @@
+@import "../../scss/variables";
+
+.cloud-sync-files-modal {
+  &__mapping-methods {
+    display: grid;
+    gap: $spacing-unit;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  &__file-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit;
+    margin-top: #{$spacing-unit * 2};
+  }
+
+  &__file-item {
+    flex: 1;
+    color: $muted-color;
+    text-decoration: underline;
+    display: flex;
+    cursor: pointer;
+  }
+}
diff --git a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts
deleted file mode 100644
index dc2d0031..00000000
--- a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { keyframes, style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const rotate = keyframes({
-  "0%": { transform: "rotate(0deg)" },
-  "100%": {
-    transform: "rotate(360deg)",
-  },
-});
-
-export const artifacts = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  flexDirection: "column",
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-});
-
-export const artifactButton = style({
-  display: "flex",
-  textAlign: "left",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-  color: vars.color.body,
-  padding: `${SPACING_UNIT * 2}px`,
-  backgroundColor: vars.color.darkBackground,
-  border: `1px solid ${vars.color.border}`,
-  borderRadius: "4px",
-  justifyContent: "space-between",
-});
-
-export const syncIcon = style({
-  animationName: rotate,
-  animationDuration: "1s",
-  animationIterationCount: "infinite",
-  animationTimingFunction: "linear",
-});
-
-export const progress = style({
-  width: "100%",
-  height: "5px",
-  "::-webkit-progress-bar": {
-    backgroundColor: vars.color.darkBackground,
-  },
-  "::-webkit-progress-value": {
-    backgroundColor: vars.color.muted,
-  },
-});
-
-export const manageFilesButton = style({
-  margin: "0",
-  padding: "0",
-  alignSelf: "flex-start",
-  fontSize: 14,
-  cursor: "pointer",
-  textDecoration: "underline",
-  color: vars.color.body,
-  ":disabled": {
-    cursor: "not-allowed",
-    opacity: vars.opacity.disabled,
-  },
-});
diff --git a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
new file mode 100644
index 00000000..cdc3296b
--- /dev/null
+++ b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
@@ -0,0 +1,70 @@
+@import "../../scss/variables";
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.cloud-sync-modal {
+  &__artifacts {
+    display: flex;
+    gap: $spacing-unit;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__artifact-button {
+    display: flex;
+    text-align: left;
+    flex-direction: row;
+    align-items: center;
+    gap: $spacing-unit;
+    color: $body-color;
+    padding: #{$spacing-unit * 2};
+    background-color: $dark-background-color;
+    border: 1px solid $border-color;
+    border-radius: 4px;
+    justify-content: space-between;
+  }
+
+  &__sync-icon {
+    animation-name: rotate;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+
+  &__progress {
+    width: 100%;
+    height: 5px;
+
+    &::-webkit-progress-bar {
+      background-color: $dark-background-color;
+    }
+
+    &::-webkit-progress-value {
+      background-color: $muted-color;
+    }
+  }
+
+  &__manage-files-button {
+    margin: 0;
+    padding: 0;
+    align-self: flex-start;
+    font-size: 14px;
+    cursor: pointer;
+    text-decoration: underline;
+    color: $body-color;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: $disabled-opacity;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/game-details/description-header/description-header.css.ts b/src/renderer/src/pages/game-details/description-header/description-header.css.ts
deleted file mode 100644
index 45856f31..00000000
--- a/src/renderer/src/pages/game-details/description-header/description-header.css.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const descriptionHeader = style({
-  width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  height: "72px",
-});
-
-export const descriptionHeaderInfo = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  flexDirection: "column",
-});
diff --git a/src/renderer/src/pages/game-details/description-header/description-header.scss b/src/renderer/src/pages/game-details/description-header/description-header.scss
new file mode 100644
index 00000000..0cb16361
--- /dev/null
+++ b/src/renderer/src/pages/game-details/description-header/description-header.scss
@@ -0,0 +1,17 @@
+@import "../../scss/variables";
+
+.description-header {
+  width: 100%;
+  padding: #{$spacing-unit * 2};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $background-color;
+  height: 72px;
+
+  &__info {
+    display: flex;
+    gap: $spacing-unit;
+    flex-direction: column;
+  }
+}
diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts
deleted file mode 100644
index d4f8084a..00000000
--- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const gallerySliderContainer = style({
-  padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-});
-
-export const gallerySliderMedia = style({
-  width: "100%",
-  height: "100%",
-  display: "block",
-  flexShrink: "0",
-  flexGrow: "0",
-  transition: "translate 0.3s ease-in-out",
-  borderRadius: "4px",
-  alignSelf: "center",
-});
-
-export const gallerySliderAnimationContainer = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  position: "relative",
-  overflow: "hidden",
-  "@media": {
-    "(min-width: 1280px)": {
-      width: "60%",
-    },
-  },
-});
-
-export const gallerySliderPreview = style({
-  width: "100%",
-  padding: `${SPACING_UNIT}px 0`,
-  height: "100%",
-  display: "flex",
-  position: "relative",
-  overflowX: "auto",
-  overflowY: "hidden",
-  gap: `${SPACING_UNIT / 2}px`,
-  "@media": {
-    "(min-width: 1280px)": {
-      width: "60%",
-    },
-  },
-  "::-webkit-scrollbar-thumb": {
-    width: "20%",
-  },
-  "::-webkit-scrollbar": {
-    height: "10px",
-  },
-});
-
-export const mediaPreviewButton = recipe({
-  base: {
-    cursor: "pointer",
-    width: "20%",
-    display: "block",
-    flexShrink: "0",
-    flexGrow: "0",
-    opacity: "0.3",
-    transition: "translate 0.3s ease-in-out, opacity 0.2s ease",
-    borderRadius: "4px",
-    border: `solid 1px ${vars.color.border}`,
-    overflow: "hidden",
-    ":hover": {
-      opacity: "0.8",
-    },
-  },
-  variants: {
-    active: {
-      true: {
-        opacity: "1",
-      },
-    },
-  },
-});
-
-export const mediaPreview = style({
-  width: "100%",
-  display: "flex",
-});
-
-export const gallerySliderButton = recipe({
-  base: {
-    position: "absolute",
-    alignSelf: "center",
-    cursor: "pointer",
-    backgroundColor: "rgba(0, 0, 0, 0.4)",
-    transition: "all 0.2s ease-in-out",
-    borderRadius: "50%",
-    color: vars.color.muted,
-    width: "48px",
-    height: "48px",
-    ":hover": {
-      backgroundColor: "rgba(0, 0, 0, 0.6)",
-    },
-    ":active": {
-      transform: "scale(0.95)",
-    },
-  },
-  variants: {
-    direction: {
-      left: {
-        left: "0",
-        marginLeft: `${SPACING_UNIT}px`,
-        transform: `translateX(${-(48 + SPACING_UNIT)}px)`,
-      },
-      right: {
-        right: "0",
-        marginRight: `${SPACING_UNIT}px`,
-        transform: `translateX(${48 + SPACING_UNIT}px)`,
-      },
-    },
-    visible: {
-      true: {
-        transform: "translateX(0)",
-        opacity: "1",
-      },
-      false: {
-        opacity: "0",
-      },
-    },
-  },
-});
diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
new file mode 100644
index 00000000..c09e7d8c
--- /dev/null
+++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
@@ -0,0 +1,126 @@
+@import "../../scss/variables";
+
+.gallery-slider {
+  &__container {
+    padding: #{$spacing-unit * 3} #{$spacing-unit * 2};
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__media {
+    width: 100%;
+    height: 100%;
+    display: block;
+    flex-shrink: 0;
+    flex-grow: 0;
+    transition: translate 0.3s ease-in-out;
+    border-radius: 4px;
+    align-self: center;
+  }
+
+  &__animation-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    @media (min-width: 1280px) {
+      width: 60%;
+    }
+  }
+
+  &__preview {
+    width: 100%;
+    padding: $spacing-unit 0;
+    height: 100%;
+    display: flex;
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+    gap: #{$spacing-unit / 2};
+
+    @media (min-width: 1280px) {
+      width: 60%;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      width: 20%;
+    }
+
+    &::-webkit-scrollbar {
+      height: 10px;
+    }
+  }
+
+  &__media-preview-button {
+    cursor: pointer;
+    width: 20%;
+    display: block;
+    flex-shrink: 0;
+    flex-grow: 0;
+    opacity: 0.3;
+    transition:
+      translate 0.3s ease-in-out,
+      opacity 0.2s ease;
+    border-radius: 4px;
+    border: solid 1px $border-color;
+    overflow: hidden;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &--active {
+      opacity: 1;
+    }
+  }
+
+  &__media-preview {
+    width: 100%;
+    display: flex;
+  }
+
+  &__button {
+    position: absolute;
+    align-self: center;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.4);
+    transition: all 0.2s ease-in-out;
+    border-radius: 50%;
+    color: $muted-color;
+    width: 48px;
+    height: 48px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &--left {
+      left: 0;
+      margin-left: $spacing-unit;
+      transform: translateX(-#{48 + $spacing-unit}px);
+    }
+
+    &--right {
+      right: 0;
+      margin-right: $spacing-unit;
+      transform: translateX(#{48 + $spacing-unit}px);
+    }
+
+    &--visible {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    &--hidden {
+      opacity: 0;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/game-details/game-details.css.ts b/src/renderer/src/pages/game-details/game-details.css.ts
deleted file mode 100644
index 228b2aeb..00000000
--- a/src/renderer/src/pages/game-details/game-details.css.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-import { globalStyle, keyframes, style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const HERO_HEIGHT = 300;
-
-export const slideIn = keyframes({
-  "0%": { transform: `translateY(${40 + SPACING_UNIT * 2}px)`, opacity: "0px" },
-  "100%": { transform: "translateY(0)", opacity: "1" },
-});
-
-export const wrapper = recipe({
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    width: "100%",
-    height: "100%",
-    transition: "all ease 0.3s",
-  },
-  variants: {
-    blurredContent: {
-      true: {
-        filter: "blur(20px)",
-      },
-    },
-  },
-});
-
-export const hero = style({
-  width: "100%",
-  height: `${HERO_HEIGHT}px`,
-  minHeight: `${HERO_HEIGHT}px`,
-  display: "flex",
-  flexDirection: "column",
-  position: "relative",
-  transition: "all ease 0.2s",
-  "@media": {
-    "(min-width: 1250px)": {
-      height: "350px",
-      minHeight: "350px",
-    },
-  },
-});
-
-export const heroContent = style({
-  padding: `${SPACING_UNIT * 2}px`,
-  height: "100%",
-  width: "100%",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "flex-end",
-});
-
-export const heroLogoBackdrop = style({
-  width: "100%",
-  height: "100%",
-  background: "linear-gradient(0deg, rgba(0, 0, 0, 0.3) 60%, transparent 100%)",
-  position: "absolute",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "space-between",
-});
-
-export const heroImage = style({
-  width: "100%",
-  height: `${HERO_HEIGHT}px`,
-  minHeight: `${HERO_HEIGHT}px`,
-  objectFit: "cover",
-  objectPosition: "top",
-  transition: "all ease 0.2s",
-  position: "absolute",
-  zIndex: "0",
-  "@media": {
-    "(min-width: 1250px)": {
-      objectPosition: "center",
-      height: "350px",
-      minHeight: "350px",
-    },
-  },
-});
-
-export const gameLogo = style({
-  width: 300,
-  alignSelf: "flex-end",
-});
-
-export const heroImageSkeleton = style({
-  height: "300px",
-  "@media": {
-    "(min-width: 1250px)": {
-      height: "350px",
-    },
-  },
-});
-
-export const container = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  overflow: "auto",
-  zIndex: "1",
-});
-
-export const descriptionContainer = style({
-  display: "flex",
-  width: "100%",
-  flex: "1",
-  background: `linear-gradient(0deg, ${vars.color.background} 50%, ${vars.color.darkBackground} 100%)`,
-});
-
-export const descriptionContent = style({
-  width: "100%",
-  height: "100%",
-});
-
-export const description = style({
-  userSelect: "text",
-  lineHeight: "22px",
-  fontSize: "16px",
-  padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
-  "@media": {
-    "(min-width: 1280px)": {
-      width: "60%",
-    },
-  },
-  width: "100%",
-  marginLeft: "auto",
-  marginRight: "auto",
-});
-
-export const descriptionSkeleton = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-  padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
-  width: "100%",
-  "@media": {
-    "(min-width: 1280px)": {
-      width: "60%",
-      lineHeight: "22px",
-    },
-  },
-  marginLeft: "auto",
-  marginRight: "auto",
-});
-
-export const randomizerButton = style({
-  animationName: slideIn,
-  animationDuration: "0.2s",
-  position: "fixed",
-  bottom: `${SPACING_UNIT * 3}px`,
-  /* Scroll bar + spacing */
-  right: `${9 + SPACING_UNIT * 2}px`,
-  boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 10px 1px",
-  border: `solid 2px ${vars.color.border}`,
-  zIndex: "1",
-  backgroundColor: vars.color.background,
-  ":hover": {
-    backgroundColor: vars.color.background,
-    boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 15px 5px",
-    opacity: "1",
-  },
-  ":active": {
-    transform: "scale(0.98)",
-  },
-  ":disabled": {
-    boxShadow: "none",
-    transform: "none",
-    opacity: "0.8",
-    backgroundColor: vars.color.background,
-  },
-});
-
-export const heroPanelSkeleton = style({
-  width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  height: "72px",
-  borderBottom: `solid 1px ${vars.color.border}`,
-});
-
-globalStyle(".bb_tag", {
-  marginTop: `${SPACING_UNIT * 2}px`,
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
-
-globalStyle(`${description} img`, {
-  borderRadius: "5px",
-  marginTop: `${SPACING_UNIT}px`,
-  marginBottom: `${SPACING_UNIT * 3}px`,
-  display: "block",
-  width: "100%",
-  height: "auto",
-  objectFit: "cover",
-});
-
-globalStyle(`${description} a`, {
-  color: vars.color.body,
-});
-
-export const cloudSyncButton = style({
-  padding: `${SPACING_UNIT * 1.5}px ${SPACING_UNIT * 2}px`,
-  backgroundColor: "rgba(0, 0, 0, 0.6)",
-  backdropFilter: "blur(20px)",
-  borderRadius: "8px",
-  transition: "all ease 0.2s",
-  cursor: "pointer",
-  minHeight: "40px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: `${SPACING_UNIT}px`,
-  color: vars.color.muted,
-  fontSize: "14px",
-  border: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.8)",
-  animation: `${slideIn} 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running`,
-  animationDuration: "0.3s",
-  ":active": {
-    opacity: "0.9",
-  },
-  ":disabled": {
-    opacity: vars.opacity.disabled,
-    cursor: "not-allowed",
-  },
-  ":hover": {
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-  },
-});
diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss
new file mode 100644
index 00000000..492d7d61
--- /dev/null
+++ b/src/renderer/src/pages/game-details/game-details.scss
@@ -0,0 +1,235 @@
+@import "../../scss/variables";
+
+$hero-height: 300px;
+
+@keyframes slide-in {
+  0% {
+    transform: translateY(#{40 + $spacing-unit * 2}px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.game-details {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    transition: all ease 0.3s;
+
+    &--blurred-content {
+      filter: blur(20px);
+    }
+  }
+
+  &__hero {
+    width: 100%;
+    height: $hero-height;
+    min-height: $hero-height;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: all ease 0.2s;
+
+    @media (min-width: 1250px) {
+      height: 350px;
+      min-height: 350px;
+    }
+  }
+
+  &__hero-content {
+    padding: #{$spacing-unit * 2};
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  &__hero-logo-backdrop {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &__hero-image {
+    width: 100%;
+    height: $hero-height;
+    min-height: $hero-height;
+    object-fit: cover;
+    object-position: top;
+    transition: all ease 0.2s;
+    position: absolute;
+    z-index: 0;
+
+    @media (min-width: 1250px) {
+      object-position: center;
+      height: 350px;
+      min-height: 350px;
+    }
+  }
+
+  &__game-logo {
+    width: 300px;
+    align-self: flex-end;
+  }
+
+  &__hero-image-skeleton {
+    height: 300px;
+
+    @media (min-width: 1250px) {
+      height: 350px;
+    }
+  }
+
+  &__container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    z-index: 1;
+  }
+
+  &__description-container {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    background: linear-gradient(
+      0deg,
+      $background-color 50%,
+      $dark-background-color 100%
+    );
+  }
+
+  &__description-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__description {
+    user-select: text;
+    line-height: 22px;
+    font-size: 16px;
+    padding: #{$spacing-unit * 3} #{$spacing-unit * 2};
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    @media (min-width: 1280px) {
+      width: 60%;
+    }
+
+    img {
+      border-radius: 5px;
+      margin-top: $spacing-unit;
+      margin-bottom: #{$spacing-unit * 3};
+      display: block;
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+
+    a {
+      color: $body-color;
+    }
+  }
+
+  &__description-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit;
+    padding: #{$spacing-unit * 3} #{$spacing-unit * 2};
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    @media (min-width: 1280px) {
+      width: 60%;
+      line-height: 22px;
+    }
+  }
+
+  &__randomizer-button {
+    animation-name: slide-in;
+    animation-duration: 0.2s;
+    position: fixed;
+    bottom: #{$spacing-unit * 3};
+    right: #{9 + $spacing-unit * 2}px;
+    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px 1px;
+    border: solid 2px $border-color;
+    z-index: 1;
+    background-color: $background-color;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $background-color;
+      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 15px 5px;
+      opacity: 1;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    &:disabled {
+      box-shadow: none;
+      transform: none;
+      opacity: 0.8;
+      background-color: $background-color;
+    }
+  }
+
+  &__hero-panel-skeleton {
+    width: 100%;
+    padding: #{$spacing-unit * 2};
+    display: flex;
+    align-items: center;
+    background-color: $background-color;
+    height: 72px;
+    border-bottom: solid 1px $border-color;
+  }
+
+  &__cloud-sync-button {
+    padding: #{$spacing-unit * 1.5} #{$spacing-unit * 2};
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(20px);
+    border-radius: 8px;
+    transition: all ease 0.2s;
+    cursor: pointer;
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-unit;
+    color: $muted-color;
+    font-size: 14px;
+    border: solid 1px $border-color;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
+    animation: slide-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
+      running;
+    animation-duration: 0.3s;
+
+    &:active {
+      opacity: 0.9;
+    }
+
+    &:disabled {
+      opacity: $disabled-opacity;
+      cursor: not-allowed;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts
deleted file mode 100644
index ac9e6df1..00000000
--- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const heroPanelAction = style({
-  border: `solid 1px ${vars.color.muted}`,
-});
-
-export const actions = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-});
-
-export const separator = style({
-  width: "1px",
-  backgroundColor: vars.color.muted,
-  opacity: "0.2",
-});
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss b/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss
new file mode 100644
index 00000000..a94a17ea
--- /dev/null
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss
@@ -0,0 +1,18 @@
+@import "../../scss/variables";
+
+.hero-panel-actions {
+  &__action {
+    border: solid 1px $muted-color;
+  }
+
+  &__actions {
+    display: flex;
+    gap: #{$spacing-unit * 2};
+  }
+
+  &__separator {
+    width: 1px;
+    background-color: $muted-color;
+    opacity: 0.2;
+  }
+}
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
deleted file mode 100644
index 3fdbc73b..00000000
--- a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const panel = recipe({
-  base: {
-    width: "100%",
-    height: "72px",
-    minHeight: "72px",
-    padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
-    backgroundColor: vars.color.darkBackground,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    transition: "all ease 0.2s",
-    borderBottom: `solid 1px ${vars.color.border}`,
-    position: "sticky",
-    overflow: "hidden",
-    top: "0",
-    zIndex: "2",
-  },
-  variants: {
-    stuck: {
-      true: {
-        boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.8)",
-      },
-    },
-  },
-});
-
-export const content = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const actions = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadDetailsRow = style({
-  gap: `${SPACING_UNIT}px`,
-  display: "flex",
-  color: vars.color.body,
-  alignItems: "center",
-});
-
-export const downloadsLink = style({
-  color: vars.color.body,
-  textDecoration: "underline",
-});
-
-export const progressBar = recipe({
-  base: {
-    position: "absolute",
-    bottom: "0",
-    left: "0",
-    width: "100%",
-    height: "3px",
-    transition: "all ease 0.2s",
-    "::-webkit-progress-bar": {
-      backgroundColor: "transparent",
-    },
-    "::-webkit-progress-value": {
-      backgroundColor: vars.color.muted,
-    },
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: vars.opacity.disabled,
-      },
-    },
-  },
-});
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.scss b/src/renderer/src/pages/game-details/hero/hero-panel.scss
new file mode 100644
index 00000000..ffd6a7af
--- /dev/null
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.scss
@@ -0,0 +1,66 @@
+@import "../../scss/variables";
+
+.hero-panel {
+  width: 100%;
+  height: 72px;
+  min-height: 72px;
+  padding: #{$spacing-unit * 2} #{$spacing-unit * 3};
+  background-color: $dark-background-color;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all ease 0.2s;
+  border-bottom: solid 1px $border-color;
+  position: sticky;
+  overflow: hidden;
+  top: 0;
+  z-index: 2;
+
+  &--stuck {
+    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit;
+  }
+
+  &__actions {
+    display: flex;
+    gap: $spacing-unit;
+  }
+
+  &__download-details-row {
+    gap: $spacing-unit;
+    display: flex;
+    color: $body-color;
+    align-items: center;
+  }
+
+  &__downloads-link {
+    color: $body-color;
+    text-decoration: underline;
+  }
+
+  &__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    transition: all ease 0.2s;
+
+    &::-webkit-progress-bar {
+      background-color: transparent;
+    }
+
+    &::-webkit-progress-value {
+      background-color: $muted-color;
+    }
+
+    &--disabled {
+      opacity: $disabled-opacity;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts b/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts
deleted file mode 100644
index 3a776736..00000000
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const container = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-  width: "100%",
-});
-
-export const downloadsPathField = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const hintText = style({
-  fontSize: "12px",
-  color: vars.color.body,
-});
-
-export const downloaders = style({
-  display: "grid",
-  gap: `${SPACING_UNIT}px`,
-  gridTemplateColumns: "repeat(2, 1fr)",
-});
-
-export const downloaderOption = style({
-  position: "relative",
-  ":only-child": {
-    gridColumn: "1 / -1",
-  },
-});
-
-export const downloaderIcon = style({
-  position: "absolute",
-  left: `${SPACING_UNIT * 2}px`,
-});
-
-export const pathError = style({
-  cursor: "pointer",
-  ":hover": {
-    textDecoration: "underline",
-  },
-});
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
new file mode 100644
index 00000000..cde352f5
--- /dev/null
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -0,0 +1,47 @@
+@import "../../scss/variables";
+
+.download-settings-modal {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 3};
+    width: 100%;
+  }
+
+  &__downloads-path-field {
+    display: flex;
+    gap: $spacing-unit;
+  }
+
+  &__hint-text {
+    font-size: 12px;
+    color: $body-color;
+  }
+
+  &__downloaders {
+    display: grid;
+    gap: $spacing-unit;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  &__downloader-option {
+    position: relative;
+
+    &:only-child {
+      grid-column: 1 / -1;
+    }
+  }
+
+  &__downloader-icon {
+    position: absolute;
+    left: #{$spacing-unit * 2};
+  }
+
+  &__path-error {
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts b/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts
deleted file mode 100644
index f844a686..00000000
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../../theme.css";
-
-export const optionsContainer = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-  flexDirection: "column",
-});
-
-export const gameOptionHeader = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const gameOptionHeaderDescription = style({
-  fontWeight: "400",
-});
-
-export const gameOptionRow = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.scss b/src/renderer/src/pages/game-details/modals/game-options-modal.scss
new file mode 100644
index 00000000..10613fe3
--- /dev/null
+++ b/src/renderer/src/pages/game-details/modals/game-options-modal.scss
@@ -0,0 +1,24 @@
+@import "../../scss/variables";
+
+.game-options-modal {
+  &__options-container {
+    display: flex;
+    gap: #{$spacing-unit * 2};
+    flex-direction: column;
+  }
+
+  &__game-option-header {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit;
+  }
+
+  &__game-option-header-description {
+    font-weight: 400;
+  }
+
+  &__game-option-row {
+    display: flex;
+    gap: $spacing-unit;
+  }
+}
diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts
deleted file mode 100644
index 2c70717d..00000000
--- a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../../theme.css";
-
-export const deleteActionsButtonsCtn = style({
-  display: "flex",
-  width: "100%",
-  justifyContent: "end",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
new file mode 100644
index 00000000..687a95b7
--- /dev/null
+++ b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
@@ -0,0 +1,11 @@
+@import "../../scss/variables";
+
+.remove-from-library-modal {
+  &__delete-actions-buttons-ctn {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+    align-items: center;
+    gap: $spacing-unit;
+  }
+}
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts b/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts
deleted file mode 100644
index 8d54e402..00000000
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const repacks = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  flexDirection: "column",
-});
-
-export const repackButton = style({
-  display: "flex",
-  textAlign: "left",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  gap: `${SPACING_UNIT}px`,
-  color: vars.color.body,
-  padding: `${SPACING_UNIT * 2}px`,
-});
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.scss b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
new file mode 100644
index 00000000..e585db29
--- /dev/null
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
@@ -0,0 +1,19 @@
+@import "../../scss/variables";
+
+.repacks-modal {
+  &__repacks {
+    display: flex;
+    gap: $spacing-unit;
+    flex-direction: column;
+  }
+
+  &__repack-button {
+    display: flex;
+    text-align: left;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $spacing-unit;
+    color: $body-color;
+    padding: #{$spacing-unit * 2};
+  }
+}
diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts
deleted file mode 100644
index cd9fdc8f..00000000
--- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const sidebarSectionButton = style({
-  height: "72px",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  color: vars.color.muted,
-  width: "100%",
-  cursor: "pointer",
-  transition: "all ease 0.2s",
-  gap: `${SPACING_UNIT}px`,
-  fontSize: "14px",
-  fontWeight: "bold",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
-  },
-  ":active": {
-    opacity: vars.opacity.active,
-  },
-});
-
-export const chevron = recipe({
-  base: {
-    transition: "transform ease 0.2s",
-  },
-  variants: {
-    open: {
-      true: {
-        transform: "rotate(180deg)",
-      },
-    },
-  },
-});
diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
new file mode 100644
index 00000000..0890fedd
--- /dev/null
+++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
@@ -0,0 +1,34 @@
+@import "../../scss/variables";
+
+.sidebar-section {
+  &__button {
+    height: 72px;
+    padding: #{$spacing-unit * 2};
+    display: flex;
+    align-items: center;
+    background-color: $background-color;
+    color: $muted-color;
+    width: 100%;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    gap: $spacing-unit;
+    font-size: 14px;
+    font-weight: bold;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &:active {
+      opacity: $active-opacity;
+    }
+  }
+
+  &__chevron {
+    transition: transform ease 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+}
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
deleted file mode 100644
index aa27cd42..00000000
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import { globalStyle, style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const contentSidebar = style({
-  borderLeft: `solid 1px ${vars.color.border}`,
-  backgroundColor: vars.color.darkBackground,
-  width: "100%",
-  height: "100%",
-  "@media": {
-    "(min-width: 1024px)": {
-      maxWidth: "300px",
-      width: "100%",
-    },
-    "(min-width: 1280px)": {
-      width: "100%",
-      maxWidth: "400px",
-    },
-  },
-});
-
-export const requirementButtonContainer = style({
-  width: "100%",
-  display: "flex",
-});
-
-export const requirementButton = style({
-  border: `solid 1px ${vars.color.border};`,
-  borderLeft: "none",
-  borderRight: "none",
-  borderRadius: "0",
-  width: "100%",
-});
-
-export const requirementsDetails = style({
-  padding: `${SPACING_UNIT * 2}px`,
-  lineHeight: "22px",
-  fontSize: "16px",
-});
-
-export const requirementsDetailsSkeleton = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: "8px",
-  padding: `${SPACING_UNIT * 2}px`,
-  fontSize: "16px",
-});
-
-export const howLongToBeatCategoriesList = style({
-  margin: "0",
-  padding: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-  gap: "16px",
-});
-
-export const howLongToBeatCategory = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: "4px",
-  background:
-    "linear-gradient(90deg, transparent 20%, rgb(255 255 255 / 2%) 100%)",
-  borderRadius: "4px",
-  padding: `8px 16px`,
-  border: `solid 1px ${vars.color.border}`,
-});
-
-export const howLongToBeatCategoryLabel = style({
-  color: vars.color.muted,
-});
-
-export const howLongToBeatCategorySkeleton = style({
-  border: `solid 1px ${vars.color.border}`,
-  borderRadius: "4px",
-  height: "76px",
-});
-
-export const statsSection = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-  padding: `${SPACING_UNIT * 2}px`,
-  justifyContent: "space-between",
-  transition: "max-height ease 0.5s",
-  overflow: "hidden",
-  "@media": {
-    "(min-width: 1024px)": {
-      flexDirection: "column",
-    },
-    "(min-width: 1280px)": {
-      flexDirection: "row",
-    },
-  },
-});
-
-export const statsCategoryTitle = style({
-  fontSize: "14px",
-  fontWeight: "bold",
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const statsCategory = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT / 2}px`,
-});
-
-globalStyle(`${requirementsDetails} a`, {
-  display: "flex",
-  color: vars.color.body,
-});
-
-export const list = style({
-  listStyle: "none",
-  margin: "0",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-  padding: `${SPACING_UNIT * 2}px`,
-});
-
-export const listItem = style({
-  display: "flex",
-  cursor: "pointer",
-  transition: "all ease 0.1s",
-  color: vars.color.muted,
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT * 2}px`,
-  alignItems: "center",
-  textAlign: "left",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    textDecoration: "none",
-  },
-});
-
-export const listItemImage = recipe({
-  base: {
-    width: "54px",
-    height: "54px",
-    borderRadius: "4px",
-    objectFit: "cover",
-  },
-  variants: {
-    unlocked: {
-      false: {
-        filter: "grayscale(100%)",
-      },
-    },
-  },
-});
-
-export const subscriptionRequiredButton = style({
-  textDecoration: "none",
-  display: "flex",
-  justifyContent: "center",
-  width: "100%",
-  gap: `${SPACING_UNIT / 2}px`,
-  color: vars.color.warning,
-  cursor: "pointer",
-  ":hover": {
-    textDecoration: "underline",
-  },
-});
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.scss b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
new file mode 100644
index 00000000..499ddba9
--- /dev/null
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
@@ -0,0 +1,168 @@
+@import "../../scss/variables";
+
+.sidebar {
+  &__content {
+    border-left: solid 1px $border-color;
+    background-color: $dark-background-color;
+    width: 100%;
+    height: 100%;
+
+    @media (min-width: 1024px) {
+      max-width: 300px;
+      width: 100%;
+    }
+
+    @media (min-width: 1280px) {
+      width: 100%;
+      max-width: 400px;
+    }
+  }
+
+  &__requirement-button-container {
+    width: 100%;
+    display: flex;
+  }
+
+  &__requirement-button {
+    border: solid 1px $border-color;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    width: 100%;
+  }
+
+  &__requirements-details {
+    padding: #{$spacing-unit * 2};
+    line-height: 22px;
+    font-size: 16px;
+
+    a {
+      display: flex;
+      color: $body-color;
+    }
+  }
+
+  &__requirements-details-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: #{$spacing-unit * 2};
+    font-size: 16px;
+  }
+
+  &__how-long-to-beat-categories-list {
+    margin: 0;
+    padding: #{$spacing-unit * 2};
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__how-long-to-beat-category {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    background: linear-gradient(
+      90deg,
+      transparent 20%,
+      rgb(255 255 255 / 2%) 100%
+    );
+    border-radius: 4px;
+    padding: 8px 16px;
+    border: solid 1px $border-color;
+  }
+
+  &__how-long-to-beat-category-label {
+    color: $muted-color;
+  }
+
+  &__how-long-to-beat-category-skeleton {
+    border: solid 1px $border-color;
+    border-radius: 4px;
+    height: 76px;
+  }
+
+  &__stats-section {
+    display: flex;
+    gap: #{$spacing-unit * 2};
+    padding: #{$spacing-unit * 2};
+    justify-content: space-between;
+    transition: max-height ease 0.5s;
+    overflow: hidden;
+
+    @media (min-width: 1024px) {
+      flex-direction: column;
+    }
+
+    @media (min-width: 1280px) {
+      flex-direction: row;
+    }
+  }
+
+  &__stats-category-title {
+    font-size: 14px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    gap: $spacing-unit;
+  }
+
+  &__stats-category {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit / 2};
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 2};
+    padding: #{$spacing-unit * 2};
+  }
+
+  &__list-item {
+    display: flex;
+    cursor: pointer;
+    transition: all ease 0.1s;
+    color: $muted-color;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    padding: $spacing-unit;
+    gap: #{$spacing-unit * 2};
+    align-items: center;
+    text-align: left;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      text-decoration: none;
+    }
+  }
+
+  &__list-item-image {
+    width: 54px;
+    height: 54px;
+    border-radius: 4px;
+    object-fit: cover;
+
+    &--unlocked {
+      filter: grayscale(100%);
+    }
+  }
+
+  &__subscription-required-button {
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    gap: #{$spacing-unit / 2};
+    color: $warning-color;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/home/catalogue-home.css.ts b/src/renderer/src/pages/home/catalogue-home.css.ts
deleted file mode 100644
index a13d58f4..00000000
--- a/src/renderer/src/pages/home/catalogue-home.css.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const catalogueCategories = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const content = style({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-  padding: `${SPACING_UNIT * 3}px`,
-  flex: "1",
-});
-
-export const cards = style({
-  display: "grid",
-  gridTemplateColumns: "repeat(2, 1fr)",
-  gap: `${SPACING_UNIT * 2}px`,
-  transition: "all ease 0.2s",
-});
diff --git a/src/renderer/src/pages/home/catalogue-home.scss b/src/renderer/src/pages/home/catalogue-home.scss
new file mode 100644
index 00000000..924c8850
--- /dev/null
+++ b/src/renderer/src/pages/home/catalogue-home.scss
@@ -0,0 +1,24 @@
+@import "../../scss/variables";
+
+.catalogue-home {
+  &__categories {
+    display: flex;
+    gap: $spacing-unit;
+  }
+
+  &__content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 3};
+    padding: #{$spacing-unit * 3};
+    flex: 1;
+  }
+
+  &__cards {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: #{$spacing-unit * 2};
+    transition: all ease 0.2s;
+  }
+}
diff --git a/src/renderer/src/pages/home/home.css.ts b/src/renderer/src/pages/home/home.css.ts
deleted file mode 100644
index 4c605377..00000000
--- a/src/renderer/src/pages/home/home.css.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const homeHeader = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  justifyContent: "space-between",
-  alignItems: "center",
-});
-
-export const content = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-  padding: `${SPACING_UNIT * 3}px`,
-  flex: "1",
-  overflowY: "auto",
-});
-
-export const cards = style({
-  display: "grid",
-  gridTemplateColumns: "repeat(1, 1fr)",
-  gap: `${SPACING_UNIT * 2}px`,
-  transition: "all ease 0.2s",
-  "@media": {
-    "(min-width: 768px)": {
-      gridTemplateColumns: "repeat(2, 1fr)",
-    },
-    "(min-width: 1250px)": {
-      gridTemplateColumns: "repeat(3, 1fr)",
-    },
-    "(min-width: 1600px)": {
-      gridTemplateColumns: "repeat(4, 1fr)",
-    },
-  },
-});
-
-export const cardSkeleton = style({
-  width: "100%",
-  height: "180px",
-  boxShadow: "0px 0px 15px 0px #000000",
-  overflow: "hidden",
-  borderRadius: "4px",
-  transition: "all ease 0.2s",
-  zIndex: "1",
-  ":active": {
-    opacity: vars.opacity.active,
-  },
-});
-
-export const noResults = style({
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexDirection: "column",
-  gap: "16px",
-  gridColumn: "1 / -1",
-});
-
-export const buttonsList = style({
-  display: "flex",
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const flameIcon = style({
-  width: "30px",
-  top: "-10px",
-  left: "-5px",
-  position: "absolute",
-});
diff --git a/src/renderer/src/pages/home/home.scss b/src/renderer/src/pages/home/home.scss
new file mode 100644
index 00000000..8791d822
--- /dev/null
+++ b/src/renderer/src/pages/home/home.scss
@@ -0,0 +1,79 @@
+@import "../../scss/variables";
+
+.home {
+  &__header {
+    display: flex;
+    gap: $spacing-unit;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 3};
+    padding: #{$spacing-unit * 3};
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &__cards {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: #{$spacing-unit * 2};
+    transition: all ease 0.2s;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1250px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: 1600px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__card-skeleton {
+    width: 100%;
+    height: 180px;
+    box-shadow: 0px 0px 15px 0px #000000;
+    overflow: hidden;
+    border-radius: 4px;
+    transition: all ease 0.2s;
+    z-index: 1;
+
+    &:active {
+      opacity: $active-opacity;
+    }
+  }
+
+  &__no-results {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 16px;
+    grid-column: 1 / -1;
+  }
+
+  &__buttons-list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: $spacing-unit;
+  }
+
+  &__flame-icon {
+    width: 30px;
+    top: -10px;
+    left: -5px;
+    position: absolute;
+  }
+}
diff --git a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts
deleted file mode 100644
index 8dd1df51..00000000
--- a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { vars } from "../../../theme.css";
-import { globalStyle, style } from "@vanilla-extract/css";
-
-export const profileAvatarEditContainer = style({
-  alignSelf: "center",
-  // width: "132px",
-  // height: "132px",
-  display: "flex",
-  // borderRadius: "4px",
-  color: vars.color.body,
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  position: "relative",
-  cursor: "pointer",
-});
-
-export const profileAvatarEditOverlay = style({
-  position: "absolute",
-  width: "100%",
-  height: "100%",
-  backgroundColor: "rgba(0, 0, 0, 0.7)",
-  color: vars.color.muted,
-  zIndex: "1",
-  cursor: "pointer",
-  display: "flex",
-  justifyContent: "center",
-  transition: "all ease 0.2s",
-  alignItems: "center",
-  borderRadius: "4px",
-  opacity: "0",
-});
-
-globalStyle(`${profileAvatarEditContainer}:hover ${profileAvatarEditOverlay}`, {
-  opacity: "1",
-});
diff --git a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss
new file mode 100644
index 00000000..a9a53211
--- /dev/null
+++ b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss
@@ -0,0 +1,34 @@
+@import "../../scss/variables";
+
+.edit-profile-modal {
+  &__profile-avatar-edit-container {
+    align-self: center;
+    display: flex;
+    color: $body-color;
+    justify-content: center;
+    align-items: center;
+    background-color: $background-color;
+    position: relative;
+    cursor: pointer;
+  }
+
+  &__profile-avatar-edit-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: $muted-color;
+    z-index: 1;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    transition: all ease 0.2s;
+    align-items: center;
+    border-radius: 4px;
+    opacity: 0;
+  }
+
+  &__profile-avatar-edit-container:hover &__profile-avatar-edit-overlay {
+    opacity: 1;
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts b/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts
deleted file mode 100644
index bf5494b6..00000000
--- a/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SPACING_UNIT } from "../../../theme.css";
-
-import { style } from "@vanilla-extract/css";
-
-export const container = style({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const lockIcon = style({
-  width: "60px",
-  height: "60px",
-  borderRadius: "50%",
-  backgroundColor: "rgba(255, 255, 255, 0.06)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
diff --git a/src/renderer/src/pages/profile/profile-content/locked-profile.scss b/src/renderer/src/pages/profile/profile-content/locked-profile.scss
new file mode 100644
index 00000000..c9cf3af5
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/locked-profile.scss
@@ -0,0 +1,24 @@
+@import "../../scss/variables";
+
+.locked-profile {
+  &__container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: $spacing-unit;
+  }
+
+  &__lock-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: $spacing-unit * 2;
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts b/src/renderer/src/pages/profile/profile-content/profile-content.css.ts
deleted file mode 100644
index 9bd2b027..00000000
--- a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import { vars, SPACING_UNIT } from "../../../theme.css";
-import { globalStyle, style } from "@vanilla-extract/css";
-
-export const gameCover = style({
-  transition: "all ease 0.2s",
-  boxShadow: "0 8px 10px -2px rgba(0, 0, 0, 0.5)",
-  width: "100%",
-  position: "relative",
-  ":before": {
-    content: "",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "172%",
-    position: "absolute",
-    background:
-      "linear-gradient(35deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 51.5%, rgba(255, 255, 255, 0.15) 54%, rgba(255, 255, 255, 0.15) 100%)",
-    transition: "all ease 0.3s",
-    transform: "translateY(-36%)",
-    opacity: "0.5",
-  },
-});
-
-export const game = style({
-  transition: "all ease 0.2s",
-  ":hover": {
-    transform: "scale(1.05)",
-  },
-});
-
-globalStyle(`${gameCover}:hover::before`, {
-  opacity: "1",
-  transform: "translateY(-20%)",
-});
-
-export const box = style({
-  backgroundColor: vars.color.background,
-  borderRadius: "4px",
-  border: `solid 1px ${vars.color.border}`,
-  padding: `${SPACING_UNIT * 2}px`,
-});
-
-export const sectionHeader = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
-
-export const list = style({
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-});
-
-export const friend = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  alignItems: "center",
-});
-
-export const friendName = style({
-  color: vars.color.muted,
-  fontWeight: "bold",
-  fontSize: vars.size.body,
-});
-
-export const rightContent = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-  flexDirection: "column",
-  transition: "all ease 0.2s",
-  "@media": {
-    "(min-width: 1024px)": {
-      maxWidth: "300px",
-      width: "100%",
-    },
-    "(min-width: 1280px)": {
-      width: "100%",
-      maxWidth: "400px",
-    },
-  },
-});
-
-export const listItem = style({
-  display: "flex",
-  cursor: "pointer",
-  transition: "all ease 0.1s",
-  color: vars.color.muted,
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT * 2}px`,
-  alignItems: "center",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    textDecoration: "none",
-  },
-});
-
-export const statsListItem = style({
-  display: "flex",
-  flexDirection: "column",
-  transition: "all ease 0.1s",
-  color: vars.color.muted,
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT}px`,
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    textDecoration: "none",
-  },
-});
-
-export const gamesGrid = style({
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-  display: "grid",
-  gap: `${SPACING_UNIT * 2}px`,
-  gridTemplateColumns: "repeat(2, 1fr)",
-  "@container": {
-    [`app-container (min-width: 900px)`]: {
-      gridTemplateColumns: "repeat(4, 1fr)",
-    },
-    [`app-container (min-width: 1300px)`]: {
-      gridTemplateColumns: "repeat(5, 1fr)",
-    },
-    [`app-container (min-width: 2000px)`]: {
-      gridTemplateColumns: "repeat(6, 1fr)",
-    },
-    [`app-container (min-width: 2600px)`]: {
-      gridTemplateColumns: "repeat(8, 1fr)",
-    },
-    [`app-container (min-width: 3000px)`]: {
-      gridTemplateColumns: "repeat(12, 1fr)",
-    },
-  },
-});
-
-export const telescopeIcon = style({
-  width: "60px",
-  height: "60px",
-  borderRadius: "50%",
-  backgroundColor: "rgba(255, 255, 255, 0.06)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
-
-export const noGames = style({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const listItemImage = style({
-  width: "32px",
-  height: "32px",
-  borderRadius: "4px",
-  objectFit: "cover",
-});
-
-export const listItemDetails = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT / 2}px`,
-  overflow: "hidden",
-});
-
-export const listItemTitle = style({
-  fontWeight: "bold",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis",
-});
-
-export const listItemDescription = style({
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const defaultAvatarWrapper = style({
-  width: "32px",
-  height: "32px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  border: `solid 1px ${vars.color.border}`,
-  borderRadius: "4px",
-});
-
-export const achievementsProgressBar = style({
-  width: "100%",
-  height: "4px",
-  transition: "all ease 0.2s",
-  "::-webkit-progress-bar": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    borderRadius: "4px",
-  },
-  "::-webkit-progress-value": {
-    backgroundColor: vars.color.muted,
-    borderRadius: "4px",
-  },
-});
-
-export const link = style({
-  textAlign: "start",
-  color: vars.color.body,
-  ":hover": {
-    textDecoration: "underline",
-    cursor: "pointer",
-  },
-});
-
-export const gameCardStats = style({
-  width: "100%",
-  height: "100%",
-  transition: "transform 0.5s ease-in-out",
-  flexShrink: "0",
-  flexGrow: "0",
-});
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.scss b/src/renderer/src/pages/profile/profile-content/profile-content.scss
new file mode 100644
index 00000000..da634d8b
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss
@@ -0,0 +1,253 @@
+@import "../../scss/variables";
+
+.profile-content {
+  &__game-cover {
+    transition: all ease 0.2s;
+    box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    position: relative;
+
+    &:before {
+      content: "";
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 172%;
+      position: absolute;
+      background: linear-gradient(
+        35deg,
+        rgba(0, 0, 0, 0.1) 0%,
+        rgba(0, 0, 0, 0.07) 51.5%,
+        rgba(255, 255, 255, 0.15) 54%,
+        rgba(255, 255, 255, 0.15) 100%
+      );
+      transition: all ease 0.3s;
+      transform: translateY(-36%);
+      opacity: 0.5;
+    }
+
+    &:hover::before {
+      opacity: 1;
+      transform: translateY(-20%);
+    }
+  }
+
+  &__game {
+    transition: all ease 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__box {
+    background-color: $background-color;
+    border-radius: 4px;
+    border: solid 1px $border-color;
+    padding: #{$spacing-unit * 2};
+  }
+
+  &__section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: #{$spacing-unit * 2};
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 2};
+  }
+
+  &__friend {
+    display: flex;
+    gap: $spacing-unit;
+    align-items: center;
+  }
+
+  &__friend-name {
+    color: $muted-color;
+    font-weight: bold;
+    font-size: $body-size;
+  }
+
+  &__right-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    gap: #{$spacing-unit * 2};
+    flex-direction: column;
+    transition: all ease 0.2s;
+
+    @media (min-width: 1024px) {
+      max-width: 300px;
+      width: 100%;
+    }
+
+    @media (min-width: 1280px) {
+      width: 100%;
+      max-width: 400px;
+    }
+  }
+
+  &__list-item {
+    display: flex;
+    cursor: pointer;
+    transition: all ease 0.1s;
+    color: $muted-color;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    padding: $spacing-unit;
+    gap: #{$spacing-unit * 2};
+    align-items: center;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      text-decoration: none;
+    }
+  }
+
+  &__stats-list-item {
+    display: flex;
+    flex-direction: column;
+    transition: all ease 0.1s;
+    color: $muted-color;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    padding: $spacing-unit;
+    gap: $spacing-unit;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      text-decoration: none;
+    }
+  }
+
+  &__games-grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: #{$spacing-unit * 2};
+    grid-template-columns: repeat(2, 1fr);
+
+    @container (min-width: 900px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    @container (min-width: 1300px) {
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    @container (min-width: 2000px) {
+      grid-template-columns: repeat(6, 1fr);
+    }
+
+    @container (min-width: 2600px) {
+      grid-template-columns: repeat(8, 1fr);
+    }
+
+    @container (min-width: 3000px) {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+
+  &__telescope-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: #{$spacing-unit * 2};
+  }
+
+  &__no-games {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: $spacing-unit;
+  }
+
+  &__list-item-image {
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    object-fit: cover;
+  }
+
+  &__list-item-details {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit / 2;
+    overflow: hidden;
+  }
+
+  &__list-item-title {
+    font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__list-item-description {
+    display: flex;
+    align-items: center;
+    gap: $spacing-unit;
+  }
+
+  &__default-avatar-wrapper {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $background-color;
+    border: solid 1px $border-color;
+    border-radius: 4px;
+  }
+
+  &__achievements-progress-bar {
+    width: 100%;
+    height: 4px;
+    transition: all ease 0.2s;
+
+    &::-webkit-progress-bar {
+      background-color: rgba(255, 255, 255, 0.15);
+      border-radius: 4px;
+    }
+
+    &::-webkit-progress-value {
+      background-color: $muted-color;
+      border-radius: 4px;
+    }
+  }
+
+  &__link {
+    text-align: start;
+    color: $body-color;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  &__game-card-stats {
+    width: 100%;
+    height: 100%;
+    transition: transform 0.5s ease-in-out;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts b/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts
deleted file mode 100644
index 2080e445..00000000
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const profileContentBox = style({
-  display: "flex",
-  flexDirection: "column",
-  position: "relative",
-});
-
-export const profileAvatarButton = style({
-  width: "96px",
-  minWidth: "96px",
-  height: "96px",
-  borderRadius: "4px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  border: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)",
-  cursor: "pointer",
-  transition: "all ease 0.3s",
-  color: vars.color.muted,
-  position: "relative",
-  ":hover": {
-    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.7)",
-  },
-});
-
-export const profileAvatar = style({
-  height: "100%",
-  width: "100%",
-  objectFit: "cover",
-  overflow: "hidden",
-});
-
-export const profileInformation = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-  alignItems: "flex-start",
-  color: "#c0c1c7",
-  zIndex: 1,
-  overflow: "hidden",
-});
-
-export const profileDisplayName = style({
-  fontWeight: "bold",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  textShadow: "0 0 5px rgb(0 0 0 / 40%)",
-});
-
-export const heroPanel = style({
-  width: "100%",
-  height: "72px",
-  minHeight: "72px",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  justifyContent: "space-between",
-  backdropFilter: `blur(15px)`,
-  borderTop: `solid 1px rgba(255, 255, 255, 0.1)`,
-  boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.5)",
-  backgroundColor: "rgba(0, 0, 0, 0.3)",
-});
-
-export const userInformation = style({
-  display: "flex",
-  padding: `${SPACING_UNIT * 7}px ${SPACING_UNIT * 3}px`,
-  alignItems: "center",
-  gap: `${SPACING_UNIT * 2}px`,
-});
-
-export const currentGameWrapper = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT / 2}px`,
-});
-
-export const currentGameDetails = style({
-  display: "flex",
-  flexDirection: "row",
-  gap: `${SPACING_UNIT}px`,
-  alignItems: "center",
-});
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
new file mode 100644
index 00000000..ce907f12
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -0,0 +1,92 @@
+@import "../../scss/variables";
+
+.profile-hero {
+  &__content-box {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  &__avatar-button {
+    width: 96px;
+    min-width: 96px;
+    height: 96px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $background-color;
+    border: solid 1px $border-color;
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
+    cursor: pointer;
+    transition: all ease 0.3s;
+    color: $muted-color;
+    position: relative;
+
+    &:hover {
+      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
+    }
+  }
+
+  &__avatar {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    overflow: hidden;
+  }
+
+  &__information {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit;
+    align-items: flex-start;
+    color: $muted-color;
+    z-index: 1;
+    overflow: hidden;
+  }
+
+  &__display-name {
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-shadow: 0 0 5px rgb(0 0 0 / 40%);
+  }
+
+  &__hero-panel {
+    width: 100%;
+    height: 72px;
+    min-height: 72px;
+    padding: #{$spacing-unit * 2} #{$spacing-unit * 3};
+    display: flex;
+    gap: $spacing-unit;
+    justify-content: space-between;
+    backdrop-filter: blur(15px);
+    border-top: solid 1px rgba(255, 255, 255, 0.1);
+    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &__user-information {
+    display: flex;
+    padding: #{$spacing-unit * 7} #{$spacing-unit * 3};
+    align-items: center;
+    gap: #{$spacing-unit * 2};
+  }
+
+  &__current-game-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit / 2};
+  }
+
+  &__current-game-details {
+    display: flex;
+    flex-direction: row;
+    gap: $spacing-unit;
+    align-items: center;
+  }
+}
diff --git a/src/renderer/src/pages/profile/profile.css.ts b/src/renderer/src/pages/profile/profile.css.ts
deleted file mode 100644
index 68f5fa56..00000000
--- a/src/renderer/src/pages/profile/profile.css.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { SPACING_UNIT } from "../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const wrapper = style({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-});
diff --git a/src/renderer/src/pages/profile/profile.scss b/src/renderer/src/pages/profile/profile.scss
new file mode 100644
index 00000000..d3f0b5bb
--- /dev/null
+++ b/src/renderer/src/pages/profile/profile.scss
@@ -0,0 +1,10 @@
+@import "../../scss/variables";
+
+.profile {
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 3};
+  }
+}
diff --git a/src/renderer/src/pages/profile/report-profile/report-profile.css.ts b/src/renderer/src/pages/profile/report-profile/report-profile.css.ts
deleted file mode 100644
index ba53fd62..00000000
--- a/src/renderer/src/pages/profile/report-profile/report-profile.css.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const reportButton = style({
-  alignSelf: "flex-end",
-  color: vars.color.muted,
-  gap: `${SPACING_UNIT}px`,
-  display: "flex",
-  cursor: "pointer",
-  alignItems: "center",
-  fontSize: "12px",
-});
diff --git a/src/renderer/src/pages/profile/report-profile/report-profile.scss b/src/renderer/src/pages/profile/report-profile/report-profile.scss
new file mode 100644
index 00000000..1fcc9c51
--- /dev/null
+++ b/src/renderer/src/pages/profile/report-profile/report-profile.scss
@@ -0,0 +1,13 @@
+@import "../../scss/variables";
+
+.report-profile {
+  &__report-button {
+    align-self: flex-end;
+    color: $muted-color;
+    gap: $spacing-unit;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    font-size: 12px;
+  }
+}
diff --git a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts
deleted file mode 100644
index 9a4e2c8f..00000000
--- a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { vars } from "../../../theme.css";
-
-export const uploadBackgroundImageButton = style({
-  position: "absolute",
-  top: 16,
-  right: 16,
-  borderColor: vars.color.body,
-  boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.8)",
-  backgroundColor: "rgba(0, 0, 0, 0.1)",
-  backdropFilter: "blur(20px)",
-});
diff --git a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss
new file mode 100644
index 00000000..a915e182
--- /dev/null
+++ b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss
@@ -0,0 +1,11 @@
+@import "../../scss/variables";
+
+.upload-background-image-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  border-color: $body-color;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(20px);
+}
diff --git a/src/renderer/src/pages/settings/settings-account.css.ts b/src/renderer/src/pages/settings/settings-account.css.ts
deleted file mode 100644
index 8fbb3845..00000000
--- a/src/renderer/src/pages/settings/settings-account.css.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const form = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-});
-
-export const blockedUser = style({
-  display: "flex",
-  minWidth: "240px",
-  justifyContent: "space-between",
-  alignItems: "center",
-  backgroundColor: vars.color.darkBackground,
-  border: `1px solid ${vars.color.border}`,
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px`,
-});
-
-export const unblockButton = style({
-  color: vars.color.muted,
-  cursor: "pointer",
-  transition: "all ease 0.2s",
-  ":hover": {
-    opacity: "0.7",
-  },
-});
-
-export const blockedUsersList = style({
-  padding: "0",
-  margin: "0",
-  listStyle: "none",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/settings/settings-account.scss b/src/renderer/src/pages/settings/settings-account.scss
new file mode 100644
index 00000000..ffb243fb
--- /dev/null
+++ b/src/renderer/src/pages/settings/settings-account.scss
@@ -0,0 +1,40 @@
+@import "../../scss/variables";
+
+.settings-account {
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 3};
+  }
+
+  &__blocked-user {
+    display: flex;
+    min-width: 240px;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $dark-background-color;
+    border: 1px solid $border-color;
+    border-radius: 4px;
+    padding: $spacing-unit;
+  }
+
+  &__unblock-button {
+    color: $muted-color;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  &__blocked-users-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $spacing-unit;
+  }
+}
diff --git a/src/renderer/src/pages/settings/settings-download-sources.css.ts b/src/renderer/src/pages/settings/settings-download-sources.css.ts
deleted file mode 100644
index caa93ce8..00000000
--- a/src/renderer/src/pages/settings/settings-download-sources.css.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { SPACING_UNIT, vars } from "../../theme.css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const downloadSources = style({
-  padding: "0",
-  margin: "0",
-  gap: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const downloadSourceItem = recipe({
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    backgroundColor: vars.color.darkBackground,
-    borderRadius: "8px",
-    padding: `${SPACING_UNIT * 2}px`,
-    gap: `${SPACING_UNIT}px`,
-    border: `solid 1px ${vars.color.border}`,
-    transition: "all ease 0.2s",
-  },
-  variants: {
-    isSyncing: {
-      true: {
-        opacity: vars.opacity.disabled,
-      },
-    },
-  },
-});
-
-export const downloadSourceItemHeader = style({
-  marginBottom: `${SPACING_UNIT}px`,
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadSourcesHeader = style({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-});
-
-export const navigateToCatalogueButton = style({
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-  color: vars.color.muted,
-  textDecoration: "underline",
-  cursor: "pointer",
-
-  ":disabled": {
-    cursor: "default",
-    textDecoration: "none",
-  },
-});
diff --git a/src/renderer/src/pages/settings/settings-download-sources.scss b/src/renderer/src/pages/settings/settings-download-sources.scss
new file mode 100644
index 00000000..b8a9b9ba
--- /dev/null
+++ b/src/renderer/src/pages/settings/settings-download-sources.scss
@@ -0,0 +1,53 @@
+@import "../../scss/variables";
+
+.settings-download-sources {
+  &__download-sources {
+    padding: 0;
+    margin: 0;
+    gap: #{$spacing-unit * 2};
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__download-source-item {
+    display: flex;
+    flex-direction: column;
+    background-color: $dark-background-color;
+    border-radius: 8px;
+    padding: #{$spacing-unit * 2};
+    gap: $spacing-unit;
+    border: solid 1px $border-color;
+    transition: all ease 0.2s;
+
+    &--is-syncing {
+      opacity: $disabled-opacity;
+    }
+  }
+
+  &__download-source-item-header {
+    margin-bottom: $spacing-unit;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit;
+  }
+
+  &__download-sources-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__navigate-to-catalogue-button {
+    display: flex;
+    align-items: center;
+    gap: $spacing-unit;
+    color: $muted-color;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+      text-decoration: none;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/settings/settings-real-debrid.css.ts b/src/renderer/src/pages/settings/settings-real-debrid.css.ts
deleted file mode 100644
index 0dfc9d78..00000000
--- a/src/renderer/src/pages/settings/settings-real-debrid.css.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const form = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const description = style({
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
diff --git a/src/renderer/src/pages/settings/settings-real-debrid.scss b/src/renderer/src/pages/settings/settings-real-debrid.scss
new file mode 100644
index 00000000..462529c8
--- /dev/null
+++ b/src/renderer/src/pages/settings/settings-real-debrid.scss
@@ -0,0 +1,13 @@
+@import "../../scss/variables";
+
+.settings-real-debrid {
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit;
+  }
+
+  &__description {
+    margin-bottom: #{$spacing-unit * 2};
+  }
+}
diff --git a/src/renderer/src/pages/settings/settings.css.ts b/src/renderer/src/pages/settings/settings.css.ts
deleted file mode 100644
index 9f607ece..00000000
--- a/src/renderer/src/pages/settings/settings.css.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const container = style({
-  padding: "24px",
-  width: "100%",
-  display: "flex",
-});
-
-export const content = style({
-  backgroundColor: vars.color.background,
-  width: "100%",
-  height: "100%",
-  padding: `${SPACING_UNIT * 3}px`,
-  border: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 15px 0px #000000",
-  borderRadius: "8px",
-  gap: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const settingsCategories = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/settings/settings.scss b/src/renderer/src/pages/settings/settings.scss
new file mode 100644
index 00000000..faeed468
--- /dev/null
+++ b/src/renderer/src/pages/settings/settings.scss
@@ -0,0 +1,27 @@
+@import "../../scss/variables";
+
+.settings {
+  &__container {
+    padding: 24px;
+    width: 100%;
+    display: flex;
+  }
+
+  &__content {
+    background-color: $background-color;
+    width: 100%;
+    height: 100%;
+    padding: #{$spacing-unit * 3};
+    border: solid 1px $border-color;
+    box-shadow: 0px 0px 15px 0px #000000;
+    border-radius: 8px;
+    gap: #{$spacing-unit * 2};
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__categories {
+    display: flex;
+    gap: $spacing-unit;
+  }
+}
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
index 38f0dd25..fba1cf33 100644
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
@@ -1,8 +1,8 @@
 import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react";
-import * as styles from "./user-friend-modal.css";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { useTranslation } from "react-i18next";
 import { Avatar } from "@renderer/components";
+import "./user-friend-modal.scss";
+import "@renderer/theme.scss";
 
 export type UserFriendItemProps = {
   userId: string;
@@ -45,7 +45,7 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
     if (type === "SENT") {
       return (
         <button
-          className={styles.cancelRequestButton}
+          className="cancel-request-button"
           onClick={() => props.onClickCancelRequest(userId)}
           title={t("cancel_request")}
         >
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts
deleted file mode 100644
index a164c900..00000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const friendListDisplayName = style({
-  fontWeight: "bold",
-  fontSize: vars.size.body,
-  textAlign: "left",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-export const friendListContainer = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 3}px`,
-  alignItems: "center",
-  borderRadius: "4px",
-  border: `solid 1px ${vars.color.border}`,
-  width: "100%",
-  height: "54px",
-  minHeight: "54px",
-  transition: "all ease 0.2s",
-  position: "relative",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-  },
-});
-
-export const friendListButton = style({
-  display: "flex",
-  alignItems: "center",
-  position: "absolute",
-  cursor: "pointer",
-  height: "100%",
-  width: "100%",
-  flexDirection: "row",
-  color: vars.color.body,
-  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
-  padding: `0 ${SPACING_UNIT}px`,
-});
-
-export const friendRequestItem = style({
-  color: vars.color.body,
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-  },
-});
-
-export const acceptRequestButton = style({
-  cursor: "pointer",
-  color: vars.color.body,
-  width: "28px",
-  height: "28px",
-  ":hover": {
-    color: vars.color.success,
-  },
-});
-
-export const cancelRequestButton = style({
-  cursor: "pointer",
-  color: vars.color.body,
-  width: "28px",
-  height: "28px",
-  ":hover": {
-    color: vars.color.danger,
-  },
-});
-
-export const friendCodeButton = style({
-  color: vars.color.body,
-  cursor: "pointer",
-  display: "flex",
-  gap: `${SPACING_UNIT / 2}px`,
-  alignItems: "center",
-  transition: "all ease 0.2s",
-  ":hover": {
-    color: vars.color.muted,
-  },
-});
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
new file mode 100644
index 00000000..bb20ec09
--- /dev/null
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
@@ -0,0 +1,85 @@
+@import "../../scss/variables";
+
+.user-friend-modal {
+  &__friend-list-display-name {
+    font-weight: bold;
+    font-size: $body-size;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__friend-list-container {
+    display: flex;
+    gap: #{$spacing-unit * 3};
+    align-items: center;
+    border-radius: 4px;
+    border: solid 1px $border-color;
+    width: 100%;
+    height: 54px;
+    min-height: 54px;
+    transition: all ease 0.2s;
+    position: relative;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+  }
+
+  &__friend-list-button {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+    flex-direction: row;
+    color: $body-color;
+    gap: #{$spacing-unit + $spacing-unit / 2};
+    padding: 0 $spacing-unit;
+  }
+
+  &__friend-request-item {
+    color: $body-color;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+  }
+
+  &__accept-request-button {
+    cursor: pointer;
+    color: $body-color;
+    width: 28px;
+    height: 28px;
+
+    &:hover {
+      color: $success-color;
+    }
+  }
+
+  &__cancel-request-button {
+    cursor: pointer;
+    color: $body-color;
+    width: 28px;
+    height: 28px;
+
+    &:hover {
+      color: $danger-color;
+    }
+  }
+
+  &__friend-code-button {
+    color: $body-color;
+    cursor: pointer;
+    display: flex;
+    gap: $spacing-unit / 2;
+    align-items: center;
+    transition: all ease 0.2s;
+
+    &:hover {
+      color: $muted-color;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
index d827fa20..c1d3c631 100644
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
@@ -1,12 +1,11 @@
 import { Button, Modal } from "@renderer/components";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UserFriendModalAddFriend } from "./user-friend-modal-add-friend";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { UserFriendModalList } from "./user-friend-modal-list";
 import { CopyIcon } from "@primer/octicons-react";
-import * as styles from "./user-friend-modal.css";
+import "./user-friend-modal.scss";
 
 export enum UserFriendModalTab {
   FriendsList,
@@ -64,33 +63,20 @@ export const UserFriendModal = ({
 
   return (
     <Modal visible={visible} title={t("friends")} onClose={onClose}>
-      <div
-        style={{
-          display: "flex",
-          width: "500px",
-          flexDirection: "column",
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
+      <div className="user-friend-modal__container">
         {isMe && (
           <>
-            <div
-              style={{
-                display: "flex",
-                gap: `${SPACING_UNIT}px`,
-                alignItems: "center",
-              }}
-            >
+            <div className="user-friend-modal__friend-code">
               <p>{t("your_friend_code")}</p>
               <button
-                className={styles.friendCodeButton}
+                className="user-friend-modal__friend-code-button"
                 onClick={copyToClipboard}
               >
                 <h3>{userDetails.id}</h3>
                 <CopyIcon />
               </button>
             </div>
-            <section style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
+            <section className="user-friend-modal__tabs">
               {tabs.map((tab, index) => {
                 return (
                   <Button
diff --git a/src/renderer/src/scss/globals.scss b/src/renderer/src/scss/_variables.scss
similarity index 56%
rename from src/renderer/src/scss/globals.scss
rename to src/renderer/src/scss/_variables.scss
index 12bad37c..0bb6ed6f 100644
--- a/src/renderer/src/scss/globals.scss
+++ b/src/renderer/src/scss/_variables.scss
@@ -20,6 +20,18 @@ $title-bar-z-index: 4;
 $backdrop-z-index: 4;
 $modal-z-index: 5;
 
+$search-width: 200px;
+$search-width-focused: 250px;
+$search-border-color-focused: #dadbe1;
+$search-border-color-hover: rgba(255, 255, 255, 0.5);
+$search-input-color: #dadbe1;
+$action-button-hover-color: #dadbe1;
+$back-button-width: 16px;
+$back-button-height: 16px;
+$title-transform: translateX(28px);
+$title-width: calc(100% - 28px);
+$new-version-font-size: 12px;
+
 $body-font-size: 14px;
 $small-font-size: 12px;
 
diff --git a/src/renderer/src/theme.css.ts b/src/renderer/src/theme.css.ts
deleted file mode 100644
index b9fbaf55..00000000
--- a/src/renderer/src/theme.css.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createGlobalTheme } from "@vanilla-extract/css";
-
-export const SPACING_UNIT = 8;
-
-export const vars = createGlobalTheme(":root", {
-  color: {
-    background: "#1c1c1c",
-    darkBackground: "#151515",
-    muted: "#c0c1c7",
-    body: "#8e919b",
-    border: "rgba(255, 255, 255, 0.15)",
-    success: "#1c9749",
-    danger: "#e11d48",
-    warning: "#ffc107",
-  },
-  opacity: {
-    disabled: "0.5",
-    active: "0.7",
-  },
-  size: {
-    body: "14px",
-    small: "12px",
-  },
-  zIndex: {
-    toast: "5",
-    bottomPanel: "3",
-    titleBar: "4",
-    backdrop: "4",
-  },
-});