diff --git a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionDetailsSummary.svelte b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionDetailsSummary.svelte
index 1112b2f7a78b8..b6a2125559f6f 100644
--- a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionDetailsSummary.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionDetailsSummary.svelte
@@ -35,7 +35,7 @@ $: providerContainerConfiguration = tmpProviderContainerConfiguration.filter(
 );
 </script>
 
-<div class="h-full bg-zinc-900">
+<div class="h-full text-[var(--pd-table-body-text)]">
   {#if containerConnectionInfo}
     {@const peerProperties = new PeerProperties()}
     <div class="flex pl-8 py-4 flex-col w-full text-sm">
diff --git a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionEdit.svelte b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionEdit.svelte
index cf2c06151c2c0..fe9b9d5693eeb 100644
--- a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionEdit.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionEdit.svelte
@@ -55,14 +55,14 @@ async function editConnection(
 
 {#if providerInfo && connectionInfo}
   <DetailsPage title="{connectionInfo.name}">
-    <svelte:fragment slot="content">
+    <div slot="content" class="text-[var(--pd-content-text)]">
       <PreferencesConnectionCreationRendering
         providerInfo="{providerInfo}"
         connectionInfo="{connectionInfo}"
         properties="{properties}"
         propertyScope="{scope}"
         callback="{editConnection}" />
-    </svelte:fragment>
+    </div>
     <IconImage slot="icon" image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
     <svelte:fragment slot="subtitle">
       {#if connectionInfo.status === 'started'}
diff --git a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
index 1da189c3c14a3..be0d97f35c33d 100644
--- a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
@@ -136,53 +136,51 @@ function setNoLogs() {
 </script>
 
 {#if connectionInfo}
-  <div class="bg-charcoal-700 h-full">
-    <DetailsPage title="{connectionInfo.name}" bind:this="{detailsPage}">
-      <svelte:fragment slot="subtitle">
-        <div class="flex flex-row">
-          <ConnectionStatus status="{connectionInfo.status}" />
-          <ConnectionErrorInfoButton status="{connectionStatus}" />
+  <DetailsPage title="{connectionInfo.name}" bind:this="{detailsPage}">
+    <svelte:fragment slot="subtitle">
+      <div class="flex flex-row">
+        <ConnectionStatus status="{connectionInfo.status}" />
+        <ConnectionErrorInfoButton status="{connectionStatus}" />
+      </div>
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+      {#if providerInfo}
+        <div class="flex justify-end">
+          <PreferencesConnectionActions
+            provider="{providerInfo}"
+            connection="{connectionInfo}"
+            connectionStatus="{connectionStatus}"
+            updateConnectionStatus="{updateConnectionStatus}"
+            addConnectionToRestartingQueue="{addConnectionToRestartingQueue}" />
         </div>
-      </svelte:fragment>
-      <svelte:fragment slot="actions">
-        {#if providerInfo}
-          <div class="flex justify-end">
-            <PreferencesConnectionActions
-              provider="{providerInfo}"
-              connection="{connectionInfo}"
-              connectionStatus="{connectionStatus}"
-              updateConnectionStatus="{updateConnectionStatus}"
-              addConnectionToRestartingQueue="{addConnectionToRestartingQueue}" />
-          </div>
-        {/if}
-      </svelte:fragment>
-      <IconImage slot="icon" image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
-      <svelte:fragment slot="tabs">
-        <Tab
-          title="Summary"
-          selected="{isTabSelected($router.path, 'summary')}"
-          url="{getTabUrl($router.path, 'summary')}" />
-        {#if connectionInfo.lifecycleMethods && connectionInfo.lifecycleMethods.length > 0}
-          <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
-        {/if}
-      </svelte:fragment>
-      <svelte:fragment slot="content">
-        <div class="h-full">
-          <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
-            <PreferencesContainerConnectionDetailsSummary
-              containerConnectionInfo="{connectionInfo}"
-              providerInternalId="{providerInternalId}"
-              properties="{configurationKeys}" />
-          </Route>
-          <Route path="/logs" breadcrumb="Logs" navigationHint="tab">
-            <PreferencesConnectionDetailsLogs
-              providerInternalId="{providerInternalId}"
-              connectionInfo="{connectionInfo}"
-              setNoLogs="{setNoLogs}"
-              noLog="{noLog}" />
-          </Route>
-        </div>
-      </svelte:fragment>
-    </DetailsPage>
-  </div>
+      {/if}
+    </svelte:fragment>
+    <IconImage slot="icon" image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
+    <svelte:fragment slot="tabs">
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      {#if connectionInfo.lifecycleMethods && connectionInfo.lifecycleMethods.length > 0}
+        <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+      {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="content">
+      <div class="h-full">
+        <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
+          <PreferencesContainerConnectionDetailsSummary
+            containerConnectionInfo="{connectionInfo}"
+            providerInternalId="{providerInternalId}"
+            properties="{configurationKeys}" />
+        </Route>
+        <Route path="/logs" breadcrumb="Logs" navigationHint="tab">
+          <PreferencesConnectionDetailsLogs
+            providerInternalId="{providerInternalId}"
+            connectionInfo="{connectionInfo}"
+            setNoLogs="{setNoLogs}"
+            noLog="{noLog}" />
+        </Route>
+      </div>
+    </svelte:fragment>
+  </DetailsPage>
 {/if}
diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionDetailsSummary.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionDetailsSummary.svelte
index 49d4bff366787..d2b3b9df73b06 100644
--- a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionDetailsSummary.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionDetailsSummary.svelte
@@ -32,7 +32,7 @@ $: providerConnectionConfiguration = tmpProviderContainerConfiguration.filter(
 );
 </script>
 
-<div class="h-full bg-zinc-900">
+<div class="h-full text-[var(--pd-table-body-text)]">
   {#if kubernetesConnectionInfo}
     <div class="flex pl-8 py-4 flex-col w-full text-sm">
       <div class="flex flex-row mt-5">
diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
index fed4a9b9b950f..5ec323b3a939c 100644
--- a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
@@ -132,55 +132,53 @@ function setNoLogs() {
 </script>
 
 {#if connectionInfo}
-  <div class="bg-charcoal-700 h-full">
-    <DetailsPage title="{connectionInfo.name}" bind:this="{detailsPage}">
-      <svelte:fragment slot="subtitle">
-        <div class="flex flex-row">
-          <ConnectionStatus status="{connectionInfo.status}" />
-          <ConnectionErrorInfoButton status="{connectionStatus}" />
+  <DetailsPage title="{connectionInfo.name}" bind:this="{detailsPage}">
+    <svelte:fragment slot="subtitle">
+      <div class="flex flex-row">
+        <ConnectionStatus status="{connectionInfo.status}" />
+        <ConnectionErrorInfoButton status="{connectionStatus}" />
+      </div>
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+      {#if providerInfo}
+        <div class="flex justify-end">
+          <PreferencesConnectionActions
+            provider="{providerInfo}"
+            connection="{connectionInfo}"
+            connectionStatus="{connectionStatus}"
+            updateConnectionStatus="{updateConnectionStatus}"
+            addConnectionToRestartingQueue="{addConnectionToRestartingQueue}" />
         </div>
-      </svelte:fragment>
-      <svelte:fragment slot="actions">
-        {#if providerInfo}
-          <div class="flex justify-end">
-            <PreferencesConnectionActions
-              provider="{providerInfo}"
-              connection="{connectionInfo}"
-              connectionStatus="{connectionStatus}"
-              updateConnectionStatus="{updateConnectionStatus}"
-              addConnectionToRestartingQueue="{addConnectionToRestartingQueue}" />
-          </div>
-        {/if}
-      </svelte:fragment>
-      <svelte:fragment slot="icon">
-        <IconImage image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
-      </svelte:fragment>
-      <svelte:fragment slot="tabs">
-        <Tab
-          title="Summary"
-          selected="{isTabSelected($router.path, 'summary')}"
-          url="{getTabUrl($router.path, 'summary')}" />
-        {#if connectionInfo.lifecycleMethods && connectionInfo.lifecycleMethods.length > 0}
-          <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
-        {/if}
-      </svelte:fragment>
-      <svelte:fragment slot="content">
-        <div class="h-full">
-          <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
-            <PreferencesKubernetesConnectionDetailsSummary
-              kubernetesConnectionInfo="{connectionInfo}"
-              providerInternalId="{providerInternalId}"
-              properties="{configurationKeys}" />
-          </Route>
-          <Route path="/logs" breadcrumb="Logs" navigationHint="tab">
-            <PreferencesConnectionDetailsLogs
-              providerInternalId="{providerInternalId}"
-              connectionInfo="{connectionInfo}"
-              setNoLogs="{setNoLogs}"
-              noLog="{noLog}" />
-          </Route>
-        </div>
-      </svelte:fragment>
-    </DetailsPage>
-  </div>
+      {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="icon">
+      <IconImage image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
+    </svelte:fragment>
+    <svelte:fragment slot="tabs">
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      {#if connectionInfo.lifecycleMethods && connectionInfo.lifecycleMethods.length > 0}
+        <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+      {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="content">
+      <div class="h-full">
+        <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
+          <PreferencesKubernetesConnectionDetailsSummary
+            kubernetesConnectionInfo="{connectionInfo}"
+            providerInternalId="{providerInternalId}"
+            properties="{configurationKeys}" />
+        </Route>
+        <Route path="/logs" breadcrumb="Logs" navigationHint="tab">
+          <PreferencesConnectionDetailsLogs
+            providerInternalId="{providerInternalId}"
+            connectionInfo="{connectionInfo}"
+            setNoLogs="{setNoLogs}"
+            noLog="{noLog}" />
+        </Route>
+      </div>
+    </svelte:fragment>
+  </DetailsPage>
 {/if}