diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index 1ad226c08..0a584f528 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -21,18 +21,31 @@
   -->
 
 <template>
-	<div v-if="card" class="duedate">
+	<div v-if="card" class="duedate" :data-due-state="dueState">
 		<transition name="zoom">
-			<div v-if="card.duedate" :class="dueIcon" :title="absoluteDate">
-				<span>{{ relativeDate }}</span>
+			<div v-if="card.duedate" class="due" :title="absoluteDate">
+				<Clock v-if="overdue" :size="16" />
+				<ClockOutline v-else :size="16" />
+				<span v-if="!compactMode" class="due--label">{{ relativeDate }}</span>
 			</div>
 		</transition>
 	</div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import moment from '@nextcloud/moment'
+import Clock from 'vue-material-design-icons/Clock.vue'
+import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
+import CalendarAlert from 'vue-material-design-icons/CalendarAlert.vue'
+import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 
+const DueState = {
+	Future: 'Future',
+	Next: 'Next',
+	Now: 'Now',
+	Overdue: 'Overdue',
+}
 export default {
 	name: 'DueDate',
 	props: {
@@ -41,19 +54,32 @@ export default {
 			default: null,
 		},
 	},
+	components: {
+		Clock,
+		ClockOutline,
+		CalendarAlert,
+		CalendarBlank,
+	},
 	computed: {
-		dueIcon() {
+		...mapState({
+			compactMode: state => state.compactMode,
+		}),
+		dueState() {
 			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
 			if (days < 0) {
-				return 'icon-calendar due icon overdue'
+				return DueState.Overdue
 			}
 			if (days === 0) {
-				return 'icon-calendar-dark due icon now'
+				return DueState.Now
 			}
 			if (days === 1) {
-				return 'icon-calendar-dark due icon next'
+				return DueState.Overdue
 			}
-			return 'icon-calendar-dark due icon'
+
+			return DueState.Future
+		},
+		overdue() {
+			this.dueState === DueState.Overdue
 		},
 		relativeDate() {
 			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
@@ -63,49 +89,43 @@ export default {
 			return moment(this.card.duedate).fromNow()
 		},
 		absoluteDate() {
-			return moment(this.card.duedate).format('L')
+			return moment(this.card.duedate).format('LLLL')
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-	.icon.due {
+	.due {
 		background-position: 4px center;
-		border-radius: 3px;
+		border-radius: var(--border-radius-large);
 		margin-top: 9px;
 		margin-bottom: 9px;
-		padding: 3px 0 3px 4px;
+		padding: 2px 8px;
 		font-size: 90%;
 		display: flex;
 		align-items: center;
 		flex-shrink: 1;
 		z-index: 2;
 
-		.icon {
-			background-size: contain;
+		[data-due-state="Overdue"] & {
+			color: var(--color-main-background);
+			background-color: var(--color-error-text);
+		}
+		[data-due-state="Now"] & {
+			color: var(--color-main-background);
+			background-color: var(--color-warning);
 		}
 
-		&.overdue {
-			color: var(--color-error-text);
-			padding: 3px 4px;
-		}
-		&.now {
-			color: var(--color-warning-text);
-			padding: 3px 4px;
-		}
-		&.next {
-			background-color: var(--color-background-dark);
-			padding: 3px 4px;
-		}
-
-		&::before,
 		span {
-			margin-left: 20px;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
 		}
+
+		.due--label {
+			margin-left: 4px;
+		}
 	}
 
 	@media print {