diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 7f9ea0fad4..ef43c716db 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -1,6 +1,11 @@
 <template>
 	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
 		<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
+		<span
+			:style="{backgroundColor: listColor }"
+			class="color-bubble"
+			v-if="listColor !== ''">
+		</span>
 		<span :class="{ 'done': task.done}" class="tasktext">
 			<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }">
 				<router-link
@@ -121,6 +126,10 @@ export default {
 		this.taskService = new TaskService()
 	},
 	computed: {
+		listColor() {
+			const list = this.$store.getters['lists/getListById'](this.task.listId)
+			return list !== null ? list.hexColor : ''
+		},
 		currentList() {
 			return typeof this.$store.state.currentList === 'undefined' ? {
 				id: 0,
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index e531f4c2ba..dfefc20d76 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -53,6 +53,11 @@
       display: none;
     }
 
+    .color-bubble {
+      width: 11px;
+      height: 10px;
+    }
+
     .tag {
       margin: 0 0.5em;
     }
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 5aa89c1706..a054e55ea4 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -163,11 +163,8 @@
         }
 
         .color-bubble {
-          display: inline-block;
           width: 14px; // Without this, the bubble is only 10.2342357612px wide and seems squashed.
           height: 12px;
-          border-radius: 100%;
-          margin-right: 4px;
         }
 
         .favorite {
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 2680ffc61a..1a548e5c9a 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -98,3 +98,9 @@ button.table {
 .is-fullwidth {
   width: 100%;
 }
+
+.color-bubble {
+  display: inline-block;
+  border-radius: 100%;
+  margin-right: 4px;
+}