diff --git a/resources/assets/scripts/components/server/Server.ts b/resources/assets/scripts/components/server/Server.ts
index d5a9b4e43..9cfdcc0cc 100644
--- a/resources/assets/scripts/components/server/Server.ts
+++ b/resources/assets/scripts/components/server/Server.ts
@@ -78,20 +78,20 @@ export default Vue.component('server', {
             </div>
             <div v-else class="container">
                 <div class="my-6 flex flex-no-shrink rounded animate fadein">
-                    <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
+                    <div class="sidebar flex-no-shrink w-1/3 max-w-xs">
                         <div class="mr-6">
-                            <div class="p-6 text-center bg-white border rounded">
+                            <div class="p-6 text-center bg-white rounded shadow">
                                 <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
                                 <span class="text-grey-dark text-sm">{{server.node}}</span>
                                 <power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
                             </div>
                         </div>
-                        <div class="mt-6 sidenav mr-6 bg-white border rounded">
+                        <div class="mt-6 sidenav mr-6">
                             <router-link :to="{ name: 'server', params: { id: $route.params.id } }">
-                                <icon name="terminal" class="h-4"></icon> Console
+                                Console
                             </router-link>
                             <router-link :to="{ name: 'server-files' }">
-                                <icon name="folder" class="h-4"></icon> Files
+                                File Manager
                             </router-link>
                             <!--<router-link :to="{ name: 'server-subusers' }">-->
                                 <!--<icon name="users" class="h-4"></icon> Subusers-->
@@ -100,7 +100,7 @@ export default Vue.component('server', {
                                 <!--<icon name="calendar" class="h-4"></icon> Schedules-->
                             <!--</router-link>-->
                             <router-link :to="{ name: 'server-databases' }">
-                                <icon name="database" class="h-4"></icon> Databases
+                                Databases
                             </router-link>
                             <!--<router-link :to="{ name: 'server-allocations' }">-->
                                 <!--<icon name="globe" class="h-4"></icon> Allocations-->
diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css
index 9b1ac8835..34795a6b4 100644
--- a/resources/assets/styles/components/miscellaneous.css
+++ b/resources/assets/styles/components/miscellaneous.css
@@ -46,7 +46,7 @@ code {
  * Styling for elements that contain the core page content.
  */
 .content-box {
-    @apply .bg-white .p-6 .border .border-grey-light .rounded;
+    @apply .bg-white .p-6 .rounded .shadow-md;
 }
 
 /**
@@ -82,6 +82,7 @@ code {
 
 .server-card {
     @apply .block .no-underline .shadow;
+    transition: all 100ms ease-in;
 
     & .identifier-icon {
         @apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
@@ -110,6 +111,7 @@ code {
 
     & > input[type="text"] {
         @apply .w-full .p-3 .rounded .border .text-grey-darker;
+        transition: border 150ms ease-in;
 
         &:focus {
             @apply .border-blue-light;
diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
index d8ebc9be5..93214f74a 100644
--- a/resources/assets/styles/components/navigation.css
+++ b/resources/assets/styles/components/navigation.css
@@ -60,6 +60,21 @@
     }
 }
 
+.sidenav {
+    a {
+        @apply .block .no-underline .text-grey-darker .py-2;
+        transition: color 75ms ease-in;
+
+        &:hover {
+            @apply .text-grey;
+        }
+
+        &.router-link-exact-active {
+            @apply .font-medium;
+        }
+    }
+}
+/*
 .sidenav {
     @apply .py-2;
 
@@ -78,3 +93,4 @@
         }
     }
 }
+*/
diff --git a/resources/themes/pterodactyl/templates/wrapper.blade.php b/resources/themes/pterodactyl/templates/wrapper.blade.php
index b375b3ef1..503840932 100644
--- a/resources/themes/pterodactyl/templates/wrapper.blade.php
+++ b/resources/themes/pterodactyl/templates/wrapper.blade.php
@@ -32,7 +32,7 @@
 
         @include('layouts.scripts')
     </head>
-    <body class="{{ $css['body'] ?? 'bg-grey-lighter' }}">
+    <body class="{{ $css['body'] ?? 'bg-grey-lightest' }}">
         @section('content')
             @yield('above-container')
             <div id="pterodactyl" class="flex flex-col">
diff --git a/tailwind.js b/tailwind.js
index 8bfd9017c..5757ce9e7 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -45,31 +45,33 @@ View the full documentation at https://tailwindcss.com.
 let colors = {
     'transparent': 'transparent',
 
-    'black': '#22292f',
-    'grey-darkest': '#3d4852',
-    'grey-darker': '#606f7b',
-    'grey-dark': '#8795a1',
-    'grey': '#b8c2cc',
-    'grey-light': '#dae1e7',
-    'grey-lighter': '#f1f5f8',
-    'grey-lightest': '#f8fafc',
+    'black': '#1F2933',
     'white': '#ffffff',
+    'basically-white': '#fafafb',
 
-    'red-lightest': '#f9eded',
-    'red-lighter': '#e7b6b6',
-    'red-light': '#d58080',
-    'red': '#c34949',
-    'red-dark': '#b04242',
-    'red-darker': '#752c2c',
-    'red-darkest': '#3b1616',
+    'grey-lightest': '#F5F7FA',
+    'grey-lighter': '#E4E7EB',
+    'grey-light': '#CBD2D9',
+    'grey': '#9AA5B1',
+    'grey-dark': '#52606D',
+    'grey-darker': '#3E4C59',
+    'grey-darkest': '#323F4B',
 
-    'orange-lightest': '#fcf4eb',
-    'orange-lighter': '#f4d4ae',
-    'orange-light': '#ecb371',
-    'orange': '#e49334',
-    'orange-dark': '#cd842f',
-    'orange-darker': '#89581f',
-    'orange-darkest': '#442c10',
+    'red-lightest': '#FFE3E3',
+    'red-lighter': '#FFBDBD',
+    'red-light': '#F86A6A',
+    'red': '#CF1124',
+    'red-dark': '#AB091E',
+    'red-darker': '#8A041A',
+    'red-darkest': '#610316',
+
+    'orange-lightest': '#FFE8D9',
+    'orange-lighter': '#FFD0B5',
+    'orange-light': '#F9703E',
+    'orange': '#DE3A11',
+    'orange-dark': '#C52707',
+    'orange-darker': '#AD1D07',
+    'orange-darkest': '#841003',
 
     'yellow-lightest': '#fbfae9',
     'yellow-lighter': '#ede9a7',
@@ -87,37 +89,21 @@ let colors = {
     'green-darker': '#34681f',
     'green-darkest': '#1a3410',
 
-    'teal-lightest': '#ecf7f5',
-    'teal-lighter': '#b3ded7',
-    'teal-light': '#7ac5ba',
-    'teal': '#41ac9c',
-    'teal-dark': '#3b9b8c',
-    'teal-darker': '#27675e',
-    'teal-darkest': '#14342f',
+    'blue-lightest': '#E6F6FF',
+    'blue-lighter': '#BAE3FF',
+    'blue-light': '#2186EB',
+    'blue': '#0552B5',
+    'blue-dark': '#03449E',
+    'blue-darker': '#01337D',
+    'blue-darkest': '#002159',
 
-    'blue-lightest': '#e7eef5',
-    'blue-lighter': '#9fbad9',
-    'blue-light': '#5886bc',
-    'blue': '#10529f',
-    'blue-dark': '#0e4a8f',
-    'blue-darker': '#0a315f',
-    'blue-darkest': '#051930',
-
-    'indigo-lightest': '#f0f1fa',
-    'indigo-lighter': '#c1c7eb',
-    'indigo-light': '#939edc',
-    'indigo': '#6574cd',
-    'indigo-dark': '#5b68b9',
-    'indigo-darker': '#3d467b',
-    'indigo-darkest': '#1e233e',
-
-    'purple-lightest': '#f6eaf5',
-    'purple-lighter': '#dcaad8',
-    'purple-light': '#c16bba',
-    'purple': '#a72b9d',
-    'purple-dark': '#96278d',
-    'purple-darker': '#641a5e',
-    'purple-darkest': '#320d2f',
+    'cyan-lightest': '#E1FCF8',
+    'cyan-lighter': '#C1FEF6',
+    'cyan-light': '#62F4EB',
+    'cyan': '#0FB5BA',
+    'cyan-dark': '#099AA4',
+    'cyan-darker': '#07818F',
+    'cyan-darkest': '#05606E',
 };
 
 module.exports = {
@@ -188,11 +174,11 @@ module.exports = {
 
     fonts: {
         'sans': [
-            '"Source Sans Pro"',
-            'system-ui',
-            'BlinkMacSystemFont',
             '-apple-system',
+            'BlinkMacSystemFont',
             '"Helvetica Neue"',
+            '"Roboto"',
+            'system-ui',
             'sans-serif',
         ],
         'serif': [