diff --git a/css/activity.css b/css/activity.css
index 843406f4c..a612ba125 100644
--- a/css/activity.css
+++ b/css/activity.css
@@ -8,6 +8,11 @@
 	text-decoration: none;
 }
 
+.activitymessage .visualdiff {
+	overflow: scroll;
+	max-height: 200px;
+}
+
 .activityTabView .avatardiv-container {
 	display: inline-block;
 	bottom: -3px;
diff --git a/css/comp-13.scss b/css/comp-13.scss
index ac8fe7e84..55468b053 100644
--- a/css/comp-13.scss
+++ b/css/comp-13.scss
@@ -16,7 +16,7 @@
 	width: 500px;
 	display:flex;
 	flex-direction: column;
-	z-index: 1500;
+	z-index: 1000;
 
 	&.details-visible {
 		right: 0;
diff --git a/css/icons.scss b/css/icons.scss
index 3c3afcffe..0b2aa0ff6 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -34,13 +34,11 @@
 }
 
 .icon-home {
-  background-image: url('../../../core/img/places/home.svg');
-  background-image: var(--icon-home-000);
+  background-image: var(--icon-home-000, url('../../../core/img/places/home.svg'));
 }
 
 .icon-description {
-  background-image: url('../img/description.svg');
-  background-image: var(--icon-text-000);
+  background-image: var(--icon-text-000, url('../img/description.svg'));
 }
 
 .icon-badge {
diff --git a/css/style.scss b/css/style.scss
index 9fc25765c..f27da724a 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -156,8 +156,7 @@ input.input-inline {
 	z-index: 999;
 	width: 100%;
 	height: 100%;
-	background-color: $color-main-background;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background, $color-main-background);
 }
 
 #board {
@@ -186,12 +185,10 @@ input.input-inline {
 	&.card-selected {
 
 		.card {
-			box-shadow: 0px 0px 7px 0px $color-grey;
-			box-shadow: 0px 0px 7px 0px var(--color-grey);
+			box-shadow: 0px 0px 7px 0px var(--color-background-darker, $color-grey);
 
 			&.current {
-				box-shadow: 0px 0px 7px 0px $color-darkgrey;
-				box-shadow: 0px 0px 7px 0px var(--color-darkgrey);
+				box-shadow: 0px 0px 7px 0px var(--color-text-lighter, $color-darkgrey);
 			}
 		}
 	}
@@ -224,10 +221,7 @@ input.input-inline {
 	}
 
 	> .as-sortable-drag {
-		background-color: $color-main-background;
-		background-color: var(--color-main-background);
-		box-shadow: 0 0 7px 0 $color-background-dark;
-		box-shadow: 0 0 7px 0 var(--color-background-dark);
+		background-color: var(--color-main-background $color-main-background);
 	}
 }
 
@@ -266,9 +260,17 @@ input.input-inline {
 	}
 
 	button {
-		height: inherit;
+		width: 36px;
+		height: 36px;
+		padding: 9px;
 	}
 
+	#stack-add form {
+		button {
+			height: auto;
+			width: 32px;
+		}
+	}
 	input[type='text'] {
 		padding: 6px;
 		border: 0 none transparent;
@@ -333,8 +335,7 @@ input.input-inline {
 }
 
 #stack-add {
-	background-color: $color-lightgrey;
-	background-color: var(--color-lightgrey);
+	background-color: var(--color-background-dark, $color-lightgrey);
 	border-radius: 3px;
 	margin: 3px;
 	display: flex;
@@ -380,8 +381,7 @@ input.input-inline {
 			margin: 0;
 			font-size: 12pt;
 			border: 0;
-			background-color: $color-main-background;
-			background-color: var(--color-main-background);
+			background-color: var(--color-main-background, $color-main-background);
 			min-height: initial;
 		}
 
@@ -427,13 +427,11 @@ input.input-inline {
 }
 
 .card {
-	background-color: $color-main-background;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background, $color-main-background);
 	margin: $board-item-margin;
 	white-space: normal;
 	position: relative;
-	box-shadow: 0 0 3px $color-darkgrey;
-	box-shadow: 0 0 3px --var(color-darkgrey);
+	box-shadow: 0 0 3px var(--color-background-darker, $color-darkgrey);
 	border-radius: 3px;
 	transition: margin 250ms linear;
 
@@ -462,8 +460,7 @@ input.input-inline {
 	}
 
 	.card-controls {
-		background: $color-lightgrey;
-		background: var(--color-background-dark);
+		background: var(--color-background-dark, $color-lightgrey);
 		display: flex;
 		position: relative;
 		padding-left: 10px;
@@ -497,8 +494,7 @@ input.input-inline {
 
 			&.overdue {
 				background-color: $color-error;
-				color: $color-primary-text;
-				color: var(--color-primary-text);
+				color: var(--color-primary-text, $color-primary-text);
 
 				.icon-badge {
 					background-image: url('../img/calendar-white.svg');
@@ -680,8 +676,7 @@ input.input-inline {
 
 	position: sticky;
 	top: 0;
-	background-color: $color-main-background;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background, $color-main-background);
 	z-index: 200;
 
 	h3 {
@@ -721,8 +716,7 @@ input.input-inline {
 	position: absolute;
 	width: 100%;
 	height: 100%;
-	background-color: $color-main-background;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background, $color-main-background);
 	z-index: 100;
 	opacity: 0.9;
 	text-align: center;
@@ -809,10 +803,8 @@ input.input-inline {
 			color: $color-primary-text;
 		}
 		&.unsaved {
-			background-color: $color-lightgrey;
-			background-color: var(--color-lightgrey);
-			color: $color-darkgrey;
-			color: var(--color-darkgrey);
+			background-color: var(--color-background-dark, $color-lightgrey);
+			color: var(--color-text-light, $color-darkgrey);
 		}
 	}
 
@@ -853,9 +845,9 @@ input.input-inline {
 		width: 100%;
 		height: 100%;
 		background-color: rgba($color-darkgrey, 0.5);
-		background-color: var(--color-background-dark);
 		left: 0;
 		top: 0;
+		z-index: 300;
 	}
 	.attachment-list {
 		&.selector {
@@ -868,12 +860,10 @@ input.input-inline {
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%, -50%);
-			background-color: $color-main-background;
-			background-color: var(--color-main-background);
+			background-color: var(--color-main-background, $color-main-background);
 			z-index: 2;
 			border-radius: 3px;
-			box-shadow: 0 0 3px $color-darkgrey;
-			box-shadow: 0 0 3px var(--color-darkgrey);
+			box-shadow: 0 0 3px var(--color-background-dark, $color-darkgrey);
 			overflow: scroll;
 		}
 		h3.attachment-selector {
@@ -967,8 +957,7 @@ input.input-inline {
 			}
 
 			.container {
-				background-color: $color-main-background;
-				background-color: var(--color-main-background);
+				background-color: var(--color-main-background, $color-main-background);
 
 			}
 		}
@@ -1349,7 +1338,6 @@ input.input-inline {
 	.icon {
 		display: inline-block;
 		background-size: contain;
-		margin: -3px;
 		margin-right: 5px;
 		opacity: 0.5;
 	}
@@ -1440,6 +1428,8 @@ input.input-inline {
  */
 #markdown {
 	width: 100% !important;
+	min-height: 40px;
+	cursor: text;
 
 	p {
 		margin-bottom: 15px;
@@ -1493,8 +1483,7 @@ input.input-inline {
 	}
 
 	pre {
-		background-color: $color-lightgrey;
-		background-color: var(--color-background-dark);
+		background-color: var(--color-background-dark, $color-lightgrey);
 		padding: 3px;
 		overflow: auto;
 
@@ -1531,6 +1520,19 @@ input.input-inline {
 	li input[type="checkbox"].checkbox:not(:checked) + label::before {
 			background-color: $color-main-background;
 	}
+
+	table {
+		margin-bottom: 10px;
+		border-collapse: collapse;
+		
+		thead {
+			background-color: var(--color-background-dark, $color-lightgrey);
+		}
+		td, th {
+			border: 1px solid var(--color-background-darker, $color-darkgrey);
+			padding: 3px;
+		}
+	}
 }
 
 .section-wrapper {
diff --git a/js/controller/ActivityController.js b/js/controller/ActivityController.js
index 0870170b4..cfb348cc5 100644
--- a/js/controller/ActivityController.js
+++ b/js/controller/ActivityController.js
@@ -20,7 +20,7 @@
  *
  */
 
-/* global OC OCA OCP t escapeHTML */
+/* global OC OCA OCP t escapeHTML Handlebars */
 
 import CommentCollection from '../legacy/commentcollection';
 import CommentModel from '../legacy/commentmodel';
@@ -64,6 +64,23 @@ class ActivityController {
 		this.activityservice.subscribe(this.$scope, function() {
 			self.$scope.$apply();
 		});
+
+		if (typeof OCA.Activity.Templates !== 'undefined') {
+			OCA.Activity.Templates.userLocal = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+				var helper;
+				// Compiled handlesbars template
+				// '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
+				return "<span class=\"avatar-name-wrapper\"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user=\""
+					+ container.escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"id","hash":{},"data":data}) : helper)))
+					+ "\" ng-attr-displayname=\""
+					+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
+					+ "\" ng-attr-size=\"16\"></avatar> "
+					+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
+					+ "</span>";
+			},"useData":true});
+		} else {
+			OCA.Activity.RichObjectStringParser._userLocalTemplate = '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
+		}
 	}
 
 	applyAtWho($target) {
@@ -263,23 +280,6 @@ class ActivityController {
 	}
 
 	parseMessage(subject, parameters) {
-		if (typeof OCA.Activity.Templates !== 'undefined') {
-			OCA.Activity.Templates.userLocal = {"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-				var helper;
-				// Compiled handlesbars template
-				// '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
-				return "<span class=\"avatar-name-wrapper\"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user=\""
-					+ container.escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"id","hash":{},"data":data}) : helper)))
-					+ "\" ng-attr-displayname=\""
-					+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
-					+ "\" ng-attr-size=\"16\"></avatar> "
-					+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
-					+ "</span>";
-			},"useData":true};
-		} else {
-			OCA.Activity.RichObjectStringParser._userLocalTemplate = '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
-		}
-
 		return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters);
 	}
 
diff --git a/js/controller/CardController.js b/js/controller/CardController.js
index b8cfa9b70..27f185487 100644
--- a/js/controller/CardController.js
+++ b/js/controller/CardController.js
@@ -117,7 +117,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 			return match;
 		});
 		CardService.update($scope.status.edit).then(function (data) {
-			var header = $('.section-header-tabbed .tabDetails');
+			var header = $('.tabDetails');
 			header.find('.save-indicator.unsaved').hide();
 			header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
 		});
@@ -147,7 +147,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 	};
 	$scope.cardEditDescriptionChanged = function ($event) {
 		$scope.status.lastEdit = Date.now();
-		var header = $('.section-header-tabbed .tabDetails');
+		var header = $('.tabDetails');
 		header.find('.save-indicator.unsaved').show();
 		header.find('.save-indicator.saved').hide();
 	};
@@ -157,10 +157,10 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 		if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave && !$scope.status.saving) {
 			$scope.status.lastSave = currentTime;
 			$scope.status.saving = true;
-			var header = $('.section-header-tabbed .tabDetails');
+			var header = $('.tabDetails');
 			header.find('.save-indicator.unsaved').fadeIn(500);
 			CardService.update($scope.status.edit).then(function (data) {
-				var header = $('.section-header-tabbed .tabDetails');
+				var header = $('.tabDetails');
 				header.find('.save-indicator.unsaved').hide();
 				header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
 				$scope.status.saving = false;
@@ -196,7 +196,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 		CardService.update(card).then(function (data) {
 			$scope.status.cardEditDescription = false;
 			$scope.updateMarkdown($scope.status.edit.description);
-			var header = $('.section-header-tabbed .tabDetails');
+			var header = $('.tabDetails');
 			header.find('.save-indicator.unsaved').hide();
 			header.find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
 		});
diff --git a/lib/Activity/DeckProvider.php b/lib/Activity/DeckProvider.php
index 844f1cb2d..887211ed8 100644
--- a/lib/Activity/DeckProvider.php
+++ b/lib/Activity/DeckProvider.php
@@ -276,7 +276,8 @@ private function parseParamForComment($subjectParams, $params, IEvent $event) {
 	private function parseParamForChanges($subjectParams, $params, $event) {
 		if (array_key_exists('diff', $subjectParams) && $subjectParams['diff']) {
 			$diff = new Diff();
-			$event->setMessage($subjectParams['after']);
+			// Don't add diff as message since we are limited to 255 chars here
+			//$event->setMessage($subjectParams['after']);
 			$event->setParsedMessage('<pre class="visualdiff">' . $diff->render($subjectParams['before'], $subjectParams['after']) . '</pre>');
 			return $params;
 		}
diff --git a/templates/main.php b/templates/main.php
index 288c518c6..87092f1a7 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -24,7 +24,9 @@
 use OCP\Util;
 
 Util::addScript('activity', 'richObjectStringParser');
-Util::addScript('activity', 'templates');
+if (\OC_Util::getVersion()[0] > 14) {
+	Util::addScript('activity', 'templates');
+}
 Util::addScript('activity', 'script');
 
 Util::addStyle('activity', 'style');
diff --git a/templates/part.card.php b/templates/part.card.php
index 183b2d469..fc91ecd78 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -51,8 +51,8 @@
 		</div>
 	</div>
 
-	<div class="section-wrapper card-details-assign-users" ng-click="toggleAssignUser()">
-		<div class="section-label icon-user" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Assign users')); ?>"><span class="hidden-visually"><?php p($l->t('Assign users')); ?></span></div>
+	<div class="section-wrapper card-details-assign-users">
+		<div class="section-label icon-user" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Assign users')); ?>" ng-click="toggleAssignUser()"><span class="hidden-visually"><?php p($l->t('Assign users')); ?></span></div>
 		<div class="section-details" ng-if="cardservice.getCurrent()">
 			<ui-select id="assignUserSelect" class="card-details-assign-user" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)"
 					   theme="select2"
@@ -69,7 +69,7 @@
 				<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers track by user.participant.uid">
 					<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" contactsmenudelete ></avatar>
 				</div>
-				<a class="icon-add icon-inline"></a>
+				<a class="icon-add icon-inline" ng-click="toggleAssignUser()"></a>
 			</div>
 		</div>
 	</div>
@@ -86,21 +86,27 @@
 
 	<div class="section-header-tabbed">
 		<ul class="tabHeaders ng-scope">
-			<li class="tabHeader" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><a><span class="icon icon-description"></span><?php p($l->t('Description')); ?></a></li>
-			<li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><a><span class="icon icon-files-dark"></span><?php p($l->t('Attachments')); ?></a></li>
-			<li class="tabHeader" ng-class="{'selected': (params.tab==2)}" ui-sref="{tab: 2}" ng-if="isTimelineEnabled()"><a><span class="icon icon-activity"></span><?php p($l->t('Timeline')); ?></a></li>
+			<li class="tabHeader" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><span class="icon icon-description"></span><a><?php p($l->t('Description')); ?></a></li>
+			<li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><span class="icon icon-files-dark"></span><a><?php p($l->t('Attachments')); ?></a></li>
+			<li class="tabHeader" ng-class="{'selected': (params.tab==2)}" ui-sref="{tab: 2}" ng-if="isTimelineEnabled()"><span class="icon icon-activity"></span><a><?php p($l->t('Timeline')); ?></a></li>
 		</ul>
-		<div class="tabDetails">
-			<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
-			<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
-			<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
-			<label ng-if="params.tab === 1" for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>"></label>
-			<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
-			<input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/>
+	</div>
+	<div class="tabDetails" style="display: flex;">
+		<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
+		<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
+		<div style="flex-grow: 1;"> </div>
+		<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
+		<input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/>
 
-		</div>
 	</div>
 	<div class="section-content card-attachments">
+		<div>
+			<label ng-if="params.tab === 1" for="attachment-upload" class="button data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>">
+			<span class="icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}"></span>
+			<?php p($l->t('Upload attachment')); ?>
+			</label>
+			<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
+		</div>
 		<div class="error icon-error" ng-if="fileservice.status"><strong>{{ fileservice.status.error }}</strong><br />{{ fileservice.status.message }}</div>
 		<attachment-list-component ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)" attachments="cardservice.getCurrent().attachments"></attachment-list-component>
 	</div>