diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 6cb90706..325a9184 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -56,6 +56,12 @@
 				</span>
 			</span>
 		</span>
+		<progress
+			class="progress is-small"
+			v-if="task.percentDone > 0"
+			:value="task.percentDone * 100" max="100">
+			{{ task.percentDone * 100 }}%
+		</progress>
 		<router-link
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
 			class="task-list"
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 653ad86c..df4ea88e 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -72,6 +72,12 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           font-size: .85rem;
           word-break: break-word;
         }
+        
+        .progress {
+          margin: 8px 0 0 0;
+          width: 100%;
+          height: 0.5rem;
+        }
 
         .due-date {
           float: right;
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index bb106d8b..637f7fa5 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -19,6 +19,7 @@
 
   .task {
     display: flex;
+    flex-wrap: wrap;
     padding: 0.5rem 1rem;
     border-bottom: 1px solid darken(#fff, 10%);
     transition: background-color $transition;
@@ -35,7 +36,7 @@
       text-overflow: ellipsis;
       overflow: hidden;
       display: inline-block;
-      width: 100%;
+      flex: 1 0 50%;
 
       .overdue {
         color: $red;
@@ -55,7 +56,7 @@
 
     .color-bubble {
       height: 10px;
-      flex: 1 0 10px;
+      flex: 0 0 10px;
     }
 
     .tag {
@@ -151,6 +152,18 @@
     }
   }
 
+  .progress {
+    width: 50px;
+    margin: 0 0.5rem 0 0;
+    flex: 3 1 auto;
+
+    @media screen and (max-width: $tablet) {
+      margin: 0.5rem 0 0 0;
+      order: 1;
+      width: 100%;
+    }
+  }
+
   .task:last-child {
     border-bottom: none;
   }
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index e9d5be52..9b301f64 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -164,7 +164,7 @@
 
         .color-bubble {
           height: 12px;
-          flex: 1 0 12px;
+          flex: 0 0 12px;
         }
 
         .favorite {
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 082e0a82..bbeec434 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -139,6 +139,12 @@
 								</span>
 							</span>
 								<h3>{{ task.title }}</h3>
+								<progress
+									class="progress is-small"
+									v-if="task.percentDone > 0"
+									:value="task.percentDone * 100" max="100">
+									{{ task.percentDone * 100 }}%
+								</progress>
 								<labels :labels="task.labels"/>
 								<div class="footer">
 									<div class="items">