diff --git a/src/components/TaskCard.vue b/src/components/TaskCard.vue
index 5253b5d..d3b7d4b 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -1,5 +1,15 @@
 <template>
   <v-card :color="$theme.nestedCard.color">
+    <v-system-bar
+      :class="{'red': isLate, 'light-green': !isLate}"
+      text-color=white
+      v-if=task.deadline
+      small
+    >
+        <v-icon small v-if=isLate>{{ $icons.mdiClockAlert }}</v-icon>
+        <span class="font-weight-bold">{{ task.deadline }}</span>
+    </v-system-bar>
+
     <v-card-text :class="[$theme.nestedCard.textSize, 'pt-3 pb-1 px-3']">
       <v-checkbox
         class="task-checkbox my-0 py-0"
@@ -85,6 +95,11 @@
           :items="$store.getters['taskListChoices']"
           label="List"
         ></v-select>
+        <v-text-field
+          v-model="newTask.deadline"
+          label="Deadline"
+          type="date"
+          ></v-text-field>
         <v-btn transition="" small text color="red" @click.prevent="deleteTask">
          <v-icon left transition="">{{ $icons.mdiDelete }}</v-icon>
           Delete
@@ -124,6 +139,14 @@ export default {
   },
   components: {SubtaskList},
   computed: {
+    isLate () {
+      if (this.task.deadline &&
+          this.task.deadline < new Date().toISOString() &&
+          !this.isDone) {
+        return true
+      }
+      return false
+    },
     category () {
       if (!this.task.category) {
         return 
diff --git a/src/main.js b/src/main.js
index f4e9138..b1577cb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,6 +22,7 @@ import {
   mdiChevronRight,
   mdiChevronUp,
   mdiClock,
+  mdiClockAlert,
   mdiClockOutline,
   mdiClose,
   mdiCog,
@@ -59,6 +60,7 @@ Vue.prototype.$icons = {
   mdiChevronRight,
   mdiChevronUp,
   mdiClock,
+  mdiClockAlert,
   mdiClockOutline,
   mdiClose,
   mdiCog,
diff --git a/src/views/Tasks.vue b/src/views/Tasks.vue
index 41f3683..97336ef 100644
--- a/src/views/Tasks.vue
+++ b/src/views/Tasks.vue
@@ -114,6 +114,11 @@
                     @keydown.enter="submitTask(idx)"
                     label="Category"
                   ></v-select>
+                  <v-text-field
+                    label="Deadline"
+                    v-model="newTaskDeadline"
+                    type="date"
+                  ></v-text-field>
                 </v-form>
               </v-card-text>
               <v-card-actions class="py-4 px-0">
@@ -198,6 +203,7 @@ export default {
       tasks: [],
       newTaskText: '',
       newTaskCategory: null,
+      newTaskDeadLine: null,
       trackEvent,
       clearDoneDialog: false,
     }
@@ -234,6 +240,7 @@ export default {
         text: this.newTaskText,
         list: idx,
         category: this.newTaskCategory,
+        deadline: this.newTaskDeadline,
         subtasks: [],
       }
       let result = await this.$store.state.db.put(task)
@@ -241,6 +248,7 @@ export default {
       this.tasks.push(task)
       this.newTaskText = null
       this.newTaskCategory = null
+      this.newTaskDeadline = null
       trackEvent(this.$store, "task.created")
       await this.$store.dispatch('forceSync', {updateLastSync: false})
     },