diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index a16e223f6..575952984 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -1,17 +1,17 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:mt-0 !md:rounded-md overflow-hidden"
+      class="flex flex-col flex-grow shadow md:mt-0 !p-0 !rounded-none !md:rounded-md overflow-hidden code-box"
       @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-bg-100 px-4 py-2">
-        <span class="text-base font-bold text-wp-code-text-alt-100">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-300 px-4 py-2">
+        <span class="font-bold text-base text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
         </span>
 
-        <div class="flex flex-row items-center ml-auto gap-x-2">
+        <div class="flex flex-row items-center gap-x-2 ml-auto">
           <IconButton
             v-if="step?.finished !== undefined && hasLogs"
             :is-loading="downloadInProgress"
@@ -37,7 +37,7 @@
             @click="autoScroll = !autoScroll"
           />
           <IconButton
-            class="!hover:bg-white !hover:bg-opacity-10 !md:hidden"
+            class="!md:hidden !hover:bg-white !hover:bg-opacity-10"
             icon="close"
             @click="$emit('update:step-id', null)"
           />
@@ -47,13 +47,13 @@
       <div
         v-show="hasLogs && loadedLogs && (log?.length || 0) > 0"
         ref="consoleElement"
-        class="w-full max-w-full grid grid-cols-[min-content,minmax(0,1fr),min-content] p-4 auto-rows-min flex-grow overflow-x-hidden overflow-y-auto text-xs md:text-sm"
+        class="flex-grow grid grid-cols-[min-content,minmax(0,1fr),min-content] auto-rows-min p-4 w-full max-w-full text-xs md:text-sm overflow-x-hidden overflow-y-auto"
       >
-        <div v-for="line in log" :key="line.index" class="contents font-mono">
+        <div v-for="line in log" :key="line.index" class="font-mono contents">
           <a
             :id="`L${line.number}`"
             :href="`#L${line.number}`"
-            class="text-wp-code-text-alt-100 whitespace-nowrap select-none text-right pl-2 pr-6"
+            class="text-right pr-6 pl-2 text-wp-code-text-alt-100 whitespace-nowrap select-none"
             :class="{
               'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
               'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@@ -65,7 +65,7 @@
           </a>
           <!-- eslint-disable vue/no-v-html -->
           <span
-            class="align-top whitespace-pre-wrap break-words"
+            class="align-top break-words whitespace-pre-wrap"
             :class="{
               'bg-opacity-40 dark:bg-opacity-50 bg-10.168.64.121-600 dark:bg-red-800': line.type === 'error',
               'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@@ -75,7 +75,7 @@
           />
           <!-- eslint-enable vue/no-v-html -->
           <span
-            class="text-wp-code-text-alt-100 whitespace-nowrap select-none text-right pr-1"
+            class="text-right pr-1 text-wp-code-text-alt-100 whitespace-nowrap select-none"
             :class="{
               'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
               'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@@ -87,7 +87,7 @@
         </div>
       </div>
 
-      <div class="m-auto text-xl text-wp-text-alt-100">
+      <div class="m-auto text-wp-text-alt-100 text-xl">
         <span v-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
         <span v-else-if="!step?.started">{{ $t('repo.pipeline.step_not_started') }}</span>
         <div v-else-if="!loadedLogs">{{ $t('repo.pipeline.loading') }}</div>
@@ -96,9 +96,9 @@
 
       <div
         v-if="step?.finished !== undefined"
-        class="flex items-center w-full bg-wp-code-bg-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
+        class="flex items-center bg-wp-code-300 p-4 w-full font-bold text-md text-wp-code-text-alt-100"
       >
-        <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
+        <PipelineStatusIcon :status="step.state" class="!w-4 !h-4" />
         <span v-if="step?.error" class="px-2">{{ step.error }}</span>
         <span v-else class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
       </div>
diff --git a/web/src/style.css b/web/src/style.css
index 866885480..f4d761406 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -39,7 +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-bg-100: #f0f1f3;
+  --wp-code-300: #f0f1f3;
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -87,7 +87,6 @@
   --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-bg-100: #3d444d;
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
@@ -147,5 +146,5 @@ body,
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-custom px-1.5 py-0.5 rounded-lg text-wp-code-text-100;
+  @apply bg-wp-code-300 px-1.5 py-0.5 rounded-lg text-wp-code-text-100;
 }
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 121ffd851..88373b4cc 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -193,9 +193,12 @@ export default defineConfig({
           200: 'var(--wp-hint-warn-200)',
         },
 
-        'wp-code-bg': {
-          100: 'var(--wp-code-bg-100)',
+        'wp-code': {
+          100: 'var(--wp-code-100)',
+          200: 'var(--wp-code-200)',
+          300: 'var(--wp-code-300)',
         },
+
         'wp-code-text': {
           100: 'var(--wp-code-text-100)',
         },