diff --git a/resources/assets/scripts/components/auth/ForgotPassword.ts b/resources/assets/scripts/components/auth/ForgotPassword.ts
index 294c3a412..e3c360201 100644
--- a/resources/assets/scripts/components/auth/ForgotPassword.ts
+++ b/resources/assets/scripts/components/auth/ForgotPassword.ts
@@ -81,7 +81,7 @@ export default Vue.component('forgot-password', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
+                <router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
                              aria-label="Go to login"
                              :to="{ name: 'login' }"
                 >
diff --git a/resources/assets/scripts/components/auth/LoginForm.ts b/resources/assets/scripts/components/auth/LoginForm.ts
index d4e6a1e43..d5dae5232 100644
--- a/resources/assets/scripts/components/auth/LoginForm.ts
+++ b/resources/assets/scripts/components/auth/LoginForm.ts
@@ -102,7 +102,7 @@ export default Vue.component('login-form', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600" aria-label="Forgot password"
+                <router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600" aria-label="Forgot password"
                              :to="{ name: 'forgot-password' }">
                     {{ $t('auth.forgot_password.label') }}
                 </router-link>
diff --git a/resources/assets/scripts/components/auth/ResetPassword.ts b/resources/assets/scripts/components/auth/ResetPassword.ts
index 1edf736c5..d038fde31 100644
--- a/resources/assets/scripts/components/auth/ResetPassword.ts
+++ b/resources/assets/scripts/components/auth/ResetPassword.ts
@@ -110,7 +110,7 @@ export default Vue.component('reset-password', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
+                <router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
                              :to="{ name: 'login' }"
                 >
                     {{ $t('auth.go_to_login') }}
diff --git a/resources/assets/scripts/components/auth/TwoFactorForm.ts b/resources/assets/scripts/components/auth/TwoFactorForm.ts
index a72e07f79..64287b4bd 100644
--- a/resources/assets/scripts/components/auth/TwoFactorForm.ts
+++ b/resources/assets/scripts/components/auth/TwoFactorForm.ts
@@ -69,7 +69,7 @@ export default Vue.component('two-factor-form', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
+                <router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
                              :to="{ name: 'login' }"
                 >
                     Back to Login
diff --git a/resources/assets/scripts/components/core/Modal.ts b/resources/assets/scripts/components/core/Modal.ts
index 34b8e21dc..2867ea6e2 100644
--- a/resources/assets/scripts/components/core/Modal.ts
+++ b/resources/assets/scripts/components/core/Modal.ts
@@ -34,7 +34,7 @@ export default Vue.component('modal', {
                 <div class="modal-container" @click.stop>
                     <div v-on:click="close">
                         <icon name="x"
-                              class="absolute pin-r pin-t m-2 textneutral-500scursor-pointer"
+                              class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
                               aria-label="Close modal"
                               role="button"
                         />
diff --git a/resources/assets/scripts/components/server/components/database/DatabaseRow.vue b/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
index 980f7308b..221e166de 100644
--- a/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
+++ b/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
@@ -1,17 +1,17 @@
 <template>
-    <div class="content-box mb-6 hover:borderneutral-500">
+    <div class="content-box mb-6 hover:border-neutral-500">
         <div class="flex items-center text-neutral-800">
-            <database-icon class="flex-none text-green"></database-icon>
+            <database-icon class="flex-none text-green-500"></database-icon>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs textneutral-500spb-1 select-none">Database Name</p>
+                <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Database Name</p>
                 <p>{{database.name}}</p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs textneutral-500spb-1 select-none">Username</p>
+                <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Username</p>
                 <p>{{database.username}}</p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs textneutral-500spb-1 select-none">Password</p>
+                <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Password</p>
                 <p>
                     <code class="text-sm cursor-pointer" v-on:click="revealPassword">
                         <span class="select-none" v-if="!database.showPassword">
@@ -22,7 +22,7 @@
                 </p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs textneutral-500spb-1 select-none">Server</p>
+                <p class="uppercase text-xs text-neutral-500 pb-1 select-none">Server</p>
                 <p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
             </div>
             <div class="flex-none px-4">
diff --git a/resources/assets/scripts/components/server/subpages/FileManager.ts b/resources/assets/scripts/components/server/subpages/FileManager.ts
index f357297b7..0779eb7e7 100644
--- a/resources/assets/scripts/components/server/subpages/FileManager.ts
+++ b/resources/assets/scripts/components/server/subpages/FileManager.ts
@@ -136,7 +136,7 @@ export default Vue.component('file-manager', {
                     <div class="alert error" v-text="errorMessage"></div>
                 </div>
                 <div v-else-if="!directories.length && !files.length">
-                    <p class="textneutral-500stext-sm text-center p-6 pb-4">This directory is empty.</p>
+                    <p class="text-neutral-500 text-sm text-center p-6 pb-4">This directory is empty.</p>
                 </div>
                 <div class="filemanager" v-else>
                     <div class="header">
diff --git a/resources/assets/styles/components/buttons.css b/resources/assets/styles/components/buttons.css
index f6507ea9c..edd3a4f08 100644
--- a/resources/assets/styles/components/buttons.css
+++ b/resources/assets/styles/components/buttons.css
@@ -35,7 +35,7 @@
     @apply .border .border-neutral-400 .text-neutral-600;
 
     &:hover:enabled {
-      @apply .borderneutral-500s.text-neutral-800;
+      @apply .border-neutral-500 .text-neutral-800;
     }
 
     &.btn-red:hover:enabled {
diff --git a/resources/assets/styles/components/filemanager.css b/resources/assets/styles/components/filemanager.css
index 2ceba6c6a..edcfa6447 100644
--- a/resources/assets/styles/components/filemanager.css
+++ b/resources/assets/styles/components/filemanager.css
@@ -68,7 +68,7 @@
   @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-800 .shadow-md;
 
   & a {
-    @apply .no-underline .text-blue;
+    @apply .no-underline .text-primary-500;
     transition: color 50ms ease-in;
 
     &:hover {
diff --git a/resources/assets/styles/components/forms.css b/resources/assets/styles/components/forms.css
index 3a584138e..575ddc86e 100644
--- a/resources/assets/styles/components/forms.css
+++ b/resources/assets/styles/components/forms.css
@@ -40,7 +40,7 @@ input[type=number] {
 }
 
 .input-open > label {
-    @apply .block .uppercase .tracking-wide .textneutral-500s.text-xs .mb-2 .absolute;
+    @apply .block .uppercase .tracking-wide .text-neutral-500 .text-xs .mb-2 .absolute;
     top: 14px;
     transition: transform 200ms ease-out;
 }
@@ -61,7 +61,7 @@ input[type=number] {
     }
 
     &.error {
-        @apply .text-red-600 .border-red;
+        @apply .text-red-600 .border-red-500;
     }
 }
 
@@ -70,7 +70,7 @@ input[type=number] {
 }
 
 .input-help {
-    @apply .text-xs .textneutral-500s.pt-2;
+    @apply .text-xs .text-neutral-500 .pt-2;
 
     &.error {
         @apply .text-red-600;
diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css
index b0a6a98e3..0136cb10e 100644
--- a/resources/assets/styles/components/miscellaneous.css
+++ b/resources/assets/styles/components/miscellaneous.css
@@ -11,18 +11,18 @@ code {
  * Indicators for server online status.
  */
 .indicator {
-    @apply .bg-neutral-800 .border .border-grey;
+    @apply .bg-neutral-800 .border .border-primary-500;
     border-radius: 50%;
     width: 16px;
     height: 16px;
 
     &.online {
-        @apply .bg-green-600 .border-green;
+        @apply .bg-green-600 .border-green-500;
         animation: onlineblink 2s infinite alternate;
     }
 
     &.offline {
-        @apply .bg-green-600 .border-red;
+        @apply .bg-green-600 .border-red-500;
         animation: offlineblink 2s infinite alternate;
     }
 }
@@ -34,7 +34,7 @@ code {
     @apply .flex-1 .text-center .relative;
 
     & > .indicator-title {
-        @apply .text-xs .uppercase .font-hairline .bg-white .absolute .text-grey;
+        @apply .text-xs .uppercase .font-hairline .bg-white .absolute .text-primary-500;
         margin-top:-9px;
         padding: 0 8px;
         left: 50%;
diff --git a/resources/assets/styles/components/notifications.css b/resources/assets/styles/components/notifications.css
index 47972511a..85d31ee6c 100644
--- a/resources/assets/styles/components/notifications.css
+++ b/resources/assets/styles/components/notifications.css
@@ -40,7 +40,7 @@
         @apply .bg-yellow-600 .border-yellow-800 .text-yellow-50;
 
         & > .title {
-            @apply .bg-yellow;
+            @apply .bg-yellow-500;
         }
     }
 }
diff --git a/resources/themes/pterodactyl/admin/users/index.blade.php b/resources/themes/pterodactyl/admin/users/index.blade.php
index 2de490d53..b327ad5f3 100644
--- a/resources/themes/pterodactyl/admin/users/index.blade.php
+++ b/resources/themes/pterodactyl/admin/users/index.blade.php
@@ -58,7 +58,7 @@
                                 <td>{{ $user->username }}</td>
                                 <td class="text-center">
                                     @if($user->use_totp)
-                                        <i class="fa fa-lock text-green"></i>
+                                        <i class="fa fa-lock text-green-500"></i>
                                     @else
                                         <i class="fa fa-unlock text-red"></i>
                                     @endif
diff --git a/resources/themes/pterodactyl/server/users/index.blade.php b/resources/themes/pterodactyl/server/users/index.blade.php
index 3d08e590d..632e79f8b 100644
--- a/resources/themes/pterodactyl/server/users/index.blade.php
+++ b/resources/themes/pterodactyl/server/users/index.blade.php
@@ -49,7 +49,7 @@
                                 <td class="middle"><code>{{ $subuser->user->email }}</code></td>
                                 <td class="middle text-center">
                                     @if($subuser->user->use_totp)
-                                        <i class="fa fa-lock text-green"></i>
+                                        <i class="fa fa-lock text-green-500"></i>
                                     @else
                                         <i class="fa fa-unlock text-red"></i>
                                     @endif
diff --git a/resources/themes/pterodactyl/templates/auth/core.blade.php b/resources/themes/pterodactyl/templates/auth/core.blade.php
index 5d1d7a4cd..988509c3d 100644
--- a/resources/themes/pterodactyl/templates/auth/core.blade.php
+++ b/resources/themes/pterodactyl/templates/auth/core.blade.php
@@ -8,7 +8,7 @@
             <img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs">
         </div>
         <router-view></router-view>
-        <p class="text-center textneutral-500stext-xs">
+        <p class="text-center text-neutral-500 text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>
     </div>