diff --git a/src/assets/scss/login.scss b/src/assets/scss/login.scss
index a0f2b58..46666e3 100644
--- a/src/assets/scss/login.scss
+++ b/src/assets/scss/login.scss
@@ -19,18 +19,18 @@
   flex-direction: column;
 
   .content-elements {
-    margin: 5rem 0;
+    margin: 80px 0;
     width: inherit;
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 24px;
 
     .login-form {
       width: inherit;
 
       form {
         display: grid;
-        gap: 1rem;
+        gap: 15px;
         width: inherit;
 
         .form-field {
@@ -38,19 +38,19 @@
           flex-direction: column;
           background-color: rgba($white, 0.5);
           border-radius: 3px;
-          min-width: 25rem;
+          min-width: 400px;
           margin: 0 auto;
 
           label {
             color: $black;
             background-color: rgba($white, 0.5);
-            padding: 0.25rem;
+            padding: 4px;
             font-size: 0.875rem;
             border-radius: 3px 3px 0 0;
           }
           
           input {
-            padding: 0.3rem 0.25rem;
+            padding: 4px;
             font-size: 0.875rem;
 
             &:focus-visible {
@@ -64,11 +64,11 @@
     .row-buttons {
       display: flex;
       justify-content: center;
-      gap: 0.5rem;
+      gap: 8px;
 
       .button {
-        padding: 0.6rem 0;
-        min-width: 6.25rem;
+        padding: 10px 0;
+        min-width: 100px;
         font-size: 0.65rem;
         border-radius: 5px;
 
@@ -81,7 +81,7 @@
 }
 
 .main-title {
-  margin-top: 7rem;
+  margin-top: 115px;
   text-align: center;
   font-size: 3rem;
   text-shadow: 
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index c1a8def..fd1c9c4 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -24,7 +24,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 p, span, li, a, button, label {
-  font-family: Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   color: $white;
 }
 
diff --git a/src/components/Game.vue b/src/components/Game.vue
index 42f8829..02362f3 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -93,17 +93,17 @@ const bootScene = (scene: Phaser.Scene) => {
   position: absolute;
   left: 0;
   right: 0;
-  margin: 0 3rem;
+  margin: 0 48px;
 }
 
 .top-ui {
-  top: 3rem;
+  top: 48px;
 }
 
 .bottom-ui {
   justify-content: space-between;
   align-items: center;
-  bottom: 6.25rem;
-  height: 6.25rem;
+  bottom: 100px;
+  height: 100px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/game/Chat.vue b/src/components/game/Chat.vue
index 8506996..6cdf3a3 100644
--- a/src/components/game/Chat.vue
+++ b/src/components/game/Chat.vue
@@ -18,12 +18,12 @@
   align-items: center;
 
   input {
-    width: 32rem;
-    height: 3rem;
-    border-radius: 3rem;
+    width: 500px;
+    height: 48px;
+    border-radius: 48px;
     opacity: 0.8;
     font-size: 1.2rem;
-    padding: 0 1.5rem;
+    padding: 0 24px;
     background-color: rgba($white, 0.85);
     border: 2px solid $white;
     color: black;
@@ -31,9 +31,9 @@
 
   img {
     position: absolute;
-    left: 32rem;
-    width: 1.875rem;
-    height: 1.875rem;
+    left: 500px;
+    width: 30px;
+    height: 30px;
   }
 }
 </style>
diff --git a/src/components/game/Hud.vue b/src/components/game/Hud.vue
index 9ce36d1..2b50ac7 100644
--- a/src/components/game/Hud.vue
+++ b/src/components/game/Hud.vue
@@ -16,21 +16,21 @@
 
 .hud-wrapper {
   position: relative;
-  left: -2rem;
+  left: -32px;
 
   .profile, .hud, &::before {
     position: absolute;
-    top: 2rem;
-    left: 2rem;
+    top: 32px;
+    left: 32px;
     width: 245px;
     height: 75px;
-    border-radius: 1rem;
+    border-radius: 16px;
     z-index: 1;
   }
 
   .profile {
-    width: 4rem;
-    height: 4rem;
+    width: 64px;
+    height: 64px;
     background-color: rgba($white, 0.8);
     border-radius: 100%;
     border: 3px solid $white;
@@ -38,7 +38,7 @@
     left: 0;
     z-index: 2; // Ensure profile is above hud and before
     img {
-      width: 2rem;
+      width: 32px;
       position: absolute;
       left: 50%;
       top: 50%;
diff --git a/src/components/game/Menu.vue b/src/components/game/Menu.vue
index 582b6cc..f0f92dc 100644
--- a/src/components/game/Menu.vue
+++ b/src/components/game/Menu.vue
@@ -38,22 +38,22 @@
   .menu {
     list-style: none;
     display: flex;
-    gap: 1.25rem;
+    gap: 20px;
 
     .menu-item {
       position: relative;
 
       p {
         position: absolute;
-        bottom: 3.125rem;
-        width: 4rem;
+        bottom: 50px;
+        width: 64px;
         text-align: center;
         background-color: #b1b2b5;
         border: 2px solid $white;
-        border-radius: 1.5rem;
-        height: 1.5rem;
+        border-radius: 24px;
+        height: 24px;
         font-size: 0.875rem;
-        line-height: 1.5rem;
+        line-height: 24px;
         left: 50%;
         transform: translateX(-50%);
         display: none;
@@ -63,8 +63,8 @@
           position: absolute;
           top: 100%;
           background-color: $white;
-          height: 0.5rem;
-          width: 0.875rem;
+          height: 8px;
+          width: 14px;
           clip-path: polygon(100% 0, 0 0, 50% 100%);
           left: 50%;
           transform: translateX(-50%);
@@ -72,13 +72,13 @@
       }
 
       a {
-        padding: 0.5rem;
+        padding: 8px;
         background-color: rgba(127, 127, 127, 0.7);
         border: 2px solid $white;
         border-radius: 50%;
         display: block;
-        width: 1.875rem;
-        height: 1.875rem;
+        width: 30px;
+        height: 30px;
 
         img {
           width: inherit;
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index b91e8d7..b263b40 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -106,8 +106,8 @@ function create() {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 6.25rem;
-    padding: 0 5rem;
+    gap: 100px;
+    padding: 0 80px;
     &::before {
       content: '';
     }
@@ -115,7 +115,7 @@ function create() {
     .characters-wrapper {
       display: flex;
       justify-content: center;
-      gap: 5rem;
+      gap: 80px;
       width: 100%;
 
       .character {
@@ -154,7 +154,7 @@ function create() {
 
             span {
               align-self: center;
-              font-size: 16px;
+              font-size: 1rem;
             }
           }
 
@@ -243,10 +243,10 @@ function create() {
 
       button {
         padding: 8px 10px 8px 20px;
-        min-width: 6.25rem;
+        min-width: 100px;
         position: relative;
         border-radius: 5px;
-        font-size: 18px;
+        font-size: 1.125rem;
         display: flex;
         gap: 10px;
         align-items: center;
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 045d5a0..1597756 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -8,7 +8,7 @@
       :style="{
         fontFamily: 'Helvetica, Arial',
         color: '#42B883',
-        fontSize: '20px',
+        fontSize: '1.25rem',
         fontStyle: 'bold',
         strokeThickness: 8,
         stroke: '#213547'
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 6a1f31a..48e4ec1 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -102,7 +102,7 @@ onUnmounted(() => {
     background-color: rgba($purple, 0.6);
     padding: 0 20px;
     border-radius: 20px 20px 0 0;
-    height: 3.75rem;
+    height: 60px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -149,7 +149,7 @@ onUnmounted(() => {
 
     button {
       padding: 10px 16px;
-      min-width: 6.25rem;
+      min-width: 100px;
       border-radius: 5px;
     }