diff --git a/routers/web/projects/workflows.go b/routers/web/projects/workflows.go
index 1ec8f2940c..9c3a23ac3e 100644
--- a/routers/web/projects/workflows.go
+++ b/routers/web/projects/workflows.go
@@ -279,12 +279,14 @@ func WorkflowsColumns(ctx *context.Context) {
 	type Column struct {
 		ID    int64  `json:"id"`
 		Title string `json:"title"`
+		Color string `json:"color"`
 	}
 	outputColumns := make([]*Column, 0, len(columns))
 	for _, col := range columns {
 		outputColumns = append(outputColumns, &Column{
 			ID:    col.ID,
 			Title: col.Title,
+			Color: col.Color,
 		})
 	}
 
diff --git a/web_src/js/components/projects/ProjectWorkflow.vue b/web_src/js/components/projects/ProjectWorkflow.vue
index 36b623c726..68fb28671b 100644
--- a/web_src/js/components/projects/ProjectWorkflow.vue
+++ b/web_src/js/components/projects/ProjectWorkflow.vue
@@ -815,7 +815,7 @@ onUnmounted(() => {
                   <label>Apply to</label>
                   <select
                     v-if="isInEditMode"
-                    class="form-select"
+                    class="column-select"
                     v-model="store.workflowFilters.issue_type"
                   >
                     <option value="">Issues And Pull Requests</option>
@@ -833,8 +833,8 @@ onUnmounted(() => {
                   <label>When moved to column</label>
                   <select
                     v-if="isInEditMode"
-                    class="form-select"
                     v-model="store.workflowFilters.column"
+                    class="column-select"
                   >
                     <option value="">Any column</option>
                     <option v-for="column in store.projectColumns" :key="column.id" :value="String(column.id)">
@@ -892,8 +892,8 @@ onUnmounted(() => {
                   <label>Move to column</label>
                   <select
                     v-if="isInEditMode"
-                    class="form-select"
                     v-model="store.workflowActions.column"
+                    class="column-select"
                   >
                     <option value="">Select column...</option>
                     <option v-for="column in store.projectColumns" :key="column.id" :value="String(column.id)">
@@ -982,7 +982,7 @@ onUnmounted(() => {
                   <select
                     v-if="isInEditMode"
                     id="issue-state-action"
-                    class="form-select"
+                    class="column-select"
                     v-model="store.workflowActions.issueState"
                   >
                     <option value="">No change</option>
@@ -1524,4 +1524,23 @@ onUnmounted(() => {
 .text-muted {
   color: #6c757d;
 }
+
+/* Column select styling */
+.column-select {
+  width: 100%;
+  padding: 0.67857143em 1em;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-radius: 0.28571429rem;
+  font-size: 1em;
+  line-height: 1.21428571em;
+  min-height: 2.71428571em;
+  background-color: #fff;
+  transition: border-color 0.1s ease, box-shadow 0.1s ease;
+}
+
+.column-select:focus {
+  border-color: #85b7d9;
+  outline: none;
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
+}
 </style>