diff --git a/apps/systemtags/css/settings.css b/apps/systemtags/css/settings.css
new file mode 100644
index 00000000000..5313247227c
--- /dev/null
+++ b/apps/systemtags/css/settings.css
@@ -0,0 +1,17 @@
+.systemtag-input {
+	display: flex;
+	max-width: 500px;
+}
+#systemtags .select2-container {
+	width: 100%;
+	max-width: 500px;
+}
+#systemtag_name {
+	flex-grow: 1;
+}
+
+#systemtag_delete,
+#systemtag_reset,
+#systemtag_submit {
+	padding: 8px;
+}
\ No newline at end of file
diff --git a/apps/systemtags/js/admin.js b/apps/systemtags/js/admin.js
index 1388d5b2d7c..280616ea432 100644
--- a/apps/systemtags/js/admin.js
+++ b/apps/systemtags/js/admin.js
@@ -116,12 +116,16 @@
 			if (tagId > 0) {
 				$('#systemtags').attr('data-systemtag-id', tagId);
 				$('#systemtag_delete').removeClass('hidden');
-				$('#systemtag_submit').val(t('systemtags_manager', 'Update'));
+				$('#systemtag_submit span').text(t('systemtags_manager', 'Update'));
+				$('#systemtag_reset').removeClass('hidden');
+				$('#systemtag_create').addClass('hidden');
 			} else {
 				$('#systemtag').select2('val', '');
 				$('#systemtags').attr('data-systemtag-id', '');
 				$('#systemtag_delete').addClass('hidden');
-				$('#systemtag_submit').val(t('systemtags_manager', 'Create'));
+				$('#systemtag_reset').addClass('hidden');
+				$('#systemtag_submit span').text(t('systemtags_manager', 'Create'));
+				$('#systemtag_create').removeClass('hidden');
 			}
 		},
 
diff --git a/apps/systemtags/templates/admin.php b/apps/systemtags/templates/admin.php
index e964f610ca1..3d0b915c52c 100644
--- a/apps/systemtags/templates/admin.php
+++ b/apps/systemtags/templates/admin.php
@@ -27,32 +27,31 @@ script('core', [
 ]);
 
 script('systemtags', 'admin');
+style('systemtags', 'settings');
 
 /** @var \OCP\IL10N $l */
 ?>
 
 <form id="systemtags" class="section" data-systemtag-id="">
 	<h2><?php p($l->t('Collaborative tags')); ?></h2>
-	<p class="settings-hint"><?php p($l->t('Create and edit collaborative tags. These tags affect all users.')); ?></p>
+	<p class="settings-hint"><?php p($l->t('Collaborative tags are available for all users. Restricted tags are visible to users but cannot be assigned by them. Invisible tags are for internal use, since users cannot see or assign them.')); ?></p>
 
-	<input type="hidden" name="systemtag" id="systemtag" placeholder="<?php p($l->t('Select tag …')); ?>" style="width: 400px;" />
+	<input type="hidden" name="systemtag" id="systemtag" placeholder="<?php p($l->t('Select tag …')); ?>" />
 
-	<br><br>
+	<h3 id="systemtag_create"><?php p($l->t('Create a new tag')); ?></h3>
 
-	<input type="text" id="systemtag_name" name="systemtag_name" placeholder="<?php p($l->t('Name')); ?>" style="width: 200px;">
+	<div class="systemtag-input">
+		<input type="text" id="systemtag_name" name="systemtag_name" placeholder="<?php p($l->t('Name')); ?>">
 
-	<span id="systemtag_delete" class="hidden">
-		<img src="<?php p(\OCP\Template::image_path('core', 'actions/delete.svg')); ?>" alt="<?php p($l->t('Delete')); ?>">
-	</span>
+		<select id="systemtag_level">
+			<option value="3"><?php p($l->t('Public')); ?></option>
+			<option value="2"><?php p($l->t('Restricted')); ?></option>
+			<option value="0"><?php p($l->t('Invisible')); ?></option>
+		</select>
 
-	<br>
+		<a id="systemtag_delete" class="hidden icon-delete"><span class="hidden-visually"><?php p($l->t('Delete')); ?></span></a>
+		<a id="systemtag_reset" class="hidden icon-close"><span class="hidden-visually"><?php p($l->t('Reset')); ?></span></a>
+		<a id="systemtag_submit" class="icon-confirm"><span class="hidden-visually"><?php p($l->t('Create')); ?></span></a>
+	</div>
 
-	<select id="systemtag_level">
-		<option value="3"><?php p($l->t('Public')); ?></option>
-		<option value="2"><?php p($l->t('Restricted')); ?></option>
-		<option value="0"><?php p($l->t('Invisible')); ?></option>
-	</select>
-
-	<input type="button" id="systemtag_submit" value="<?php p($l->t('Create')); ?>">
-	<input type="button" id="systemtag_reset" value="<?php p($l->t('Reset')); ?>">
 </form>
diff --git a/apps/workflowengine/css/admin.css b/apps/workflowengine/css/admin.css
index 5494b35ce69..0c34ffc8097 100644
--- a/apps/workflowengine/css/admin.css
+++ b/apps/workflowengine/css/admin.css
@@ -11,6 +11,10 @@
 .workflowengine .operation button {
 	margin-bottom: 0;
 }
+.workflowengine .operation-name {
+	width: 100%;
+	max-width: 500px;
+}
 .workflowengine .operation span.info {
 	padding: 7px;
 	color: #eee;
@@ -34,10 +38,23 @@
 	background-color: #f8f8f8;
 }
 
+.workflowengine .operation-header .operation-name {
+	align-self: flex-start;
+	padding: 10px;
+}
+.workflowengine .operation-header {
+	display: flex;
+}
+.workflowengine .operation-header .select2-container {
+	align-self: flex-end;
+}
+.workflowengine .operation-header .icon-delete {
+	margin-left: auto;
+}
 .workflowengine .operation .button-delete,
 .workflowengine .operation .button-delete-check {
 	opacity: 0.5;
-	padding: 7px;
+	padding: 11px;
 }
 .workflowengine .operation .button-delete:hover,
 .workflowengine .operation .button-delete:focus,
diff --git a/apps/workflowengine/templates/admin.php b/apps/workflowengine/templates/admin.php
index e9873f8f289..26d581aee03 100644
--- a/apps/workflowengine/templates/admin.php
+++ b/apps/workflowengine/templates/admin.php
@@ -46,12 +46,14 @@
 
 	<script type="text/template" id="operation-template">
 		<div class="operation{{#if hasChanged}} modified{{/if}}">
-			<input type="text" class="operation-name" placeholder="<?php p($l->t('Short rule description')); ?>" value="{{operation.name}}">
-			{{! delete only makes sense if the operation is already saved }}
-			{{#if operation.id}}
-			<span class="button-delete pull-right icon-delete"></span>
-			{{/if}}
-			<input type="text" class="pull-right operation-operation" value="{{operation.operation}}">
+			<div class="operation-header">
+				<input type="text" class="operation-name" placeholder="<?php p($l->t('Short rule description')); ?>" value="{{operation.name}}" />
+				<input type="text" class="operation-operation" value="{{operation.operation}}" />
+				{{! delete only makes sense if the operation is already saved }}
+				{{#if operation.id}}
+				<span class="button-delete icon-delete"></span>
+				{{/if}}
+			</div>
 
 			<div class="checks">
 				{{#each operation.checks}}
@@ -67,7 +69,7 @@
 						{{/each}}
 					</select>
 					<input type="text" class="check-value" value="{{value}}">
-					<span class="button-delete-check pull-right icon-delete"></span>
+					<span class="button-delete-check icon-delete"></span>
 				</div>
 				{{/each}}
 			</div>