diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 124d7ada3..a16e223f6 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -5,7 +5,7 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-bg-100 px-4 py-2">
         <span class="text-base font-bold text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
@@ -96,7 +96,7 @@
 
       <div
         v-if="step?.finished !== undefined"
-        class="flex items-center w-full bg-wp-code-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
+        class="flex items-center w-full bg-wp-code-bg-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
       >
         <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
         <span v-if="step?.error" class="px-2">{{ step.error }}</span>
diff --git a/web/src/style.css b/web/src/style.css
index 62e39860c..5da5d3f4b 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -39,9 +39,7 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
-  --wp-code-100: theme('colors.int-wp-secondary.300');
-  --wp-code-200: theme('colors.int-wp-secondary.600');
-  --wp-code-custom: #f0f1f3;
+  --wp-code-bg-100: #f0f1f3;
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -89,9 +87,7 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
-  --wp-code-100: theme('colors.int-wp-secondary.700');
-  --wp-code-200: theme('colors.int-wp-secondary.800');
-  --wp-code-custom: #3d444d;
+  --wp-code-bg-100: #3d444d;
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
@@ -145,7 +141,7 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
+  @apply bg-wp-code-bg-100 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
   white-space: pre-wrap;
 }
 
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 51fa05513..121ffd851 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -193,9 +193,8 @@ export default defineConfig({
           200: 'var(--wp-hint-warn-200)',
         },
 
-        'wp-code': {
-          100: 'var(--wp-code-100)',
-          200: 'var(--wp-code-200)',
+        'wp-code-bg': {
+          100: 'var(--wp-code-bg-100)',
         },
         'wp-code-text': {
           100: 'var(--wp-code-text-100)',