diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 8545310f0..d9e6d3d8b 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -52,8 +52,10 @@
 
 			<DatetimePicker v-model="copiedCard.duedate" type="datetime" lang="en"
 				format="YYYY-MM-DD HH:mm" confirm @change="setDue()" />
-			<button v-tooltip="t('deck', 'Delete')" v-if="copiedCard.duedate" class="icon-delete"
-				@click="removeDue()" />
+
+			<Actions>
+				<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">{{ t('deck', 'Remove due date') }}</ActionButton>
+			</Actions>
 
 			<markdown-editor ref="markdownEditor" v-model="desc" :configs="{autofocus: true, autosave: {enabled: true, uniqueId: 'unique'}, toolbar: false}" />
 		</AppSidebarTab>
@@ -73,6 +75,8 @@
 import { AppSidebar, AppSidebarTab, Multiselect, DatetimePicker } from 'nextcloud-vue'
 import { mapState } from 'vuex'
 import markdownEditor from 'vue-easymde/src/markdown-editor'
+import { Actions } from 'nextcloud-vue/dist/Components/Actions'
+import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
 
 export default {
 	name: 'CardSidebar',
@@ -81,7 +85,9 @@ export default {
 		AppSidebarTab,
 		Multiselect,
 		DatetimePicker,
-		markdownEditor
+		markdownEditor,
+		Actions,
+		ActionButton
 	},
 	props: {
 		id: {
@@ -96,7 +102,9 @@ export default {
 			isLoading: false,
 			copiedCard: null,
 			allLabels: null,
-			desc: null
+			desc: null,
+			lastModifiedRelative: null,
+			lastCreatedRemative: null
 		}
 	},
 	computed: {
@@ -108,10 +116,7 @@ export default {
 			return this.$store.getters.cardById(this.id)
 		},
 		subtitle() {
-			let lastModified = this.currentCard.lastModified
-			let createdAt = this.currentCard.createdAt
-
-			return t('deck', 'Modified') + ': ' + lastModified + ' ' + t('deck', 'Created') + ': ' + createdAt
+			return t('deck', 'Modified') + ': ' + this.lastModifiedRelative + ' ' + t('deck', 'Created') + ': ' + this.lastCreatedRemative
 		},
 		toolbarActions() {
 			return [
@@ -140,14 +145,26 @@ export default {
 				this.allLabels = this.currentCard.labels
 				this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
 				this.desc = this.currentCard.description
+				this.updateRelativeTimestamps()
 			}
 		},
+
 		desc() {
 			this.copiedCard.description = this.desc
 			this.saveDesc()
 		}
 	},
+	created() {
+		setInterval(this.updateRelativeTimestamps, 10000)
+	},
+	destroyed() {
+		clearInterval(this.updateRelativeTimestamps)
+	},
 	methods: {
+		updateRelativeTimestamps() {
+			this.lastModifiedRelative = OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
+			this.lastCreatedRemative = OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
+		},
 		setDue() {
 			this.$store.dispatch('updateCardDue', this.copiedCard)
 		},
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 047f84009..3077a6879 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -1,3 +1,5 @@
+cardbadges
+
 <!--
   - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
   -
@@ -27,12 +29,10 @@
 		<div v-if="card.description" class="card-comments icon icon-filetype-text" />
 
 		<div v-if="card.duedate" :class="dueIcon">
-			<span>{{ dueTimeDiff }}</span>
+			<span>{{ dueTime }}</span>
 		</div>
-
-		<div v-if="card.description && card.description.match(/\[\s*\]/g)" class="card-tasks icon icon-checkmark">
-			<!-- TODO: get checkbox values -->
-			<span>0/0</span>
+		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
+			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
 		</div>
 
 		<div v-if="card.assignedUsers" class="card-assigned-users">
@@ -52,47 +52,48 @@ export default {
 			default: null
 		}
 	},
+	data() {
+		return {
+			dueTime: null,
+			dueIcon: null
+		}
+	},
 	computed: {
+		checkListCount() {
+			return (this.card.description.match(/\[\s*\x*\]/g) || []).length
+		},
+		checkListCheckedCount() {
+			return (this.card.description.match(/\[\s*x\s*\]/g) || []).length
+		},
 		compactMode() {
 			return false
 		},
-		dueIcon() {
-			let timeInHours = Math.round((Date.parse(this.card.duedate) - Date.now()) / 1000 / 60 / 60 / 24)
-
-			if (timeInHours === 1) {
-				return 'icon-calendar-dark due icon next'
-			}
-			if (timeInHours === 0) {
-				return 'icon-calendar-dark due icon now'
-			}
-			if (timeInHours < 0) {
-				return 'icon-calendar-dark due icon overdue'
-			}
-		},
-		dueTimeDiff() {
-			let unit = 'Minutes'
-			let timeInMin = (Date.parse(this.card.duedate) - Date.now()) / 60000
-
-			if (timeInMin > 59) {
-				timeInMin /= 60
-				unit = 'Hours'
-			}
-
-			if (timeInMin > 23) {
-				timeInMin /= 24
-				unit = 'Days'
-			}
-
-			if (timeInMin > 355) {
-				timeInMin /= 355
-				unit = 'Years'
-			}
-
-			return Math.round(timeInMin) + ' ' + unit
-		},
 		card() {
 			return this.$store.getters.cardById(this.id)
 		}
+	},
+	created() {
+		this.updateDueTime()
+		setInterval(this.updateDueTime, 10000)
+	},
+	destroyed() {
+		clearInterval(this.updateDueTime)
+	},
+	methods: {
+		updateDueTime() {
+			this.dueTime = OC.Util.relativeModifiedDate(this.card.duedate)
+
+			let timeInHours = Math.round((Date.parse(this.card.duedate) - Date.now()) / 1000 / 60 / 60 / 24)
+			if (timeInHours >= 1) {
+				this.dueIcon = 'icon-calendar-dark due icon next'
+			}
+			if (timeInHours === 0) {
+				this.dueIcon = 'icon-calendar-dark due icon now'
+			}
+			if (timeInHours < 0) {
+				this.dueIcon = 'icon-calendar-dark due icon overdue'
+			}
+		}
 	}
 }
 </script>