diff --git a/projects/editor/src/app/components/unit-view/page-view/paragraph-extension.ts b/projects/editor/src/app/components/unit-view/page-view/paragraph-extension.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50ac9584aaff177b494b0d0449616309d08354d0
--- /dev/null
+++ b/projects/editor/src/app/components/unit-view/page-view/paragraph-extension.ts
@@ -0,0 +1,54 @@
+import { Paragraph } from '@tiptap/extension-paragraph';
+import { Command } from '@tiptap/core';
+import { Transaction } from 'prosemirror-state';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    setMargin: { // TODO customParagraph: { ?
+      setMargin: (newMargin: number) => ReturnType;
+    };
+  }
+}
+
+export const customParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      margin: {
+        default: 10,
+        parseHTML: element => {
+          console.log('ggg', element.style.marginBottom);
+          return Number(element.style.marginBottom.slice(0, -2));
+        },
+        renderHTML: attributes => ({
+          style: `margin-bottom: ${attributes.margin}px; margin-top: 0`
+        })
+      }
+    };
+  },
+
+  addCommands() {
+    const setNodeIndentMarkup = (tr: Transaction, pos: number, newMargin: number): Transaction => {
+      const node = tr?.doc?.nodeAt(pos);
+      if (node) {
+        const nodeAttrs = { ...node.attrs, margin: newMargin };
+        return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks);
+      }
+      return tr;
+    };
+
+    const applyMargin: (newMargin: number) => () => Command =
+      newMargin => () => ({ tr, state, dispatch }) => {
+        const { selection } = state;
+        let transaction;
+        tr.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+          transaction = setNodeIndentMarkup(tr, pos, newMargin);
+        });
+        dispatch?.(transaction);
+        return true;
+      };
+
+    return {
+      setMargin: (newMargin: number) => applyMargin(newMargin)()
+    };
+  }
+});
diff --git a/projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.html b/projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.html
index 41f5025e62f5f7fb5c92775cd3444e647339ffed..6dc31b5142fbcfdd232c32c58f491c144a7ac9bc 100644
--- a/projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.html
@@ -182,8 +182,9 @@
     <mat-form-field>
       <mat-label>Absatzabstand</mat-label>
       <mat-select matTooltip="Achtung: Gilt nur fÞr zukÞnftig angelegte AbsÃĪtze" [matTooltipShowDelay]="300"
-                  [value]="'10'"
+                  [value]="editor.getAttributes('paragraph').margin?.toString() || '0'"
                   (click)="$any($event).stopPropagation()" (valueChange)="applyParagraphStyle($event)">
+        <mat-option value="0">0px</mat-option>
         <mat-option value="10">10px</mat-option>
         <mat-option value="20">20px</mat-option>
       </mat-select>
diff --git a/projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.ts b/projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.ts
index c3f48bae158a1ac2d75f87753418d85f48105d2d..80f33a8aba2b43917cdaa2356842df16c9180e74 100644
--- a/projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/rich-text-editor.component.ts
@@ -1,8 +1,8 @@
 import {
   Component, EventEmitter, Input, Output, ViewEncapsulation,
-  AfterViewInit, OnInit
+  AfterViewInit
 } from '@angular/core';
-import { ChainedCommands, Editor, Extension } from '@tiptap/core';
+import { Editor, Extension } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import { Underline } from '@tiptap/extension-underline';
 import { Superscript } from '@tiptap/extension-superscript';
@@ -13,6 +13,7 @@ import { Highlight } from '@tiptap/extension-highlight';
 import { TextAlign } from '@tiptap/extension-text-align';
 import { Heading } from '@tiptap/extension-heading';
 import { Indent } from './indent';
+import { customParagraph } from './paragraph-extension';
 import { fontSizeExtension } from './font-size-extension';
 
 @Component({
@@ -43,20 +44,13 @@ export class RichTextEditorComponent implements AfterViewInit {
       Heading.configure({
         levels: [1, 2, 3, 4]
       }),
+      customParagraph,
       fontSizeExtension
     ]
   });
 
   ngAfterViewInit(): void {
     this.editor.commands.focus();
-    (this.editor.extensionManager.extensions
-      .filter(ext => ext.name === 'paragraph')[0] as Extension).options.HTMLAttributes =
-      {
-        style: 'margin: 10px 0'
-      };
-    // Hack to apply style on first p-Element. All following paragraphs have this automatically
-    this.editor.commands.toggleNode('paragraph', 'heading');
-    this.editor.commands.toggleNode('heading', 'paragraph');
   }
 
   toggleBold(): void {
@@ -132,11 +126,7 @@ export class RichTextEditorComponent implements AfterViewInit {
   }
 
   applyParagraphStyle(margin: number): void {
-    (this.editor.extensionManager.extensions
-      .filter(ext => ext.name === 'paragraph')[0] as Extension).options.HTMLAttributes =
-      {
-        style: `margin: ${margin}px 0`
-      };
+    this.editor.commands.setMargin(margin);
   }
 
   insertSpecialChar(char: string): void {