diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index db656554d2..dd11dd1ead 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -8,7 +8,8 @@
         color === 'gray',
       'bg-wp-control-ok-100 hover:bg-wp-control-ok-200 border-wp-control-ok-300 text-white': color === 'green',
       'bg-wp-control-info-100 hover:bg-wp-control-info-200 border-wp-control-info-300 text-white': color === 'blue',
-      'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white': color === 'red',
+      'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white dark:text-dark-300':
+        color === 'red',
       ...passedClasses,
     }"
     :title="title"
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index fab08ec715..b20164af92 100644
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@@ -54,8 +54,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
   display: block;
   top: 50%;
   left: 50%;
-  width: 7px;
-  height: 7px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background: white;
   transform: translate(-50%, -50%);
diff --git a/web/src/components/repo/settings/ActionsTab.vue b/web/src/components/repo/settings/ActionsTab.vue
index ccf72e39fb..443d84a1f0 100644
--- a/web/src/components/repo/settings/ActionsTab.vue
+++ b/web/src/components/repo/settings/ActionsTab.vue
@@ -3,7 +3,6 @@
     <div class="flex flex-wrap items-center">
       <Button
         class="mr-4 my-1"
-        color="blue"
         start-icon="heal"
         :is-loading="isRepairingRepo"
         :text="$t('repo.settings.actions.repair.repair')"
@@ -13,7 +12,6 @@
       <Button
         v-if="isActive"
         class="mr-4 my-1"
-        color="blue"
         start-icon="turn-off"
         :is-loading="isDeactivatingRepo"
         :text="$t('repo.settings.actions.disable.disable')"
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index cdf8b8ea24..93d7283624 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -3,7 +3,7 @@
     <!-- TODO: Should use vue notifications. -->
     <div
       v-if="errorMessage"
-      class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white p-4 rounded-md"
+      class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white dark:text-dark-300 p-4 rounded-md"
     >
       {{ errorMessage }}
     </div>
diff --git a/web/windi.config.ts b/web/windi.config.ts
index cdcfc551d3..fb9dea707f 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -79,16 +79,16 @@ export default defineConfig({
           300: colors.red[900],
         },
         'int-wp-control-error-dark': {
-          100: tinycolor(colors.red[700]).desaturate(25).toString(),
-          200: tinycolor(colors.red[800]).desaturate(25).toString(),
-          300: tinycolor(colors.red[900]).desaturate(25).toString(),
+          100: tinycolor(colors.red[700]).saturate(100).brighten(40).toString(),
+          200: tinycolor(colors.red[800]).saturate(80).brighten(30).toString(),
+          300: tinycolor(colors.red[900]).saturate(80).brighten(30).toString(),
         },
 
         'int-wp-state-error': {
           100: colors.red[700],
         },
         'int-wp-state-error-dark': {
-          100: tinycolor(colors.red[700]).desaturate(25).toString(),
+          100: tinycolor(colors.red[700]).saturate(100).brighten(40).toString(),
         },
         'int-wp-state-neutral': {
           100: colors.gray[600],