diff --git a/css/style.scss b/css/style.scss
index eb4961204..ef5dcf09a 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -733,25 +733,33 @@ input.input-inline {
 		}
 	}
 
-	#card-description {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-
-		> div {
+	.card-description {
+		&.section-header {
+			.save-indicator {
+				margin-bottom: 5px;
+				margin-top: 5px;
+			}
+		}
+		&.section-content {
 			height: 100%;
-		}
+			display: flex;
+			flex-direction: column;
 
-		textarea {
-			width: 100%;
-			height: 200px;
-			border: none;
-			margin: 0;
-			padding: 0;
-		}
+			> div {
+				height: 100%;
+			}
 
-		.container {
-			background-color: $color-main-background;
+			textarea {
+				width: 100%;
+				height: 200px;
+				border: none;
+				margin: 0;
+				padding: 0;
+			}
+
+			.container {
+				background-color: $color-main-background;
+			}
 		}
 	}
 }
diff --git a/js/controller/CardController.js b/js/controller/CardController.js
index b3baa82bf..5c1c87e79 100644
--- a/js/controller/CardController.js
+++ b/js/controller/CardController.js
@@ -62,24 +62,25 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 	};
 	$scope.cardEditDescriptionChanged = function ($event) {
 		$scope.status.lastEdit = Date.now();
-		$('#card-description').find('.save-indicator.unsaved').show();
-		$('#card-description').find('.save-indicator.saved').hide();
+		var header = $('.section-header.card-description');
+		header.find('.save-indicator.unsaved').show();
+		header.find('.save-indicator.saved').hide();
 	};
-
-	$scope.cardEditDescriptionAutosave = function() {
-		var currentTime = Date.now();
-		var timeSinceEdit = currentTime-$scope.status.lastEdit;
-		if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave) {
-			$scope.status.lastSave = currentTime;
-			$('#card-description').find('.save-indicator.unsaved').fadeIn(500);
-			CardService.update(CardService.getCurrent()).then(function (data) {
-				$('#card-description').find('.save-indicator.unsaved').hide();
-				$('#card-description').find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
-			});
-		}
-	};
-
-	$interval( function(){ $scope.cardEditDescriptionAutosave(); }, 500);
+	$interval(function() {
+		$scope.cardEditDescriptionAutosave = function() {
+			var currentTime = Date.now();
+			var timeSinceEdit = currentTime-$scope.status.lastEdit;
+			if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave) {
+				$scope.status.lastSave = currentTime;
+				var header = $('.section-content.card-description');
+				header.find('.save-indicator.unsaved').fadeIn(500);
+				CardService.update(CardService.getCurrent()).then(function (data) {
+					header.find('.save-indicator.unsaved').hide();
+					header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
+				});
+			}
+		};
+	}, 500);
 
 	// handle rename to update information on the board as well
 	$scope.cardRename = function (card) {
@@ -91,8 +92,9 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 	$scope.cardUpdate = function (card) {
 		CardService.update(CardService.getCurrent()).then(function (data) {
 			$scope.status.cardEditDescription = false;
-			$('#card-description').find('.save-indicator.unsaved').hide();
-			$('#card-description').find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
+			var header = $('.section-content.card-description');
+			header.find('.save-indicator.unsaved').hide();
+			header.find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
 		});
 		StackService.updateCard(card);
 	};
diff --git a/templates/part.card.php b/templates/part.card.php
index c179a0439..8d53fd18d 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -84,17 +84,17 @@
 		<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"><span class="hidden-visually"><?php p($l->t('Remove due date')); ?></span></button>
 	</div>
 
-	<div class="section-header">
+	<div class="section-header card-description">
 		<h4>
 			<div>
 				<?php p($l->t('Description')); ?>
 				<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
 			</div>
-			<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
-			<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
 		</h4>
+		<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
+		<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
 	</div>
-	<div id="card-description">
+	<div class="section-content card-description">
 		<textarea elastic ng-if="status.cardEditDescription"
 				  placeholder="<?php p($l->t('Add a card description…')); ?>"
 				  ng-blur="cardUpdate(cardservice.getCurrent())"