diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index ab9fb52e9..58073ee83 100644
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@@ -6,7 +6,7 @@
       <slot v-else-if="$slots.titleActions" name="titleActions" />
     </div>
     <slot :id="id" />
-    <div v-if="$slots.description" class="text-wp-text-alt-100 ml-1">
+    <div v-if="$slots.description" class="text-wp-text-alt-100 ml-1 mt-1">
       <slot name="description" />
     </div>
   </div>
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index c62b86da2..516220dbf 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -6,7 +6,7 @@
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="text-wp-text-100 bg-wp-background-300 flex w-full gap-2 px-4 py-2 font-bold"
+      class="bg-wp-background-400 text-wp-text-100 flex w-full gap-2 px-4 py-2 font-bold"
       @click="_collapsed = !_collapsed"
     >
       <Icon
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 10f72c83c..f566b70d2 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="code-box !md:rounded-md flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
+      class="code-box-log !md:rounded-md flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
diff --git a/web/src/style.css b/web/src/style.css
index 82e1f2aea..a556ceba7 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -38,8 +38,15 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
+  --wp-code-inline-100: theme('colors.gray.200');
+  --wp-code-inline-200: theme('colors.gray.200');
+
+  --wp-code-inline-text-100: theme('colors.gray.600');
+
   --wp-code-100: theme('colors.int-wp-secondary.300');
   --wp-code-200: theme('colors.int-wp-secondary.600');
+  --wp-code-300: theme('colors.int-wp-secondary.600');
+
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -86,9 +93,16 @@
   --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-text-100: theme('colors.gray.300');
+  --wp-code-inline-100: theme('colors.int-wp-secondary.700');
+  --wp-code-inline-200: theme('colors.int-wp-secondary.300');
+
+  --wp-code-inline-text-100: theme('colors.gray.300');
+
+  --wp-code-100: theme('colors.int-wp-secondary.700'); /* #222631 */
+  --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
+  --wp-code-300: theme('colors.int-wp-secondary.800'); /* #1B1F28 */
+
+  --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
   --wp-link-100: theme('colors.blue.400');
@@ -141,11 +155,16 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 text-wp-code-text-100 break-words rounded-md p-4 text-sm;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 break-words rounded-md p-4 text-sm;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-200 text-wp-code-text-100 rounded-md px-1 py-px;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 rounded-md px-1.5 py-0.5;
+}
+
+.code-box-log {
+  @apply bg-wp-code-300 text-wp-code-text-100 break-words rounded-md p-4 text-sm;
+  white-space: pre-wrap;
 }
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 450064e20..7f426c90b 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -178,10 +178,21 @@ export default defineConfig({
           200: 'var(--wp-hint-warn-200)',
         },
 
+        'wp-code-inline': {
+          100: 'var(--wp-code-inline-100)',
+          200: 'var(--wp-code-inline-200)',
+        },
+
+        'wp-code-inline-text': {
+          100: 'var(--wp-code-inline-text-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)',
         },