diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index 77dbfa1..b6a1a09 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -7,6 +7,10 @@ export default defineNuxtConfig({
   srcDir: 'src/',
   ssr: false,
   telemetry: false,
+  compatibilityDate: '2025-04-17',
+  devtools: {
+    enabled: false,
+  },
   modules: [
     '@pinia/nuxt',
     'nuxt-icons',
diff --git a/client/package.json b/client/package.json
index 082175d..f6578f1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,7 +14,7 @@
     "http-proxy": "^1.18.1",
     "nuxt": "^3.16.2",
     "sass": "^1.86.3",
-    "sass-loader": "^13.3.3",
+    "sass-loader": "^16.0.5",
     "typescript-strict-plugin": "^2.4.4",
     "webpack": "^5.99.5"
   },
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index e0af77c..5d6e241 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -58,8 +58,8 @@ importers:
         specifier: ^1.86.3
         version: 1.86.3
       sass-loader:
-        specifier: ^13.3.3
-        version: 13.3.3(sass@1.86.3)(webpack@5.99.5)
+        specifier: ^16.0.5
+        version: 16.0.5(sass@1.86.3)(webpack@5.99.5)
       typescript-strict-plugin:
         specifier: ^2.4.4
         version: 2.4.4
@@ -3349,17 +3349,17 @@ packages:
     resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
     engines: {node: '>=10'}
 
-  sass-loader@13.3.3:
-    resolution: {integrity: sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA==}
-    engines: {node: '>= 14.15.0'}
+  sass-loader@16.0.5:
+    resolution: {integrity: sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==}
+    engines: {node: '>= 18.12.0'}
     peerDependencies:
-      fibers: '>= 3.1.0'
+      '@rspack/core': 0.x || 1.x
       node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
       sass: ^1.3.0
       sass-embedded: '*'
       webpack: ^5.0.0
     peerDependenciesMeta:
-      fibers:
+      '@rspack/core':
         optional: true
       node-sass:
         optional: true
@@ -3367,6 +3367,8 @@ packages:
         optional: true
       sass-embedded:
         optional: true
+      webpack:
+        optional: true
 
   sass@1.86.3:
     resolution: {integrity: sha512-iGtg8kus4GrsGLRDLRBRHY9dNVA78ZaS7xr01cWnS7PEMQyFtTqBiyCrfpTYTZXRWM94akzckYjh8oADfFNTzw==}
@@ -7778,12 +7780,12 @@ snapshots:
 
   safe-stable-stringify@2.5.0: {}
 
-  sass-loader@13.3.3(sass@1.86.3)(webpack@5.99.5):
+  sass-loader@16.0.5(sass@1.86.3)(webpack@5.99.5):
     dependencies:
       neo-async: 2.6.2
-      webpack: 5.99.5
     optionalDependencies:
       sass: 1.86.3
+      webpack: 5.99.5
 
   sass@1.86.3:
     dependencies:
diff --git a/client/src/assets/css/components.scss b/client/src/assets/css/components.scss
deleted file mode 100644
index 2ada391..0000000
--- a/client/src/assets/css/components.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import './colors.scss';
-@import './media.scss';
-
-$font-primary: 'Wendy One';
-$font-secondary: 'Dosis';
diff --git a/client/src/assets/css/fonts-definition.scss b/client/src/assets/css/fonts-definition.scss
new file mode 100644
index 0000000..a7d72ad
--- /dev/null
+++ b/client/src/assets/css/fonts-definition.scss
@@ -0,0 +1,26 @@
+@font-face {
+  font-family: 'Wendy One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/wendy-one/WendyOne-Regular.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Dosis';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(/fonts/dosis/dosis-300.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Dosis';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url(/fonts/dosis/dosis-800.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/client/src/assets/css/fonts.scss b/client/src/assets/css/fonts.scss
index a7d72ad..1d98029 100644
--- a/client/src/assets/css/fonts.scss
+++ b/client/src/assets/css/fonts.scss
@@ -1,26 +1,2 @@
-@font-face {
-  font-family: 'Wendy One';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/wendy-one/WendyOne-Regular.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: 'Dosis';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url(/fonts/dosis/dosis-300.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: 'Dosis';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url(/fonts/dosis/dosis-800.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+$font-primary: 'Wendy One';
+$font-secondary: 'Dosis';
diff --git a/client/src/components/AlertBox.vue b/client/src/components/AlertBox.vue
index 16044da..eede4c9 100644
--- a/client/src/components/AlertBox.vue
+++ b/client/src/components/AlertBox.vue
@@ -7,7 +7,7 @@
 </template>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
 
 .alert {
     &__container {
@@ -24,11 +24,11 @@
         width: auto;
         margin: 2em auto auto auto;
         padding: 2em;
-        border: $alert-border;
+        border: colors.$alert-border;
         border-radius: 10px;
-        background-color: $alert-background-color;
+        background-color: colors.$alert-background-color;
         font-size: 24px;
-        color: $text-primary-color;
+        color: colors.$text-primary-color;
     }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/components/Button.vue b/client/src/components/Button.vue
index 924a545..bf959f1 100644
--- a/client/src/components/Button.vue
+++ b/client/src/components/Button.vue
@@ -27,16 +27,17 @@ defineProps({
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
+@use '~/assets/css/fonts';
 
 .button {
   &__button {
     display: inline-block;
     padding: 4px 24px;
     background-color: inherit;
-    color: $text-secondary-color;
+    color: colors.$text-secondary-color;
     text-align: center;
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-weight: bold;
     font-size: 24px;
     border: none;
@@ -44,44 +45,44 @@ defineProps({
     cursor: pointer;
 
     &:hover {
-      color: $text-secondary-hover-color;
+      color: colors.$text-secondary-hover-color;
     }
 
     &__border {
-      background-color: $button-background-color;
-      color: $button-text-color;
-      border: $button-border;
+      background-color: colors.$button-background-color;
+      color: colors.$button-text-color;
+      border: colors.$button-border;
       border-radius: 8px;
 
       &:hover {
-        border: $button-hover-border;
-        background-color: $button-hover-background-color;
-        color: $button-hover-text-color;
+        border: colors.$button-hover-border;
+        background-color: colors.$button-hover-background-color;
+        color: colors.$button-hover-text-color;
       }
     }
 
     &__disabled,
     &__disabled:hover {
       cursor: default;
-      background-color: $button-disabled-background-color;
+      background-color: colors.$button-disabled-background-color;
       margin: 4px;
-      color: $button-disabled-text-color;
+      color: colors.$button-disabled-text-color;
 
       &.button__button__border {
         margin: 0;
-        border: $button-disabled-border-border;
+        border: colors.$button-disabled-border-border;
       }
     }
 
     &__caution {
-      background-color: $button-caution-background-color;
-      border: $button-caution-border;
-      color: $button-caution-text-color;
+      background-color: colors.$button-caution-background-color;
+      border: colors.$button-caution-border;
+      color: colors.$button-caution-text-color;
 
       &:hover {
-        background-color: $button-caution-hover-background-color;
-        border: $button-caution-hover-border;
-        color: $button-caution-hover-text-color;
+        background-color: colors.$button-caution-hover-background-color;
+        border: colors.$button-caution-hover-border;
+        color: colors.$button-caution-hover-text-color;
       }
     }
 
diff --git a/client/src/components/CollectQuotes.vue b/client/src/components/CollectQuotes.vue
index 1796d57..4dd929e 100644
--- a/client/src/components/CollectQuotes.vue
+++ b/client/src/components/CollectQuotes.vue
@@ -39,13 +39,13 @@ const editEnd = () => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
 
 .collect-quotes {
   &__explaination-box {
     margin: 16px;
 
-    @media (max-width: $phone-width) {
+    @media (max-width: media.$phone-width) {
       display: none;
     }
   }
diff --git a/client/src/components/CreateTeamDialog.vue b/client/src/components/CreateTeamDialog.vue
index 8bf12c0..f2df371 100644
--- a/client/src/components/CreateTeamDialog.vue
+++ b/client/src/components/CreateTeamDialog.vue
@@ -86,11 +86,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .create-team-dialog {
   &__description {
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-size: 18px;
   }
 
@@ -107,8 +108,8 @@ onMounted(() => {
 
   &__input {
     border: 1px solid white;
-    background-color: $dialog-box-background-color;
-    color: $dialog-box-text-color;
+    background-color: colors.$dialog-box-background-color;
+    color: colors.$dialog-box-text-color;
     border-radius: 4px;
   }
 
@@ -121,14 +122,14 @@ onMounted(() => {
   }
 
   &__auth-message {
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-size: 24px;
     text-align: center;
     margin: 32px;
   }
 
   &__pin {
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-size: 32px;
     font-weight: 800;
     text-align: center;
diff --git a/client/src/components/DialogBox.vue b/client/src/components/DialogBox.vue
index 7847b61..8239f5e 100644
--- a/client/src/components/DialogBox.vue
+++ b/client/src/components/DialogBox.vue
@@ -23,7 +23,9 @@ const emit = defineEmits(['close'])
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .dialog-box {
   &__container {
@@ -32,13 +34,13 @@ const emit = defineEmits(['close'])
     min-width: 400px;
     min-height: 280px;
     margin: auto;
-    background-color: $dialog-box-background-color;
-    border: $dialog-box-border;
+    background-color: colors.$dialog-box-background-color;
+    border: colors.$dialog-box-border;
     border-radius: 8px;
-    color: $dialog-box-text-color;
+    color: colors.$dialog-box-text-color;
     z-index: 12;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       min-width: unset;
     }
   }
@@ -51,14 +53,14 @@ const emit = defineEmits(['close'])
   &__title {
     flex-grow: 1;
     margin: 36px 36px 8px 36px;
-    font-family: $font-primary;
+    font-family: fonts.$font-primary;
     font-size: 24px;
   }
 
   &__body {
     flex-grow: 1;
     margin: 36px;
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
   }
 
   &__footer {
diff --git a/client/src/components/EngineDebug.vue b/client/src/components/EngineDebug.vue
index 6b50f60..6e31c5a 100644
--- a/client/src/components/EngineDebug.vue
+++ b/client/src/components/EngineDebug.vue
@@ -17,20 +17,20 @@ const engineJson = computed(() => JSON.stringify(engine.json, null, 2))
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
 
 .enginedebug {
   &__container {
     width: 100%;
     max-height: 100%;
-    border: $debug-border;
-    background-color: $debug-background-color;
+    border: colors.$debug-border;
+    background-color: colors.$debug-background-color;
     overflow: auto;
   }
 
   &__json {
     padding: 0 0 0 1em;
-    color: $debug-text-color;
+    color: colors.$debug-text-color;
     font-size: 10px;
   }
 }
diff --git a/client/src/components/GameControls.vue b/client/src/components/GameControls.vue
index 6304531..6aff4f0 100644
--- a/client/src/components/GameControls.vue
+++ b/client/src/components/GameControls.vue
@@ -57,7 +57,8 @@ const backToPlay = () => { useRouter().push('/play') }
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .game-controls {
   &__container {
@@ -70,12 +71,12 @@ const backToPlay = () => { useRouter().push('/play') }
 
     &__end {
       margin-left: auto;
-      color: $text-primary-color;
+      color: colors.$text-primary-color;
       font-size: 16px;
-      font-family: $font-primary;
+      font-family: fonts.$font-primary;
 
       &:hover {
-        color: $text-primary-hover-color;
+        color: colors.$text-primary-hover-color;
       }
     }
   }
diff --git a/client/src/components/Highscores.vue b/client/src/components/Highscores.vue
index 0664e37..5f00693 100644
--- a/client/src/components/Highscores.vue
+++ b/client/src/components/Highscores.vue
@@ -35,7 +35,9 @@ const players = computed(() => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .highscores {
   &__container-outer {
@@ -51,7 +53,7 @@ const players = computed(() => {
     width: 600px;
     min-height: 600px;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       width: 300px;
     }
   }
@@ -64,10 +66,10 @@ const players = computed(() => {
     height: 100%;
     padding: 2px;
     border-radius: 32px;
-    background: linear-gradient(45deg, $highscores-border-color 0, $highscores-border-color 68%, #ffffff 70%, $highscores-border-color 72%, $highscores-border-color 100%);
+    background: linear-gradient(45deg, colors.$highscores-border-color 0, colors.$highscores-border-color 68%, #ffffff 70%, colors.$highscores-border-color 72%, colors.$highscores-border-color 100%);
     background-size: 1000% 1000%;
     animation: highscores-gradient 10s linear infinite 5s;
-    color: $highscores-text-color;
+    color: colors.$highscores-text-color;
 
     &::after {
       content: '';
@@ -77,7 +79,7 @@ const players = computed(() => {
       top: 0;
       width: 100%;
       height: 100%;
-      background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, $highscores-background-color 60%);
+      background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, colors.$highscores-background-color 60%);
       background-size: 1000% 1000%;
       animation: highscores-gradient__fade-in 10s ease forwards;
     }
@@ -89,16 +91,16 @@ const players = computed(() => {
     height: 100px;
     align-items: center;
     justify-content: center;
-    background-color: $highscores-background-color;
+    background-color: colors.$highscores-background-color;
     border-radius: 32px 32px 0 0;
     margin-bottom: 2px;
   }
 
   &__title {
-    font-family: $font-primary;
+    font-family: fonts.$font-primary;
     font-size: 48px;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       font-size: 32px;
       padding: 20px;
       text-align: center;
@@ -108,12 +110,12 @@ const players = computed(() => {
   &__table-body {
     width: 100%;
     height: 100%;
-    background-color: $highscores-background-color;
+    background-color: colors.$highscores-background-color;
     border-radius: 0 0 32px 32px;
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-size: 32px;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       font-size: 24px;
     }
   }
diff --git a/client/src/components/InfoModal.vue b/client/src/components/InfoModal.vue
index 99db2c7..191a592 100644
--- a/client/src/components/InfoModal.vue
+++ b/client/src/components/InfoModal.vue
@@ -51,14 +51,15 @@ const close = () => { window.location.href = '/' }
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .info {
   &__container {
     display: flex;
     width: 100%;
     height: 100%;
-    color: $text-primary-color;
+    color: colors.$text-primary-color;
   }
 
   &__box {
@@ -67,12 +68,12 @@ const close = () => { window.location.href = '/' }
     min-width: 600px;
     margin: auto;
     padding: 32px;
-    border: 1px solid white;
+    border: 1px solid #ffffff;
     border-radius: 16px;
   }
 
   &__title {
-    font-family: $font-primary;
+    font-family: fonts.$font-primary;
     margin: 0 32px 32px 0;
     font-size: 48px;
   }
@@ -80,11 +81,11 @@ const close = () => { window.location.href = '/' }
   &__subtitle {
     margin: 32px 0 8px 0;
     font-size: 24px;
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
   }
 
   &__table {
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
 
     &-key {
       width: 6em;
diff --git a/client/src/components/Lobby.vue b/client/src/components/Lobby.vue
index 2ffff95..967a0fb 100644
--- a/client/src/components/Lobby.vue
+++ b/client/src/components/Lobby.vue
@@ -18,7 +18,9 @@ const { $t } = useI18n({
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .lobby {
   &__container {
@@ -30,12 +32,12 @@ const { $t } = useI18n({
   &__message {
     flex-grow: 1;
     margin: 60px 48px 0 200px;
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-size: 24px;
     text-align: center;
-    color: $text-primary-color;
+    color: colors.$text-primary-color;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       margin: 60px 48px;
     }
   }
@@ -44,7 +46,7 @@ const { $t } = useI18n({
     width: 200px;
     margin: 16px 16px 0 0;
 
-    @media (max-width: $phone-width) {
+    @media (max-width: media.$phone-width) {
       display: none;
     }
   }
diff --git a/client/src/components/LoginBox.vue b/client/src/components/LoginBox.vue
index 28d5f06..2d26998 100644
--- a/client/src/components/LoginBox.vue
+++ b/client/src/components/LoginBox.vue
@@ -37,7 +37,8 @@ const login = (): void => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
+@use '~/assets/css/fonts';
 
 .login-box {
   &__container-outer {
@@ -55,9 +56,9 @@ const login = (): void => {
     margin: 0 16px;
     background: transparent;
     border: none;
-    border-bottom: $box-primary-border;
-    color: $text-primary-color;
-    font-family: $font-secondary;
+    border-bottom: colors.$box-primary-border;
+    color: colors.$text-primary-color;
+    font-family: fonts.$font-secondary;
     font-weight: 800;
     font-size: 24px;
     outline: none;
@@ -68,7 +69,7 @@ const login = (): void => {
     width: 240px;
     text-align: center;
     margin: 8px;
-    color: $text-error-color;
+    color: colors.$text-error-color;
   }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/components/ModalDialog.vue b/client/src/components/ModalDialog.vue
index c24d501..0228923 100644
--- a/client/src/components/ModalDialog.vue
+++ b/client/src/components/ModalDialog.vue
@@ -20,7 +20,7 @@ const emit = defineEmits(['close'])
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
 
 .modal-dialog {
   &__container {
@@ -36,7 +36,7 @@ const emit = defineEmits(['close'])
     position: absolute;
     width: 100%;
     height: 100%;
-    background-color: $modal-dialog-backdrop-background-color;
+    background-color: colors.$modal-dialog-backdrop-background-color;
     z-index: 10;
   }
 }
diff --git a/client/src/components/Player.vue b/client/src/components/Player.vue
index 055fdcb..582369c 100644
--- a/client/src/components/Player.vue
+++ b/client/src/components/Player.vue
@@ -25,19 +25,20 @@ defineProps<{
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .player {
   &__row {
     display: flex;
-    background-color: $box-primary-background-color;
-    color: $box-primary-text-color;
-    font-family: $font-secondary;
+    background-color: colors.$box-primary-background-color;
+    color: colors.$box-primary-text-color;
+    font-family: fonts.$font-secondary;
     font-size: 18px;
 
     &__idle {
-      background-color: $box-primary-disabled-background-color;
-      color: $box-primary-disabled-text-color;
+      background-color: colors.$box-primary-disabled-background-color;
+      color: colors.$box-primary-disabled-text-color;
     }
   }
 
diff --git a/client/src/components/PlayerList.vue b/client/src/components/PlayerList.vue
index dcc910d..6f1f289 100644
--- a/client/src/components/PlayerList.vue
+++ b/client/src/components/PlayerList.vue
@@ -20,12 +20,12 @@ const round = useRoundStore().round
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
 
 .player-list {
   padding: 8px;
-  border: $box-primary-border;
+  border: colors.$box-primary-border;
   border-radius: 10px;
-  background-color: $box-primary-background-color;
+  background-color: colors.$box-primary-background-color;
 }
 </style>
diff --git a/client/src/components/Playground.vue b/client/src/components/Playground.vue
index 56d004a..3d33e2b 100644
--- a/client/src/components/Playground.vue
+++ b/client/src/components/Playground.vue
@@ -80,7 +80,7 @@ sources.forEach((source, index) => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
 
 .playground {
   &__container {
@@ -95,7 +95,7 @@ sources.forEach((source, index) => {
     flex-grow: 1;
     margin: 40px;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       margin: 0;
     }
   }
@@ -106,7 +106,7 @@ sources.forEach((source, index) => {
     justify-content: space-around;
     gap: 24px 36px;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       order: 2;
     }
   }
@@ -114,7 +114,7 @@ sources.forEach((source, index) => {
   &__spacer {
     flex-grow: 3;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       flex-grow: 1;
     }
   }
@@ -130,7 +130,7 @@ sources.forEach((source, index) => {
       opacity: 100%;
     }
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       flex-grow: 1;
     }
   }
@@ -146,7 +146,7 @@ sources.forEach((source, index) => {
       animation-fill-mode: forwards;
     }
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       order: 3;
       margin: 64px 32px;
     }
@@ -156,11 +156,11 @@ sources.forEach((source, index) => {
     width: 200px;
     margin: 16px 16px 0 64px;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       display: none;
     }
 
-    @media (max-width: calc($desktop-min-width - 1px)) {
+    @media (max-width: calc(media.$desktop-min-width - 1px)) {
       margin-left: 16px;
     }
   }
diff --git a/client/src/components/QuoteCard.vue b/client/src/components/QuoteCard.vue
index 36aedcd..c001ce4 100644
--- a/client/src/components/QuoteCard.vue
+++ b/client/src/components/QuoteCard.vue
@@ -99,7 +99,9 @@ const keydown = async (ev: KeyboardEvent) => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .quote-card {
   &__container {
@@ -108,12 +110,12 @@ const keydown = async (ev: KeyboardEvent) => {
     height: 150px;
     margin: 32px;
     padding: 32px;
-    background-color: $quote-background-color;
-    border: $quote-border;
+    background-color: colors.$quote-background-color;
+    border: colors.$quote-border;
     border-radius: 0 16px 0 0;
-    color: $quote-text-color;
+    color: colors.$quote-text-color;
 
-    @media (max-width: $phone-width) {
+    @media (max-width: media.$phone-width) {
       width: 240px;
       height: 120px;
       padding: 16px;
@@ -123,7 +125,7 @@ const keydown = async (ev: KeyboardEvent) => {
       cursor: text;
 
       &__edit-mode {
-        background-color: $quote-editmode-background-color;
+        background-color: colors.$quote-editmode-background-color;
       }
 
       & .quote-card__quote {
@@ -134,7 +136,7 @@ const keydown = async (ev: KeyboardEvent) => {
     &__text-short {
       font-size: 24px;
 
-      @media (max-width: $phone-width) {
+      @media (max-width: media.$phone-width) {
         font-size: 20px;
       }
     }
@@ -142,7 +144,7 @@ const keydown = async (ev: KeyboardEvent) => {
     &__text-medium {
       font-size: 20px;
 
-      @media (max-width: $phone-width) {
+      @media (max-width: media.$phone-width) {
         font-size: 18px;
       }
     }
@@ -150,7 +152,7 @@ const keydown = async (ev: KeyboardEvent) => {
     &__text-long {
       font-size: 18px;
 
-      @media (max-width: $phone-width) {
+      @media (max-width: media.$phone-width) {
         font-size: 14px;
       }
     }
@@ -166,7 +168,7 @@ const keydown = async (ev: KeyboardEvent) => {
 
   &__quote {
     margin: 2px;
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-weight: bold;
     text-align: center;
     cursor: default;
diff --git a/client/src/components/QuoteCardActionButton.vue b/client/src/components/QuoteCardActionButton.vue
index f419bb6..dbb6928 100644
--- a/client/src/components/QuoteCardActionButton.vue
+++ b/client/src/components/QuoteCardActionButton.vue
@@ -11,25 +11,26 @@ defineProps<{
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .quote-card-action-button {
   &__button {
     margin: 0 4px;
     width: 48px;
     height: 48px;
-    border: $quote-button-border;
+    border: colors.$quote-button-border;
     border-radius: 48px;
-    background-color: $quote-button-background-color;
-    color: $quote-button-text-color;
-    font-family: $font-secondary;
+    background-color: colors.$quote-button-background-color;
+    color: colors.$quote-button-text-color;
+    font-family: fonts.$font-secondary;
     font-size: 24px;
     cursor: pointer;
 
     &:hover {
-      border: $quote-button-hover-border;
-      background-color: $quote-button-hover-background-color;
-      color: $quote-button-hover-text-color;
+      border: colors.$quote-button-hover-border;
+      background-color: colors.$quote-button-hover-background-color;
+      color: colors.$quote-button-hover-text-color;
     }
   }
 }
diff --git a/client/src/components/QuoteCardNew.vue b/client/src/components/QuoteCardNew.vue
index f6b10d2..a47afcb 100644
--- a/client/src/components/QuoteCardNew.vue
+++ b/client/src/components/QuoteCardNew.vue
@@ -5,7 +5,8 @@
 </template>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/colors';
 
 .quote-card-new {
   &__container {
@@ -16,18 +17,18 @@
     height: 150px;
     margin: 32px;
     padding: 28px;
-    background-color: $quote-new-background-color;
-    border: $quote-new-border;
+    background-color: colors.$quote-new-background-color;
+    border: colors.$quote-new-border;
     border-radius: 0 16px 0 0;
     cursor: pointer;
 
     &:hover {
-      background-color: $quote-new-hover-background-color;
-      border: $quote-new-hover-border;
-      color: $quote-new-hover-text-color;
+      background-color: colors.$quote-new-hover-background-color;
+      border: colors.$quote-new-hover-border;
+      color: colors.$quote-new-hover-text-color;
     }
 
-    @media (max-width: $phone-width) {
+    @media (max-width: media.$phone-width) {
       width: 240px;
       height: 120px;
       padding: 12px;
@@ -37,7 +38,7 @@
   &__new {
     width: 100%;
     font-size: 72px;
-    color: $quote-new-text-color;
+    color: colors.$quote-new-text-color;
     text-align: center;
   }
 }
diff --git a/client/src/components/QuoteExplainationBox.vue b/client/src/components/QuoteExplainationBox.vue
index ca3f2c5..d37c4fb 100644
--- a/client/src/components/QuoteExplainationBox.vue
+++ b/client/src/components/QuoteExplainationBox.vue
@@ -93,12 +93,14 @@ onBeforeUnmount(() => { window.clearInterval(timer) })
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use 'sass:color';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .quote-explaination-box {
   &__container {
     padding: 16px;
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-size: 24px;
   }
 
@@ -134,11 +136,11 @@ onBeforeUnmount(() => { window.clearInterval(timer) })
   }
 
   &__container-small {
-    color: darken($text-primary-color, 20%);
+    color: color.adjust(colors.$text-primary-color, $lightness: -20%);
     cursor: pointer;
 
     &:hover {
-      color: $text-primary-color;
+      color: colors.$text-primary-color;
     }
   }
 
diff --git a/client/src/components/ReadySet.vue b/client/src/components/ReadySet.vue
index 25a3307..92e4abc 100644
--- a/client/src/components/ReadySet.vue
+++ b/client/src/components/ReadySet.vue
@@ -30,7 +30,9 @@ const textSize = computed((): string => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .ready-set {
   &__container-outer {
@@ -53,7 +55,7 @@ const textSize = computed((): string => {
       animation-fill-mode: forwards;
     }
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       width: 360px;
       height: 360px;
     }
@@ -66,12 +68,12 @@ const textSize = computed((): string => {
     transform: rotate(45deg);
     width: 370px;
     height: 370px;
-    background-color: $animationbox-background-color;
-    border: $animationbox-border;
+    background-color: colors.$animationbox-background-color;
+    border: colors.$animationbox-border;
     border-radius: 50px;
     z-index: 5;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       left: 54px;
       top: 54px;
       width: 240px;
@@ -87,11 +89,11 @@ const textSize = computed((): string => {
     width: 420px;
     height: 420px;
     border-radius: 150px;
-    background-color: $animationbox-animation-color;
+    background-color: colors.$animationbox-animation-color;
     animation: spin-rev 5s linear infinite;
     z-index: 4;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       left: 50px;
       top: 50px;
       width: 260px;
@@ -107,11 +109,11 @@ const textSize = computed((): string => {
     width: 420px;
     height: 420px;
     border-radius: 150px;
-    background-color: $animationbox-animation-color;
+    background-color: colors.$animationbox-animation-color;
     z-index: 3;
     animation: spin 6s linear infinite;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       left: 50px;
       top: 50px;
       width: 260px;
@@ -126,8 +128,8 @@ const textSize = computed((): string => {
     height: 600px;
     line-height: 600px;
     font-size: 100px;
-    font-family: $font-primary;
-    color: $animationbox-text-color;
+    font-family: fonts.$font-primary;
+    color: colors.$animationbox-text-color;
     text-align: center;
     z-index: 10;
 
@@ -147,7 +149,7 @@ const textSize = computed((): string => {
       animation: pop 0.5s ease-in-out;
     }
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       width: 360px;
       height: 360px;
       line-height: 360px;
diff --git a/client/src/components/SourceCard.vue b/client/src/components/SourceCard.vue
index c86eb63..de9be34 100644
--- a/client/src/components/SourceCard.vue
+++ b/client/src/components/SourceCard.vue
@@ -38,7 +38,8 @@ const containerClasses = computed(() => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .source-card {
   &__container {
@@ -46,12 +47,12 @@ const containerClasses = computed(() => {
     position: relative;
     width: 180px;
     height: 40px;
-    border: $sourcecard-border;
+    border: colors.$sourcecard-border;
     border-radius: 8px;
     justify-content: center;
     align-items: center;
-    background-color: $sourcecard-background-color;
-    color: $sourcecard-text-color;
+    background-color: colors.$sourcecard-background-color;
+    color: colors.$sourcecard-text-color;
     cursor: not-allowed;
     
     opacity: 0;
@@ -69,17 +70,17 @@ const containerClasses = computed(() => {
       cursor: pointer;
 
       &:hover {
-        background-color: $sourcecard-hover-background-color;
-        border: $sourcecard-hover-border;
-        color: $sourcecard-hover-text-color;
+        background-color: colors.$sourcecard-hover-background-color;
+        border: colors.$sourcecard-hover-border;
+        color: colors.$sourcecard-hover-text-color;
       }
     }
 
     &__selected {
-      background-color: $sourcecard-selected-background-color;
-      border: $sourcecard-selected-border;
-      color: $sourcecard-selected-text-color;
-      box-shadow: $sourcecard-selected-box-shadow;
+      background-color: colors.$sourcecard-selected-background-color;
+      border: colors.$sourcecard-selected-border;
+      color: colors.$sourcecard-selected-text-color;
+      box-shadow: colors.$sourcecard-selected-box-shadow;
       cursor: not-allowed;
     }
 
@@ -96,11 +97,11 @@ const containerClasses = computed(() => {
     width: 32px;
     height: 32px;
     align-items: center;
-    background-color: $sourcecardbadge-background-color;
-    border: $sourcecardbadge-border;
+    background-color: colors.$sourcecardbadge-background-color;
+    border: colors.$sourcecardbadge-border;
     border-radius: 32px;
-    color: $sourcecardbadge-text-color;
-    font-family: $font-primary;
+    color: colors.$sourcecardbadge-text-color;
+    font-family: fonts.$font-primary;
     font-size: 16px;
   }
 
diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue
index 14df46f..e5839c0 100644
--- a/client/src/components/TitleBox.vue
+++ b/client/src/components/TitleBox.vue
@@ -11,7 +11,9 @@
 </template>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .titlebox {
   &__container {
@@ -20,7 +22,7 @@
     display: flex;
     justify-content: center;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       padding: 40px 0;
     }
   }
@@ -28,9 +30,9 @@
   &__titleborderbox1,
   &__titleborderbox2,
   &__titleborderbox3 {
-    border: $box-primary-border;
+    border: colors.$box-primary-border;
     border-radius: 16px;
-    background-color: $box-primary-background-color;
+    background-color: colors.$box-primary-background-color;
   }
 
   &__titleborderbox1 {
@@ -41,7 +43,7 @@
     align-items: center;
     z-index: 3;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       width: 260px;
       height: 140px;
     }
@@ -54,7 +56,7 @@
     height: 120px;
     z-index: 2;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       top: 75px;
       width: 300px;
       height: 80px;
@@ -68,7 +70,7 @@
     height: 40px;
     z-index: 1;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       top: 95px;
       width: 340px;
     }
@@ -76,11 +78,11 @@
 
   &__title {
     font-size: 64px;
-    font-family: $font-primary;
-    color: $box-primary-text-color;
+    font-family: fonts.$font-primary;
+    color: colors.$box-primary-text-color;
     text-align: center;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       font-size: 32px;
     }
   }
diff --git a/client/src/components/TopBar.vue b/client/src/components/TopBar.vue
index 2246570..3e891b0 100644
--- a/client/src/components/TopBar.vue
+++ b/client/src/components/TopBar.vue
@@ -51,7 +51,9 @@ const actionLogout = async () => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .topbar {
   &__container {
@@ -59,14 +61,14 @@ const actionLogout = async () => {
     width: 100%;
     height: 64px;
     align-items: center;
-    background-color: $topbar-background-color;
+    background-color: colors.$topbar-background-color;
     font-size: 16px;
-    font-family: $font-primary;
+    font-family: fonts.$font-primary;
     font-weight: bold;
     cursor: default;
 
     &__cameo {
-      background-color: $topbar-cameo-background-color;
+      background-color: colors.$topbar-cameo-background-color;
     }
   }
 
@@ -75,11 +77,11 @@ const actionLogout = async () => {
     width: 128px;
     padding: 0 16px;
     text-align: center;
-    color: $text-primary-color;
+    color: colors.$text-primary-color;
   
   }
   &__username {
-    @media (max-width: $phone-width) {
+    @media (max-width: media.$phone-width) {
       display: none;
     }
 }
@@ -89,11 +91,11 @@ const actionLogout = async () => {
     
     &__player, 
     &__admin {
-      color: $text-primary-color;
+      color: colors.$text-primary-color;
       font-size: 24px;
       text-align: center;
 
-      @media (max-width: $phone-width) {
+      @media (max-width: media.$phone-width) {
         margin-left: 24px;
         text-align: left;
         font-size: 20px;
@@ -105,23 +107,23 @@ const actionLogout = async () => {
     width: 1px;
     height: calc(64px - 2 * 16px);
     margin: 16px 0;
-    background-color: $topbar-separator-color;
+    background-color: colors.$topbar-separator-color;
 
-    @media (max-width: $phone-width) {
+    @media (max-width: media.$phone-width) {
       display: none;
     }
   }
 
   &__logout-button {
-    color: $text-primary-color;
+    color: colors.$text-primary-color;
     font-size: 16px;
-    font-family: $font-primary;
+    font-family: fonts.$font-primary;
 
     &:hover {
-      color: $text-primary-hover-color;
+      color: colors.$text-primary-hover-color;
     }
 
-    @media (max-width: $phone-width) {
+    @media (max-width: media.$phone-width) {
       padding-right: 0;
     }
   }
diff --git a/client/src/components/admin/InfoTile.vue b/client/src/components/admin/InfoTile.vue
index d8a3861..323f56e 100644
--- a/client/src/components/admin/InfoTile.vue
+++ b/client/src/components/admin/InfoTile.vue
@@ -24,7 +24,8 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/fonts';
+@use '~/assets/css/colors';
 
 .admin-tile {
   &__container {
@@ -32,15 +33,15 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
     min-width: 300px;
     margin: 16px;
     padding: 16px 30px;
-    background-color: $admin-tile-background-color;
-    border: $admin-tile-border;
-    color: $admin-tile-text-color;
+    background-color: colors.$admin-tile-background-color;
+    border: colors.$admin-tile-border;
+    color: colors.$admin-tile-text-color;
   }
 
   &__title {
     margin-bottom: 16px;
     font-size: 24px;
-    font-family: $font-primary;
+    font-family: fonts.$font-primary;
   }
 
   &__action-button {
@@ -49,7 +50,7 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
 
   &__body {
     font-size: 16px;
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
   }
 
   &__icon-bottom-container {
@@ -72,21 +73,21 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
     cursor: pointer;
 
     &:hover {
-      background-color: $admin-tile-bottom-icon-hover-background-color;
+      background-color: colors.$admin-tile-bottom-icon-hover-background-color;
     }
   }
 
   &__icon-bottom {
     margin: 0 auto;
     padding: 20px;
-    background-color: $admin-tile-bottom-icon-background-color;
-    border-bottom: $admin-tile-bottom-icon-border;
+    background-color: colors.$admin-tile-bottom-icon-background-color;
+    border-bottom: colors.$admin-tile-bottom-icon-border;
     border-radius: 64px;
     cursor: pointer;
 
     &:hover {
-      background-color: $admin-tile-bottom-icon-hover-background-color;
-      border-bottom: $admin-tile-bottom-icon-hover-border;
+      background-color: colors.$admin-tile-bottom-icon-hover-background-color;
+      border-bottom: colors.$admin-tile-bottom-icon-hover-border;
     }
   }
 }
diff --git a/client/src/components/admin/PlayerDialog.vue b/client/src/components/admin/PlayerDialog.vue
index ff9ed8d..70fa5df 100644
--- a/client/src/components/admin/PlayerDialog.vue
+++ b/client/src/components/admin/PlayerDialog.vue
@@ -49,7 +49,7 @@ const generate = () => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
 
 .player-dialog {
   &__label {
@@ -59,8 +59,8 @@ const generate = () => {
 
   &__input {
     border: 1px solid white;
-    background-color: $dialog-box-background-color;
-    color: $dialog-box-text-color;
+    background-color: colors.$dialog-box-background-color;
+    color: colors.$dialog-box-text-color;
     border-radius: 4px;
   }
 
diff --git a/client/src/layouts/default.vue b/client/src/layouts/default.vue
index b057c27..42f1305 100644
--- a/client/src/layouts/default.vue
+++ b/client/src/layouts/default.vue
@@ -20,9 +20,9 @@ const alertMessages = useAlert().getAlertMessagesRef()
 </script>
 
 <style lang="scss">
-@import '@/assets/css/colors.scss';
-@import '@/assets/css/fonts.scss';
-@import '@/assets/css/components.scss';
+@use '~/assets/css/colors';
+@use '~/assets/css/fonts-definition';
+@use '~/assets/css/fonts';
 
 html,
 body,
@@ -35,8 +35,8 @@ body,
 }
 
 body {
-  background-color: $background-primary-color;
-  font-family: $font-primary;
+  background-color: colors.$background-primary-color;
+  font-family: fonts.$font-primary;
 
   // override Firefox DownloadStatusBar's setting
   margin-bottom: 0 !important;
diff --git a/client/src/pages/admin.vue b/client/src/pages/admin.vue
index 8ae8ef3..19b1d63 100644
--- a/client/src/pages/admin.vue
+++ b/client/src/pages/admin.vue
@@ -15,11 +15,11 @@ await useAuth().authenticateAndLoadUserInfo(['admin'])
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
 
 .admin {
   &__container {
-    color: $text-primary-color;
+    color: colors.$text-primary-color;
   }
 
   &__tiles {
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index db7c1bd..f321c56 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -47,11 +47,12 @@ const closeCreateTeamDialog = () => { showCreateTeamDialog.value = false }
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/colors';
+@use '~/assets/css/media';
 
 body {
-  background-color: $background-primary-color;
-  color: $text-primary-color;
+  background-color: colors.$background-primary-color;
+  color: colors.$text-primary-color;
 
   margin: 0;
 }
@@ -67,7 +68,7 @@ body {
     width: 100%;
     height: 120px;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       margin: 32px 0 0 0;
     }
   }
@@ -77,13 +78,13 @@ body {
     width: 320px;
     align-self: center;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       width: auto;
     }
   }
 
   &__create-team {
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       display: none;
     }
   }
@@ -91,9 +92,9 @@ body {
   &__separator {
     width: 1px;
     margin: 0 48px;
-    border-left: $box-primary-border;
+    border-left: colors.$box-primary-border;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       display: none;
     }
   }
diff --git a/client/src/pages/setup.vue b/client/src/pages/setup.vue
index 7f1c51e..cc79851 100644
--- a/client/src/pages/setup.vue
+++ b/client/src/pages/setup.vue
@@ -64,7 +64,8 @@ const createAdminAccount = async () => {
 </script>
 
 <style lang="scss">
-@import '~/assets/css/components';
+@use '~/assets/css/media';
+@use '~/assets/css/fonts';
 
 .page-setup {
   &__action-box {
@@ -73,7 +74,7 @@ const createAdminAccount = async () => {
     width: 340px;
     margin: 0 auto;
 
-    @media (max-width: $phone-max-width) {
+    @media (max-width: media.$phone-max-width) {
       margin: 32px 0 0 0;
       width: 100%;
     }
@@ -86,14 +87,14 @@ const createAdminAccount = async () => {
   }
 
   &__auth-message {
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-size: 24px;
     text-align: center;
     margin: 32px;
   }
 
   &__pin {
-    font-family: $font-secondary;
+    font-family: fonts.$font-secondary;
     font-size: 32px;
     font-weight: 800;
     text-align: center;