diff --git a/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
index 3adb1c65b2f..0797aadf657 100644
--- a/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
@@ -70,11 +70,15 @@ import SettingsPage from './SettingsPage.svelte';
                 <div class="flex flex-row items-center w-full h-full">
                   <dif>
                     <Fa
-                      class="h-3 w-3 text-md mr-2 text-{provider.accounts.length > 0 ? 'green' : 'gray'}-500"
+                      class="h-3 w-3 text-md mr-2 text-{provider.accounts.length > 0
+                        ? 'status-connected'
+                        : 'status-disconnected'}"
                       icon="{faCircle}" />
                   </dif>
                   <div
-                    class="uppercase text-xs text-{provider.accounts.length > 0 ? 'green' : 'gray'}-500"
+                    class="uppercase text-xs text-{provider.accounts.length > 0
+                      ? 'status-connected'
+                      : 'status-disconnected'}"
                     aria-label="Provider Status">
                     <span>
                       {provider.accounts.length > 0 ? 'Logged in' : 'Logged out'}
diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
index ba9bd20c3fc..260ba90243e 100644
--- a/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
@@ -103,8 +103,10 @@ async function handleDeleteContext(contextName: string) {
               <div class="flex-none w-36">
                 {#if $kubernetesContextsState.get(context.name)?.reachable}
                   <div class="flex flex-row pt-2">
-                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                    <div class="ml-1 font-bold text-[9px] text-green-500" aria-label="Context Reachable">REACHABLE</div>
+                    <div class="w-3 h-3 rounded-full bg-status-connected"></div>
+                    <div class="ml-1 font-bold text-[9px] text-status-connected" aria-label="Context Reachable">
+                      REACHABLE
+                    </div>
                   </div>
                   <div class="flex flex-row gap-4 mt-4">
                     <div class="text-center">
diff --git a/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts b/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts
index e255a90fdc9..70a8ef3dee7 100644
--- a/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts
+++ b/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts
@@ -90,7 +90,7 @@ test('expect badges to be green when reachable', async () => {
 
   expect(mocks.getCurrentKubeContextState).toHaveBeenCalled();
   const status = screen.getByRole('status');
-  expect(status.firstChild).toHaveClass('bg-green-600');
+  expect(status.firstChild).toHaveClass('bg-status-connected');
 });
 
 test('expect badges to be gray when not reachable', async () => {
@@ -106,7 +106,7 @@ test('expect badges to be gray when not reachable', async () => {
 
   expect(mocks.getCurrentKubeContextState).toHaveBeenCalled();
   const status = screen.getByRole('status');
-  expect(status.firstChild).toHaveClass('bg-gray-900');
+  expect(status.firstChild).toHaveClass('bg-status-disconnected');
 });
 
 test('expect no tooltip when no error', async () => {
diff --git a/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte b/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte
index 86874dde0ee..85345542944 100644
--- a/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte
+++ b/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte
@@ -11,8 +11,8 @@ function getText(state?: ContextGeneralState): string {
 }
 
 function getClassColor(state?: ContextGeneralState): string {
-  if (state?.reachable) return 'bg-green-600';
-  return 'bg-gray-900';
+  if (state?.reachable) return 'bg-status-connected';
+  return 'bg-status-disconnected';
 }
 
 $: text = getText($kubernetesCurrentContextState);
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3586efe2172..393f7a8ab66 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -77,6 +77,8 @@ module.exports = {
         // If we don't know the status, use gray
         'unknown': tailwindColors.gray[100],
 
+        'connected': tailwindColors.green[600],
+        'disconnected': tailwindColors.gray[500],
       },
       // The remaining colors below are not part of our palette and are only here
       // to maintain existing code. No new use.