diff --git a/css/prosemirror.scss b/css/prosemirror.scss
index d44e982fc3c..281a34e3d3a 100644
--- a/css/prosemirror.scss
+++ b/css/prosemirror.scss
@@ -88,6 +88,12 @@ div.ProseMirror {
 		margin-top: 10px;
 	}
 
+	> h1,h2,h3,h4,h5,h6 {
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
 	a {
 		color: var(--color-primary-element);
 		text-decoration: underline;
@@ -110,7 +116,7 @@ div.ProseMirror {
 	h5,
 	h6 {
 		font-weight: 600;
-		line-height: 1.1em;
+		line-height: 1em;
 		margin-top: 24px;
 		margin-bottom: 12px;
 		color: var(--color-main-text);
diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
index e659121f640..04a73c57c81 100644
--- a/src/components/Editor/EditorOutline.vue
+++ b/src/components/Editor/EditorOutline.vue
@@ -1,7 +1,6 @@
 <template>
 	<div data-text-el="editor-outline" class="editor--outline" :class="{ 'editor--outline-mobile': mobile }">
 		<header class="editor--outline__header">
-			<h2>{{ t('text', 'Outline') }}</h2>
 			<NcButton class="editor--outline__btn-close"
 				type="tertiary"
 				:aria-label="t('text', 'Close outline view')"
@@ -10,6 +9,7 @@
 					<Close />
 				</template>
 			</NcButton>
+			<h2>{{ t('text', 'Outline') }}</h2>
 		</header>
 		<TableOfContents />
 	</div>
@@ -78,7 +78,7 @@ export default {
 	&__header {
 		margin: 0;
 		position: sticky;
-		padding: 0.6em;
+		padding: 0.6em 0.6em 0.6em 0;
 		display: flex;
 		align-items: center;
 		h2 {