diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
index 384c3a9f8..8aad2ab05 100644
--- a/src/styles/theme/_index.scss
+++ b/src/styles/theme/_index.scss
@@ -10,4 +10,5 @@
 @import "flatpickr";
 @import 'helpers';
 @import 'navigation';
-@import 'button';
\ No newline at end of file
+@import 'button';
+@import 'cards';
\ No newline at end of file
diff --git a/src/styles/theme/cards.scss b/src/styles/theme/cards.scss
new file mode 100644
index 000000000..7c08fe772
--- /dev/null
+++ b/src/styles/theme/cards.scss
@@ -0,0 +1,8 @@
+.section-card {
+	background: var(--card-background-color);
+	border-radius: var(--card-radius);
+	box-shadow: var(--card-shadow);
+	color: var(--card-color);
+	padding: 20px;
+	margin: 0 0 20px 0;
+}
\ No newline at end of file
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 71d35b3ee..ac755b7a1 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -3,7 +3,7 @@
 		<h3 class="mb-2 title">
 			{{ pageTitle }}
 		</h3>
-		<p v-if="!showAll" class="show-tasks-options">
+		<p v-if="!showAll" class="show-tasks-options section-card">
 			<datepicker-with-range @update:model-value="setDate">
 				<template #trigger="{toggle}">
 					<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 2fe632faa..7d4316287 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -8,7 +8,7 @@
 	>
 		<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
 		<div class="task-view" v-if="visible">
-			<div class="card">
+			<div class="section-card">
 				<Heading
 					:task="task"
 					@update:task="Object.assign(task, $event)"
@@ -30,7 +30,7 @@
 			<div class="columns mt-2">
 				<!-- Content -->
 				<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
-					<div class="columns details card">
+					<div class="columns details section-card">
 						<div class="column assignees" v-if="activeFields.assignees">
 							<!-- Assignees -->
 							<div class="detail-title">
@@ -210,7 +210,7 @@
 					</div>
 
 					<!-- Labels -->
-					<div class="labels-list details card" v-if="activeFields.labels">
+					<div class="labels-list details section-card" v-if="activeFields.labels">
 						<div class="detail-title">
 							<span class="icon is-grey">
 								<icon icon="tags"/>
@@ -225,7 +225,7 @@
 					</div>
 
 					<!-- Description -->
-					<div class="details content description card">
+					<div class="details content description section-card">
 						<description
 							:model-value="task"
 							@update:modelValue="Object.assign(task, $event)"
@@ -235,7 +235,7 @@
 					</div>
 
 					<!-- Attachments -->
-					<div class="content attachments card" v-if="activeFields.attachments || hasAttachments">
+					<div class="content attachments section-card" v-if="activeFields.attachments || hasAttachments">
 						<attachments
 							:edit-enabled="canWrite"
 							:task="task"
@@ -245,7 +245,7 @@
 					</div>
 
 					<!-- Related Tasks -->
-					<div class="content details card" v-if="activeFields.relatedTasks">
+					<div class="content details section-card" v-if="activeFields.relatedTasks">
 						<h3>
 							<span class="icon is-grey">
 								<icon icon="sitemap"/>
@@ -263,7 +263,7 @@
 					</div>
 
 					<!-- Move Task -->
-					<div class="content details card" v-if="activeFields.moveProject">
+					<div class="content details section-card" v-if="activeFields.moveProject">
 						<h3>
 							<span class="icon is-grey">
 								<icon icon="list"/>
@@ -281,7 +281,7 @@
 					</div>
 
 					<!-- Comments -->
-					<div class="card">
+					<div class="section-card">
 						<comments :can-write="canWrite" :task-id="taskId"/>
 					</div>
 				</div>