diff --git a/resources/assets/scripts/components/auth/ForgotPassword.ts b/resources/assets/scripts/components/auth/ForgotPassword.ts
index 954be128..294c3a41 100644
--- a/resources/assets/scripts/components/auth/ForgotPassword.ts
+++ b/resources/assets/scripts/components/auth/ForgotPassword.ts
@@ -73,7 +73,7 @@ export default Vue.component('forgot-password', {
                 </div>
             </div>
             <div>
-                <button class="btn btn-blue btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
+                <button class="btn btn-primary btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
                     <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
                     <span v-bind:class="{ hidden: showSpinner }">
                         {{ $t('auth.forgot_password.button') }}
diff --git a/resources/assets/scripts/components/auth/LoginForm.ts b/resources/assets/scripts/components/auth/LoginForm.ts
index 1425cb5b..d4e6a1e4 100644
--- a/resources/assets/scripts/components/auth/LoginForm.ts
+++ b/resources/assets/scripts/components/auth/LoginForm.ts
@@ -93,7 +93,7 @@ export default Vue.component('login-form', {
                 </div>
             </div>
             <div>
-                <button id="grid-login-button" class="btn btn-blue btn-jumbo" type="submit" aria-label="Log in"
+                <button id="grid-login-button" class="btn btn-primary btn-jumbo" type="submit" aria-label="Log in"
                         v-bind:disabled="showSpinner">
                     <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
                     <span v-bind:class="{ hidden: showSpinner }">
diff --git a/resources/assets/scripts/components/auth/ResetPassword.ts b/resources/assets/scripts/components/auth/ResetPassword.ts
index d293523e..1edf736c 100644
--- a/resources/assets/scripts/components/auth/ResetPassword.ts
+++ b/resources/assets/scripts/components/auth/ResetPassword.ts
@@ -102,7 +102,7 @@ export default Vue.component('reset-password', {
                 </div>
             </div>
             <div>
-                <button class="btn btn-blue btn-jumbo" type="submit" v-bind:class="{ disabled: showSpinner }">
+                <button class="btn btn-primary btn-jumbo" type="submit" v-bind:class="{ disabled: showSpinner }">
                     <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
                     <span v-bind:class="{ hidden: showSpinner }">
                         {{ $t('auth.reset_password.button') }}
diff --git a/resources/assets/scripts/components/auth/TwoFactorForm.ts b/resources/assets/scripts/components/auth/TwoFactorForm.ts
index 5464dde9..a72e07f7 100644
--- a/resources/assets/scripts/components/auth/TwoFactorForm.ts
+++ b/resources/assets/scripts/components/auth/TwoFactorForm.ts
@@ -64,7 +64,7 @@ export default Vue.component('two-factor-form', {
                 </div>
             </div>
             <div>
-                <button class="btn btn-blue btn-jumbo" type="submit">
+                <button class="btn btn-primary btn-jumbo" type="submit">
                     {{ $t('auth.sign_in') }}
                 </button>
             </div>
diff --git a/resources/assets/scripts/components/dashboard/ServerBox.ts b/resources/assets/scripts/components/dashboard/ServerBox.ts
index f45fbbd5..f3d1ff59 100644
--- a/resources/assets/scripts/components/dashboard/ServerBox.ts
+++ b/resources/assets/scripts/components/dashboard/ServerBox.ts
@@ -185,7 +185,7 @@ export default Vue.component('server-box', {
                         <div class="pillbox bg-green-500"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
                     </div>
                     <div class="inline-block">
-                        <div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div>
+                        <div class="pillbox bg-primary-500"><span class="select-none">CPU:</span> {{ cpu }} %</div>
                     </div>
                 </div>
             </div>
diff --git a/resources/assets/scripts/components/dashboard/account/ChangePassword.ts b/resources/assets/scripts/components/dashboard/account/ChangePassword.ts
index 7dc7d2c9..7214add4 100644
--- a/resources/assets/scripts/components/dashboard/account/ChangePassword.ts
+++ b/resources/assets/scripts/components/dashboard/account/ChangePassword.ts
@@ -82,7 +82,7 @@ export default Vue.component('change-password', {
                         <p class="input-help error" v-show="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}</p>
                     </div>
                     <div class="mt-6 text-right">
-                        <button class="btn btn-blue btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
+                        <button class="btn btn-primary btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
                     </div>
                 </div>
             </form>
diff --git a/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts b/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts
index cb05a46e..b4c08bbf 100644
--- a/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts
+++ b/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts
@@ -125,7 +125,7 @@ export default Vue.component('two-factor-authentication', {
     template: `
         <div id="configure-two-factor">
             <div class="h-16 text-center" v-show="spinner">
-                <span class="spinner spinner-xl text-blue"></span>
+                <span class="spinner spinner-xl text-primary-500"></span>
             </div>
             <div id="container-disable-two-factor" v-if="response.enabled" v-show="!spinner">
                 <h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
@@ -175,7 +175,7 @@ export default Vue.component('two-factor-authentication', {
                             <p class="input-help error" v-show="errors.has('token')">{{ errors.first('token') }}</p>
                         </div>
                         <div class="mt-6">
-                            <button class="btn btn-blue btn-jumbo" type="submit"
+                            <button class="btn btn-primary btn-jumbo" type="submit"
                                     :disabled="submitDisabled"
                                     v-on:click.prevent="enableTwoFactor"
                             >{{ $t('strings.enable') }}</button>
diff --git a/resources/assets/scripts/components/dashboard/account/UpdateEmail.ts b/resources/assets/scripts/components/dashboard/account/UpdateEmail.ts
index 39e287db..1879359f 100644
--- a/resources/assets/scripts/components/dashboard/account/UpdateEmail.ts
+++ b/resources/assets/scripts/components/dashboard/account/UpdateEmail.ts
@@ -68,7 +68,7 @@ export default Vue.component('update-email', {
                         >
                     </div>
                     <div class="mt-6 text-right">
-                        <button class="btn btn-blue btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
+                        <button class="btn btn-primary btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
                     </div>
                 </div>
             </form>
diff --git a/resources/assets/scripts/components/server/Server.ts b/resources/assets/scripts/components/server/Server.ts
index d515ecc6..bbe63ebb 100644
--- a/resources/assets/scripts/components/server/Server.ts
+++ b/resources/assets/scripts/components/server/Server.ts
@@ -81,7 +81,7 @@ export default Vue.component('server', {
                     <div class="sidebar flex-no-shrink w-1/3 max-w-xs">
                         <div class="mr-6">
                             <div class="p-6 text-center bg-white rounded shadow">
-                                <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
+                                <h3 class="mb-2 text-primary-500 font-medium">{{server.name}}</h3>
                                 <span class="text-neutral-600 text-sm">{{server.node}}</span>
                                 <power-buttons class="mt-6 pt-6 text-center border-t border-neutral-100"/>
                             </div>
diff --git a/resources/assets/scripts/components/server/subpages/Databases.ts b/resources/assets/scripts/components/server/subpages/Databases.ts
index aa21efc2..6bfb10fa 100644
--- a/resources/assets/scripts/components/server/subpages/Databases.ts
+++ b/resources/assets/scripts/components/server/subpages/Databases.ts
@@ -102,7 +102,7 @@ export default Vue.component('server-databases', {
                     <database-row v-for="database in databases" :database="database" :key="database.name"/>
                 </div>
                 <div>
-                    <button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
+                    <button class="btn btn-primary btn-lg" v-on:click="showCreateModal = true">Create new database</button>
                 </div>
                 <modal :show="showCreateModal" v-on:close="showCreateModal = false">
                     <create-database-modal
diff --git a/resources/assets/styles/components/animations.css b/resources/assets/styles/components/animations.css
index 07d6aac1..25b3985a 100644
--- a/resources/assets/styles/components/animations.css
+++ b/resources/assets/styles/components/animations.css
@@ -32,7 +32,7 @@
 
 @keyframes offlineblink {
   0% {
-    @apply .bg-red;
+    @apply .bg-red-500;
   }
   100% {
     @apply .bg-red-600;
diff --git a/resources/assets/styles/components/buttons.css b/resources/assets/styles/components/buttons.css
index 6bf28713..f6507ea9 100644
--- a/resources/assets/styles/components/buttons.css
+++ b/resources/assets/styles/components/buttons.css
@@ -5,11 +5,11 @@
   /**
    * Button Colors
    */
-  &.btn-blue {
-    @apply .bg-blue .border-blue-dark .border .text-white;
+  &.btn-primary {
+    @apply .bg-primary-500 .border-primary-600 .border .text-white;
 
     &:hover:enabled {
-      @apply .bg-blue-dark .border-blue-darker;
+      @apply .bg-primary-600 .border-primary-800;
     }
   }
 
diff --git a/resources/assets/styles/components/filemanager.css b/resources/assets/styles/components/filemanager.css
index 30a86d4e..2ceba6c6 100644
--- a/resources/assets/styles/components/filemanager.css
+++ b/resources/assets/styles/components/filemanager.css
@@ -72,7 +72,7 @@
     transition: color 50ms ease-in;
 
     &:hover {
-      @apply .text-blue-darker;
+      @apply .text-primary-800;
     }
   }
 }
diff --git a/resources/assets/styles/components/forms.css b/resources/assets/styles/components/forms.css
index 48a09858..3a584138 100644
--- a/resources/assets/styles/components/forms.css
+++ b/resources/assets/styles/components/forms.css
@@ -24,7 +24,7 @@ input[type=number] {
     @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3;
 
     &:focus {
-        @apply .border-blue-light;
+        @apply .border-primary-400;
         outline: 0;
         transition: border 500ms ease-out;
     }
@@ -53,7 +53,7 @@ input[type=number] {
     transition: all 100ms linear;
 
     &:focus {
-        @apply .border-blue-light;
+        @apply .border-primary-400;
     }
 
     &:required, &:invalid {
diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css
index 95dbfde6..b0a6a98e 100644
--- a/resources/assets/styles/components/miscellaneous.css
+++ b/resources/assets/styles/components/miscellaneous.css
@@ -114,7 +114,7 @@ code {
         transition: border 150ms ease-in;
 
         &:focus {
-            @apply .border-blue-light;
+            @apply .border-primary-400;
         }
     }
 }
diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
index ff16caf2..908629e0 100644
--- a/resources/assets/styles/components/navigation.css
+++ b/resources/assets/styles/components/navigation.css
@@ -1,5 +1,5 @@
 .nav {
-    @apply .bg-blue-dark .border-b .border-t .border-blue-darkest;
+    @apply .bg-primary-600 .border-b .border-t .border-primary-900;
     height: 56px;
 
     & .logo {
@@ -19,12 +19,12 @@
         @apply .mr-2;
 
         & > .search-input {
-            @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-neutral-50 .text-neutral-900 .w-96;
+            @apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-800 .bg-neutral-50 .text-neutral-900 .w-96;
             opacity: 0.9;
             transition: ease-in-out opacity 150ms;
 
             &:focus {
-                @apply .border-blue-darkest;
+                @apply .border-primary-900;
                 opacity: 1;
             }
 
@@ -35,7 +35,7 @@
         }
 
         & .search-results {
-            @apply .absolute .bg-neutral-50 .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
+            @apply .absolute .bg-neutral-50 .border .border-primary-900 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
 
             & a {
                 @apply .block .no-underline .p-2 .rounded;
@@ -54,7 +54,7 @@
             @apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
 
             &:hover {
-                @apply .bg-blue-dark;
+                @apply .bg-primary-600;
             }
         }
     }
@@ -76,7 +76,7 @@
                 }
 
                 &.router-link-exact-active {
-                    @apply .border-blue .cursor-default;
+                    @apply .border-primary-500 .cursor-default;
                 }
             }
         }
diff --git a/resources/assets/styles/components/notifications.css b/resources/assets/styles/components/notifications.css
index aedcec41..47972511 100644
--- a/resources/assets/styles/components/notifications.css
+++ b/resources/assets/styles/components/notifications.css
@@ -16,15 +16,15 @@
         @apply .bg-red-600 .border-red-800 .text-red-50;
 
         & > .title {
-            @apply .bg-red;
+            @apply .bg-red-500;
         }
     }
 
     &.info {
-        @apply .bg-blue-dark .border-blue-darker .text-blue-lightest;
+        @apply .bg-primary-600 .border-primary-800 .text-primary-50;
 
         & > .title {
-            @apply .bg-blue;
+            @apply .bg-primary-500;
         }
     }
 
diff --git a/resources/assets/styles/components/spinners.css b/resources/assets/styles/components/spinners.css
index f87f1d86..f5591f28 100644
--- a/resources/assets/styles/components/spinners.css
+++ b/resources/assets/styles/components/spinners.css
@@ -35,7 +35,7 @@
    * Spinner Colors
    */
   &.blue:after, &.text-blue:after {
-    @apply .border-blue;
+    @apply .border-primary-500;
   }
 
   &.white:after, &.text-white:after {
diff --git a/resources/themes/pterodactyl/templates/base/core.blade.php b/resources/themes/pterodactyl/templates/base/core.blade.php
index a80bbb90..ce38ac40 100644
--- a/resources/themes/pterodactyl/templates/base/core.blade.php
+++ b/resources/themes/pterodactyl/templates/base/core.blade.php
@@ -3,7 +3,7 @@
 {{--
 =======
 @section('above-container')
-    <header class="bg-blue text-white text-xl rounded-b fixed pin-t w-full z-40 shadow-md">
+    <header class="bg-primary-500 text-white text-xl rounded-b fixed pin-t w-full z-40 shadow-md">
         <div class="container h-16 mx-auto flex">
             <img class="h-12 mt-2 mr-3" src="/assets/img/pterodactyl-flat.svg">
             <div class="py-6">PTERODACTYL</div>