diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
deleted file mode 100644
index ccd1ddb..0000000
--- a/src/assets/scss/_variables.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// Colors
-$white: #fff;
-$black: #000;
-$light-blue: #00c2ff;
-$red: #d50000;
-$dark-red: #b30000;
-$gray: #7f7f7f;
-$gray-2: #696969;
-$dark-gray: #313638;
-$light-gray: #d3d3d3;
-$blue-gray: #778899;
-$cyan: #368f8b;
-$dark-cyan: #376362;
-$light-cyan: #00b3b3;
-$bordeaux: #800020;
-$dark-bordeaux: #4c0000;
-$light-bordeaux: #cc0033;
-$green: #09ad19;
-
-// Fonts
-$titles: 'Poppins', serif;
-$default: 'Inter', serif;
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index da634b9..0bbfb3a 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -2,34 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-@import '@/assets/scss/_variables';
-
 // Fonts
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 //Globals
 
-// Column base styles
-[class^="col-"] {
-  position: relative;
-  width: 100%;
-  padding: 0 15px;
-}
-
-// Generate column classes
-@for $i from 1 through 12 {
-  .col-#{$i} {
-    $width: percentage(calc($i / 12));
-    flex: 0 0 calc($width - var(--gap));
-    max-width: calc($width - var(--gap));
-  }
-}
-
 body {
+  @apply bg-black m-0 select-none;
   -ms-overflow-style: none;
   scrollbar-width: none;
-  background: $black;
-  margin: 0;
 
   // Disable selection, might wanna comment when debugging
   -webkit-user-select: none; /* Safari */
@@ -45,30 +26,24 @@ h5,
 h6,
 button,
 a {
-  font-family: $titles;
-  color: $white;
-  font-weight: 500;
-  margin: 0;
+  @apply font-titles text-white font-medium m-0;
 }
 
 p,
 span,
 li,
 label {
-  font-family: $default;
-  color: $white;
+  @apply font-default text-white;
 }
 
 button,
 a {
-  font-weight: 500;
-  text-shadow: 0 4px 6px rgba($black, 0.25);
+  @apply font-medium drop-shadow-20;
 }
 
 button,
 input {
-  border: none;
-  background-color: transparent;
+  @apply border-none bg-transparent;
 
   &[type='number'] {
     -webkit-appearance: textfield;
@@ -82,53 +57,39 @@ input {
 }
 
 .input-cyan {
-  padding: 8px 10px;
-  font-family: $titles;
-  border: 1px solid $cyan;
-  background-color: rgba($white, 0.8);
-  border-radius: 5px;
+  @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white bg-opacity-80 rounded;
   &:focus,
   &:focus-visible {
-    outline: $cyan auto 2px;
+    @apply outline-2 outline-cyan;
   }
 }
 
 button {
-  text-align: center;
-
-  &.w-full {
-    width: 100%;
-  }
+  @apply text-center;
 
   &.btn-cyan {
-    background-color: rgba($cyan, 0.5);
-    border: 1px solid $white;
-    border-radius: 5px;
-    text-shadow: 0 3px 6px rgba($black, 0.2);
+    @apply bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20;
 
     &.active,
     &:hover {
-      background-color: $cyan;
+      @apply bg-cyan;
     }
   }
 
   &.btn-bordeaux {
-    background-color: rgba($bordeaux, 0.5);
-    border: 1px solid $white;
-    border-radius: 5px;
-    text-shadow: 0 3px 6px rgba($black, 0.2);
+    @apply bg-bordeaux bg-opacity-50 border border-solid border-white rounded drop-shadow-20;
 
     &.active,
     &:hover {
-      background-color: $bordeaux;
+      @apply bg-bordeaux;
     }
   }
 
   &:hover {
-    cursor: pointer;
+    @apply cursor-pointer;
   }
 }
 
 ::-webkit-scrollbar {
-  display: none;
+  @apply hidden;
 }
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 5ef2a05..cc490d7 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="chip-container flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
-    <div v-for="(chip, i) in modelValue" :key="i" class="chip flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
+  <div class="flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
+    <div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
       <span>{{ chip }}</span>
-      <i class="delete-icon cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
+      <i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
     </div>
     <input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
   </div>
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index dbd4e0e..ce944db 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
-    <div class="profile absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
+    <div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
       <img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%]" draggable="false" src="/assets/avatar/default/head.png" />
     </div>
     <div class="hud-bg absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
diff --git a/src/components/utilities/Notifications.vue b/src/components/utilities/Notifications.vue
index c7f4e5d..7b72edc 100644
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="notifications">
-    <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
-      <template #modalHeader v-if="notification.title">
-        <h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
-      </template>
-      <template #modalBody v-if="notification.message">
-        <p class="modal-notif m-[15px]">{{ notification.message }}</p>
-      </template>
-    </Modal>
-  </div>
+  <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
+    <template #modalHeader v-if="notification.title">
+      <h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
+    </template>
+    <template #modalBody v-if="notification.message">
+      <p class="m-[15px]">{{ notification.message }}</p>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index c5254c6..7865605 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -2,20 +2,20 @@
   <div class="flex h-full w-full relative">
     <div class="w-[15%] flex flex-col relative">
       <!-- Asset Categories -->
-      <a class="category relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
-        <span class="category-name">Tiles</span>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+        <span>Tiles</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
-      <a class="category relative p-2.5  hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
-        <span class="category-name">Objects</span>
+      <a class="relative p-2.5  hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+        <span>Objects</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
-      <a class="category relative p-2.5 hover:cursor-pointer">
-        <span class="category-name">Loot</span>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>Loot</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
-      <a class="category relative p-2.5 hover:cursor-pointer">
-        <span class="category-name">NPC's</span>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>NPC's</span>
         <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
       </a>
     </div>
@@ -27,7 +27,7 @@
       <ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" />
     </div>
 
-    <button class="back-to-top absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">
+    <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">
       <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
     <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
@@ -79,18 +79,6 @@ function toTop() {
 </script>
 
 <style lang="scss">
-
-button.back-to-top {
-  // @TODO: find Tailwind alternative as calc() doesnt work
-  left: calc(50% - 60px);
-}
-.modal-form {
-  &.asset-manager {
-    // @TODO: find Tailwind alternative as calc() doesnt work
-    width: calc(100% - 40px);
-  }
-}
-
 .category,
 .asset,
 .image-container {
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index de513b8..d1aab0c 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="object-manager h-full overflow-auto">
-    <div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex items-center justify-center h-[300px]">
       <img class="max-h-[280px]" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
       <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
     </div>
-    <div class="modal-form asset-manager m-2.5 p-2.5 block">
+    <div class="m-2.5 p-2.5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
         <div class="w-full flex flex-col mb-5">
           <label class="mb-1.5 font-titles" for="name">Name</label>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index f38a36e..12ffab4 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+  <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
+    <label for="upload-asset" class="bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload object(s)
     </label>
-    <input v-model="searchQuery" class="input-cyan search-field w-full" placeholder="Search..." @input="handleSearch" />
+    <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <a class="asset relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
-    <div class="asset-details flex items-center gap-2.5">
+  <a class="relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
+    <div class="flex items-center gap-2.5">
       <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
         <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
       </div>
-      <span class="asset-name flex-shrink-0">{{ object.name }}</span>
+      <span class="flex-shrink-0">{{ object.name }}</span>
     </div>
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </a>
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index f69727c..5515785 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="tile-manager h-full overflow-auto">
-    <div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex items-center justify-center h-[300px]">
       <img class="max-h-[280px]" :src="tileImageUrl" :alt="'Tile ' + selectedTile" />
       <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
     </div>
-    <div class="modal-form asset-manager m-2.5 p-2.5 block">
+    <div class="m-2.5 p-2.5 block">
       <form class="flex g-2.5 flex-wrap" @submit.prevent>
         <div class="flex flex-col mb-5">
           <label class="mb-1.5 font-titles" for="tags">Tags</label>
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 85f7fd7..7b8fa19 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="asset add-new relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
-    <label for="upload-asset" class="file-upload bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+  <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
+    <label for="upload-asset" class="bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       Upload tile(s)
     </label>
-    <input v-model="searchQuery" class="input-cyan search-field w-full" placeholder="Search..." @input="handleSearch" />
+    <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
   </div>
-  <a class="asset relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
-    <div class="asset-details flex items-center gap-2.5">
+  <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
+    <div class="flex items-center gap-2.5">
       <!--      TODO make all img have same width so text aligns nicely -->
       <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
-      <span class="asset-name flex-shrink-0">{{ tile }}</span>
+      <span class="flex-shrink-0">{{ tile }}</span>
     </div>
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </a>
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 75bf75d..6a7526f 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -5,7 +5,7 @@
     </template>
 
     <template #modalBody>
-      <div class="settings m-[15px]">
+      <div class="m-[15px]">
         <form method="post" @submit.prevent="" class="inline">
           <div class="gap-2.5 flex flex-wrap">
             <div class="w-full flex flex-col mb-5">
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index e4b42ab..9dec069 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="character-select-screen bg-gray-300 relative">
+  <div class="bg-gray-300 relative">
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
       <div class="filler"></div>
@@ -116,6 +116,8 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss">
+@import '@/assets/scss/main';
+
 .characters-wrapper {
   .character {
     &.active {
@@ -134,6 +136,7 @@ onBeforeUnmount(() => {
         @apply gap-[15px];
       }
     }
+
     &:hover {
       @apply gap-[20px];
     }
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 5fdd527..2f92834 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="game-container flex justify-center items-center h-dvh p-[30px] relative">
+  <div class="flex justify-center items-center h-dvh p-[30px] relative">
     <GmTools v-if="isLoaded" />
     <GmPanel v-if="isLoaded" />
 
-    <Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
+    <Game :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
       <Scene name="main" @preload="preloadScene" @create="createScene">
-        <div class="top-ui flex absolute justify-between left-0 right-0 top-[48px] mx-[48px] my-0" v-if="isLoaded">
+        <div class="flex absolute justify-between left-0 right-0 top-[48px] mx-[48px] my-0" v-if="isLoaded">
           <Hud />
         </div>
-        <div class="center-ui" v-if="isLoaded">
+        <div v-if="isLoaded">
           <World />
         </div>
-        <div class="bottom-ui flex absolute justify-between left-0 right-0 bottom-[100px] h-[100px] mx-[48px] my-0" v-if="isLoaded">
+        <div class="flex absolute justify-between left-0 right-0 bottom-[100px] h-[100px] mx-[48px] my-0" v-if="isLoaded">
           <Chat />
           <Menubar />
         </div>
       </Scene>
     </Game>
-    <Game class="game" :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active">
+    <Game :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active">
       <Scene name="main" @preload="preloadScene" @create="createScene">
         <ZoneEditor v-if="isLoaded" />
       </Scene>
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index 4ff4378..ffe1b41 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="login-screen bg-gray-300">
+  <div class="bg-gray-300">
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
-    <div class="content-wrapper z-20 w-full h-dvh flex items-center justify-between flex-col relative">
+    <div class="z-20 w-full h-dvh flex items-center justify-between flex-col relative">
       <div class="filler"></div>
-      <h1 class="main-title mt-[115px] text-center text-6xl">NEW QUEST</h1>
+      <h1 class="mt-[115px] text-center text-6xl">NEW QUEST</h1>
       <form @submit.prevent="loginFunc">
-        <div class="content-elements my-[80px] mx-0 w-full flex flex-col gap-[24px]">
-          <div class="login-form w-full grid gap-[15px]">
-            <div class="form-field flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
+        <div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
+          <div class="w-full grid gap-[15px]">
+            <div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
               <label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
               <input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
             </div>
-            <div class="form-field flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
+            <div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
               <label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
               <input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
             </div>
           </div>
-          <div class="row-buttons flex justify-center sm:gap-[15px] gap-[8px]">
-            <button class="button btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
-            <button class="button btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
-            <button class="button btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
+          <div class="flex justify-center sm:gap-[15px] gap-[8px]">
+            <button class="btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
+            <button class="btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
+            <button class="btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
           </div>
         </div>
       </form>