diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index bafddadc7..49040f6f9 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -12,7 +12,7 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 hover:shadow-sm px-2 py-4 border-b w-full"
+      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 hover:shadow-sm px-2 py-4 border-b w-full"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index b09307888..bf02dd641 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 3de1a5586..c026f7411 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -71,7 +71,7 @@
               v-if="!singleConfig"
               type="button"
               :title="workflow.name"
-              class="flex items-center gap-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 px-1 py-2 rounded-md hover-effect"
+              class="flex items-center gap-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 px-1 py-2 rounded-md hover-effect"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
@@ -100,7 +100,7 @@
               :key="step.pid"
               type="button"
               :title="step.name"
-              class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 p-2 border-transparent rounded-md w-full hover-effect"
+              class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 p-2 border-transparent rounded-md w-full hover-effect"
               :class="{
                 'bg-wp-background-400 dark:bg-wp-background-500': selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),