diff --git a/resources/assets/scripts/components/server/components/ProgressBar.ts b/resources/assets/scripts/components/server/components/ProgressBar.ts
index 7e5ca527b..d067b078d 100644
--- a/resources/assets/scripts/components/server/components/ProgressBar.ts
+++ b/resources/assets/scripts/components/server/components/ProgressBar.ts
@@ -9,7 +9,7 @@ export default Vue.component('progress-bar', {
     computed: {
         backgroundColor: function () {
             if (this.percent < 70) {
-                return "bg-green-dark";
+                return "bg-green-600";
             } else if (this.percent >= 70 && this.percent < 90) {
                 return "bg-yellow-dark";
             } else {
@@ -18,7 +18,7 @@ export default Vue.component('progress-bar', {
         },
         borderColor: function () {
             if (this.percent < 70) {
-                return "border-green-dark";
+                return "border-green-600";
             } else if (this.percent >= 70 && this.percent < 90) {
                 return "border-yellow-dark";
             } else {
diff --git a/resources/assets/styles/components/animations.css b/resources/assets/styles/components/animations.css
index 25e988df7..efb74eb52 100644
--- a/resources/assets/styles/components/animations.css
+++ b/resources/assets/styles/components/animations.css
@@ -26,7 +26,7 @@
     @apply .bg-green;
   }
   100% {
-    @apply .bg-green-dark;
+    @apply .bg-green-600;
   }
 }
 
diff --git a/resources/assets/styles/components/buttons.css b/resources/assets/styles/components/buttons.css
index 6066b51af..6bf28713f 100644
--- a/resources/assets/styles/components/buttons.css
+++ b/resources/assets/styles/components/buttons.css
@@ -14,10 +14,10 @@
   }
 
   &.btn-green {
-    @apply .bg-green .border-green-dark .border .text-white;
+    @apply .bg-green-500 .border-green-600 .border .text-white;
 
     &:hover:enabled {
-      @apply .bg-green-dark .border-green-darker;
+      @apply .bg-green-600 .border-green-800;
     }
   }
 
diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css
index 7fdf3ed5b..95dbfde64 100644
--- a/resources/assets/styles/components/miscellaneous.css
+++ b/resources/assets/styles/components/miscellaneous.css
@@ -17,12 +17,12 @@ code {
     height: 16px;
 
     &.online {
-        @apply .bg-green-dark .border-green;
+        @apply .bg-green-600 .border-green;
         animation: onlineblink 2s infinite alternate;
     }
 
     &.offline {
-        @apply .bg-green-dark .border-red;
+        @apply .bg-green-600 .border-red;
         animation: offlineblink 2s infinite alternate;
     }
 }
diff --git a/resources/assets/styles/components/notifications.css b/resources/assets/styles/components/notifications.css
index ce4a72f2f..d0818d497 100644
--- a/resources/assets/styles/components/notifications.css
+++ b/resources/assets/styles/components/notifications.css
@@ -29,7 +29,7 @@
     }
 
     &.success {
-        @apply .bg-green-dark .border-green-darker .text-green-lightest;
+        @apply .bg-green-600 .border-green-800 .text-green-50;
 
         & > .title {
             @apply .bg-green;