diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
index 5ce534bbd..384c3a9f8 100644
--- a/src/styles/theme/_index.scss
+++ b/src/styles/theme/_index.scss
@@ -9,4 +9,5 @@
 @import "loading";
 @import "flatpickr";
 @import 'helpers';
-@import 'navigation';
\ No newline at end of file
+@import 'navigation';
+@import 'button';
\ No newline at end of file
diff --git a/src/styles/theme/button.scss b/src/styles/theme/button.scss
new file mode 100644
index 000000000..7c8f27af6
--- /dev/null
+++ b/src/styles/theme/button.scss
@@ -0,0 +1,3 @@
+.button.border {
+	border: 1px solid;
+}
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 1e6b0d2e5..2fe632faa 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -8,28 +8,29 @@
 	>
 		<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
 		<div class="task-view" v-if="visible">
-			<Heading
-				:task="task"
-				@update:task="Object.assign(task, $event)"
-				:can-write="canWrite"
-				ref="heading"
-			/>
-			<h6 class="subtitle" v-if="project?.id">
-				<template v-for="p in projectStore.getAncestors(project)" :key="p.id">
-					<router-link :to="{ name: 'project.index', params: { projectId: p.id } }">
-						{{ getProjectTitle(p) }}
-					</router-link>
-					<span class="has-text-grey-light" v-if="p.id !== project?.id"> &gt; </span>
-				</template>
-			</h6>
-
+			<div class="card">
+				<Heading
+					:task="task"
+					@update:task="Object.assign(task, $event)"
+					:can-write="canWrite"
+					ref="heading"
+				/>
+				<h6 class="subtitle" v-if="project?.id">
+					<template v-for="p in projectStore.getAncestors(project)" :key="p.id">
+						<router-link :to="{ name: 'project.index', params: { projectId: p.id } }">
+							{{ getProjectTitle(p) }}
+						</router-link>
+						<span class="has-text-grey-light" v-if="p.id !== project?.id"> &gt; </span>
+					</template>
+				</h6>
+			</div>
 			<checklist-summary :task="task"/>
 
 			<!-- Content and buttons -->
 			<div class="columns mt-2">
 				<!-- Content -->
 				<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
-					<div class="columns details">
+					<div class="columns details card">
 						<div class="column assignees" v-if="activeFields.assignees">
 							<!-- Assignees -->
 							<div class="detail-title">
@@ -209,7 +210,7 @@
 					</div>
 
 					<!-- Labels -->
-					<div class="labels-list details" v-if="activeFields.labels">
+					<div class="labels-list details card" v-if="activeFields.labels">
 						<div class="detail-title">
 							<span class="icon is-grey">
 								<icon icon="tags"/>
@@ -224,7 +225,7 @@
 					</div>
 
 					<!-- Description -->
-					<div class="details content description">
+					<div class="details content description card">
 						<description
 							:model-value="task"
 							@update:modelValue="Object.assign(task, $event)"
@@ -234,7 +235,7 @@
 					</div>
 
 					<!-- Attachments -->
-					<div class="content attachments" v-if="activeFields.attachments || hasAttachments">
+					<div class="content attachments card" v-if="activeFields.attachments || hasAttachments">
 						<attachments
 							:edit-enabled="canWrite"
 							:task="task"
@@ -244,7 +245,7 @@
 					</div>
 
 					<!-- Related Tasks -->
-					<div class="content details mb-0" v-if="activeFields.relatedTasks">
+					<div class="content details card" v-if="activeFields.relatedTasks">
 						<h3>
 							<span class="icon is-grey">
 								<icon icon="sitemap"/>
@@ -262,7 +263,7 @@
 					</div>
 
 					<!-- Move Task -->
-					<div class="content details" v-if="activeFields.moveProject">
+					<div class="content details card" v-if="activeFields.moveProject">
 						<h3>
 							<span class="icon is-grey">
 								<icon icon="list"/>
@@ -280,7 +281,9 @@
 					</div>
 
 					<!-- Comments -->
-					<comments :can-write="canWrite" :task-id="taskId"/>
+					<div class="card">
+						<comments :can-write="canWrite" :task-id="taskId"/>
+					</div>
 				</div>
 				
 				<!-- Task Actions -->
@@ -290,7 +293,7 @@
 							:class="{'is-success': !task.done}"
 							:shadow="task.done"
 							@click="toggleTaskDone()"
-							class="is-outlined has-no-border"
+							class="is-outlined border"
 							icon="check-double"
 							variant="secondary"
 							v-shortcut="'t'"
@@ -428,7 +431,7 @@
 							@click="showDeleteModal = true"
 							icon="trash-alt"
 							:shadow="false"
-							class="is-danger is-outlined has-no-border"
+							class="is-danger is-outlined border"
 							v-shortcut="'Shift+Delete'"
 						>
 							{{ $t('task.detail.actions.delete') }}
@@ -858,6 +861,10 @@ function setRelatedTasksActive() {
 	opacity: 0;
 }
 
+.card {
+	padding: 15px;
+	margin: 0 0 20px 0;
+}
 
 .subtitle {
 	color: var(--grey-500);
@@ -914,7 +921,6 @@ h3 .button {
 .details {
 	padding-bottom: 0.75rem;
 	flex-flow: row wrap;
-	margin-bottom: 0;
 
 	.detail-title {
 		display: block;
@@ -986,7 +992,6 @@ h3 .button {
 }
 
 .attachments {
-	margin-bottom: 0;
 
 	table tr:last-child td {
 		border-bottom: none;