diff --git a/src/components/tasks.vue b/src/components/tasks.vue
index 600689e..5105669 100644
--- a/src/components/tasks.vue
+++ b/src/components/tasks.vue
@@ -87,6 +87,7 @@ export default {
       if (task.status == "failed") return "failed";
       if (task.status == "stopped") return "failed";
       if (task.status == "running") return "running";
+      if (task.status == "skipped") return "skipped";
       return "unknown";
     }
   },
diff --git a/src/components/tasksgraph.vue b/src/components/tasksgraph.vue
index 1bef4c9..4c7cc30 100644
--- a/src/components/tasksgraph.vue
+++ b/src/components/tasksgraph.vue
@@ -148,6 +148,7 @@ export default {
       if (task.status == "failed") return "failed";
       if (task.status == "stopped") return "failed";
       if (task.status == "running") return "running";
+      if (task.status == "skipped") return "skipped";
       return "unknown";
     },
     update(tasks) {
diff --git a/src/components/tasksummary.vue b/src/components/tasksummary.vue
index e077a17..4ffc6fd 100644
--- a/src/components/tasksummary.vue
+++ b/src/components/tasksummary.vue
@@ -77,6 +77,7 @@ export default {
       if (task.status == "failed") return "is-failed";
       if (task.status == "stopped") return "is-failed";
       if (task.status == "running") return "is-running";
+      if (task.status == "skipped") return "is-skipped";
       return "unknown";
     },
     async fetchRun() {
diff --git a/src/css/tailwind.scss b/src/css/tailwind.scss
index 835f214..6e2bb37 100644
--- a/src/css/tailwind.scss
+++ b/src/css/tailwind.scss
@@ -85,6 +85,14 @@
   @apply bg-blue-500 text-white;
 }
 
+.skipped {
+  @apply border-gray-800;
+}
+
+.is-skipped {
+  @apply bg-gray-800 text-white;
+}
+
 .unknown {
   @apply border-gray-400;
 }