diff --git a/package-lock.json b/package-lock.json
index 3d9f89a..445d541 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,14 +11,17 @@
         "@iconoir/vue": "^7.7.0",
         "@tiptap/extension-bold": "^2.4.0",
         "@tiptap/extension-bullet-list": "^2.4.0",
+        "@tiptap/extension-color": "^2.4.0",
         "@tiptap/extension-heading": "^2.4.0",
         "@tiptap/extension-italic": "^2.4.0",
+        "@tiptap/extension-link": "^2.4.0",
         "@tiptap/extension-ordered-list": "^2.4.0",
         "@tiptap/extension-strike": "^2.4.0",
         "@tiptap/extension-table": "^2.4.0",
         "@tiptap/extension-table-cell": "^2.4.0",
         "@tiptap/extension-table-header": "^2.4.0",
         "@tiptap/extension-table-row": "^2.4.0",
+        "@tiptap/extension-text-style": "^2.4.0",
         "@tiptap/extension-underline": "^2.4.0",
         "@tiptap/starter-kit": "^2.4.0",
         "@tiptap/vue-3": "^2.4.0",
@@ -2451,6 +2454,19 @@
         "@tiptap/pm": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-color": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-color/-/extension-color-2.4.0.tgz",
+      "integrity": "sha512-aVuqGtzTIZO93niADdu+Hx8g03X0pS7wjrJcCcYkkDEbC/siC03zlxKZIYBW1Jiabe99Z7/s2KdtLoK6DW2A2g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/extension-text-style": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/extension-document": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.4.0.tgz",
@@ -2567,6 +2583,22 @@
         "@tiptap/core": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-link": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.4.0.tgz",
+      "integrity": "sha512-r3PjT0bjSKAorHAEBPA0icSMOlqALbxVlWU9vAc+Q3ndzt7ht0CTPNewzFF9kjzARABVt1cblXP/2+c0qGzcsg==",
+      "dependencies": {
+        "linkifyjs": "^4.1.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/extension-list-item": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.4.0.tgz",
@@ -2676,6 +2708,18 @@
         "@tiptap/core": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.4.0.tgz",
+      "integrity": "sha512-H0uPWeZ4sXz3o836TDWnpd38qClqzEM2d6QJ9TK+cQ1vE5Gp8wQ5W4fwUV1KAHzpJKE/15+BXBjLyVYQdmXDaQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/extension-underline": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.4.0.tgz",
@@ -8856,6 +8900,11 @@
         "uc.micro": "^2.0.0"
       }
     },
+    "node_modules/linkifyjs": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz",
+      "integrity": "sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg=="
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
diff --git a/package.json b/package.json
index ad95d02..1407370 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,17 @@
     "@iconoir/vue": "^7.7.0",
     "@tiptap/extension-bold": "^2.4.0",
     "@tiptap/extension-bullet-list": "^2.4.0",
+    "@tiptap/extension-color": "^2.4.0",
     "@tiptap/extension-heading": "^2.4.0",
     "@tiptap/extension-italic": "^2.4.0",
+    "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-ordered-list": "^2.4.0",
     "@tiptap/extension-strike": "^2.4.0",
     "@tiptap/extension-table": "^2.4.0",
     "@tiptap/extension-table-cell": "^2.4.0",
     "@tiptap/extension-table-header": "^2.4.0",
     "@tiptap/extension-table-row": "^2.4.0",
+    "@tiptap/extension-text-style": "^2.4.0",
     "@tiptap/extension-underline": "^2.4.0",
     "@tiptap/starter-kit": "^2.4.0",
     "@tiptap/vue-3": "^2.4.0",
diff --git a/src/components/AddLinkDialog.vue b/src/components/AddLinkDialog.vue
new file mode 100644
index 0000000..4592c31
--- /dev/null
+++ b/src/components/AddLinkDialog.vue
@@ -0,0 +1,90 @@
+<template>
+    <div v-if="showDialog" class="modal">
+        <div class="modal-content">
+            <span class="close" @click="closeDialog">&times;</span>
+            <h2>Link hinzufügen</h2>
+            <table>
+                <tr>
+                    <td>
+                        <label for="link-url">URL:</label>
+                    </td>
+                    <td>
+                        <input id="link-url" v-model="url" type="text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="link-text">Linktext:</label>
+                    </td>
+                    <td>
+                        <input id="link-text" v-model="text" type="text" />
+                    </td>
+                </tr>
+            </table>
+            <button @click="confirm">Hinzufügen</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AddLinkDialog',
+    data() {
+        return {
+            showDialog: false,
+            url: '',
+            text: '',
+        };
+    },
+    methods: {
+        openAddLinkDialog() {
+            this.showDialog = true;
+        },
+        closeDialog() {
+            this.showDialog = false;
+            this.url = '';
+            this.text = '';
+        },
+        confirm() {
+            this.$emit('confirm', this.url, this.text);
+            this.closeDialog();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.modal {
+    display: flex;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/content/HomeContent.vue b/src/content/HomeContent.vue
index 8c465d1..6294358 100644
--- a/src/content/HomeContent.vue
+++ b/src/content/HomeContent.vue
@@ -1,46 +1,24 @@
 <template>
-  <div class="left-column">
-    <h2>Aktuelles</h2>
-    <p><a href="https://miriamgemeinde.de/wp-content/uploads/2024/04/GB.INT_.pdf"><strong>Hier finden Sie den aktuellen Gemeindebrief</strong></a></p>
-    <h3>Sommerfest</h3>
-    <p>Am Sonntag, den 09.06.2024 findet das ökumenische Sommerfest in Bonames statt.</p>
-    <h4>10:30 Uhr Musikalischer Gottestdienst</h4>
-    <p>mit der Kantorei St. Bonifatius, der Miriamkantorei und dem Gospelchor „Chariots“ in der Katholischen Pfarrkirche St. Bonifatius, Oberer Kalbacher Weg 9</p>
-    <h4>Ab 12:00 Uhr Gemeinsames Fest</h4>
-    <p>am Evangelischen Gemeindezentrum Bonames, Kirchhofsweg 11<br>Begegnungen, Gespräche und Angebote für Kinder<br>Gegrilltes und Getränke, Kaffee und Kuchen<br>Bis 16:00 Uhr</p>
-    <h3>Ökumenisches Friedensgebet</h3>
-    <p>Jeden letzten Freitag im Monat um 18:00 Uhr<br>Evangelische Friedenskirche in Harheim</p>
-    <hr>
-    <h3>Miriamgemeinde auf <a href="https://www.youtube.com/channel/UCFWJZuXPKuTef9-NIo-vdPg">Youtube</a></h3>
-    <p>Gottesdienst-Aufzeichnungen von unseren Gottesdienstorten.</p>
-    <p>Bei Präsenzgottesdiensten finden Sie die Aufzeichnung erst am Sonntagnachmittag!</p>
-    <hr>
-    <h3>Youtube-Kanäle unserer Kindertagesstätten</h3>
-    <p><a href="https://www.youtube.com/channel/UCwDe0xnydn9xV-4MHjGhjWQ">KiTa Krambambuli</a></p>
-    <p><a href="https://www.youtube.com/channel/UC_Sj_yC__i91czlJUW4ylcg">KiTa Sternenzelt</a></p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
-    <p>lorem ipsum...</p>
+  <div class="some-page">
+    <ContentComponent :link="currentLink" />
   </div>
 </template>
 
 <script>
+import ContentComponent from '@/components/ContentComponent.vue';
+
 export default {
-  name: 'HomeContent'
+  name: 'SomePage',
+  components: {
+    ContentComponent,
+  },
+  computed: {
+    currentLink() {
+      return this.$route.path;
+    },
+  },
 };
 </script>
 
+<style scoped>
+</style>
diff --git a/src/content/admin/EditPagesComponent.vue b/src/content/admin/EditPagesComponent.vue
index 27beef4..1f73938 100644
--- a/src/content/admin/EditPagesComponent.vue
+++ b/src/content/admin/EditPagesComponent.vue
@@ -8,61 +8,66 @@
       </select>
     </div>
     <div class="toolbar">
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
-      <button @click="editor.chain().focus().toggleBold().run()" width="24" height="24">
+      <button @click="editor.value.chain().focus().toggleHeading({ level: 1 }).run()">H1</button>
+      <button @click="editor.value.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
+      <button @click="editor.value.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
+      <button @click="editor.value.chain().focus().toggleBold().run()" width="24" height="24">
         <BoldIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleItalic().run()">
+      <button @click="editor.value.chain().focus().toggleItalic().run()">
         <ItalicIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleUnderline().run()">
+      <button @click="editor.value.chain().focus().toggleUnderline().run()">
         <UnderlineIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleStrike().run()">
+      <button @click="editor.value.chain().focus().toggleStrike().run()">
         <StrikethroughIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
+      <button @click="editor.value.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
         <TableIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()">
+      <button @click="editor.value.chain().focus().toggleBulletList().run()">
         <ListIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleOrderedList().run()">
+      <button @click="editor.value.chain().focus().toggleOrderedList().run()">
         <NumberedListLeftIcon width="24" height="24" />
       </button>
       <button @click="openAddImageDialog">
         <StatsReportIcon width="24" height="24" />
       </button>
+      <button @click="openAddLinkDialog">
+        <OpenInWindowIcon width="24" height="24" />
+      </button>
+      <button @click="openColorPicker">Schriftfarbe</button>
+      <input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
     </div>
     <div class="table-toolbar">
-      <button @click="editor.chain().focus().addColumnBefore().run()">
+      <button @click="editor.value.chain().focus().addColumnBefore().run()">
         <ArrowDownIcon width="10" height="10" class="align-top" />
         <Table2ColumnsIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().addColumnAfter().run()">
+      <button @click="editor.value.chain().focus().addColumnAfter().run()">
         <Table2ColumnsIcon width="24" height="24" />
         <ArrowDownIcon width="10" height="10" class="align-top" />
       </button>
-      <button @click="editor.chain().focus().addRowBefore().run()">
+      <button @click="editor.value.chain().focus().addRowBefore().run()">
         <ArrowRightIcon width="10" height="10" class="align-top" />
         <TableRowsIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().addRowAfter().run()">
+      <button @click="editor.value.chain().focus().addRowAfter().run()">
         <ArrowRightIcon width="10" height="10" />
         <TableRowsIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().deleteColumn().run()">
+      <button @click="editor.value.chain().focus().deleteColumn().run()">
         <Table2ColumnsIcon width="24" height="24" class="delete-icon" />
       </button>
-      <button @click="editor.chain().focus().deleteRow().run()">
+      <button @click="editor.value.chain().focus().deleteRow().run()">
         <TableRowsIcon width="24" height="24" class="delete-icon" />
       </button>
-      <button @click="editor.chain().focus().toggleHeaderColumn().run()">
+      <button @click="editor.value.chain().focus().toggleHeaderColumn().run()">
         <AlignTopBoxIcon width="24" height="24" />
       </button>
-      <button @click="editor.chain().focus().toggleHeaderRow().run()">
+      <button @click="editor.value.chain().focus().toggleHeaderRow().run()">
         <AlignLeftBoxIcon width="24" height="24" />
       </button>
     </div>
@@ -80,6 +85,8 @@
     <WorshipDialog ref="worshipDialog" @confirm="insertWorshipList" />
     <AddImageDialog ref="addImageDialog" @confirm="insertImage" />
     <AddEventDialog ref="addEventDialog" @confirm="insertEvent" />
+    <AddLinkDialog ref="addLinkDialog" @confirm="insertLink" />
+    <input type="color" ref="colorPicker" @input="setColor" style="display: none;" />
   </div>
 </template>
 
@@ -98,10 +105,14 @@ import Strike from '@tiptap/extension-strike';
 import BulletList from '@tiptap/extension-bullet-list';
 import OrderedList from '@tiptap/extension-ordered-list';
 import Heading from '@tiptap/extension-heading';
+import Link from '@tiptap/extension-link';
+import TextStyle from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
 import { CustomTableCell, CustomTableHeader } from '../../extensions/CustomTableCell';
 import WorshipDialog from '@/components/WorshipDialog.vue';
 import AddImageDialog from '@/components/AddImageDialog.vue';
 import AddEventDialog from '@/components/AddEventDialog.vue';
+import AddLinkDialog from '@/components/AddLinkDialog.vue';
 
 import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListIcon, NumberedListLeftIcon, TableIcon,
   Table2ColumnsIcon, ArrowDownIcon, ArrowRightIcon, TableRowsIcon, AlignTopBoxIcon, AlignLeftBoxIcon, StatsReportIcon
@@ -128,6 +139,7 @@ export default {
     AlignLeftBoxIcon,
     StatsReportIcon,
     AddEventDialog,
+    AddLinkDialog,
   },
   setup() {
     const store = useStore();
@@ -137,6 +149,8 @@ export default {
     const worshipDialog = ref(null);
     const addImageDialog = ref(null);
     const addEventDialog = ref(null);
+    const addLinkDialog = ref(null);
+    const colorPicker = ref(null);
 
     const editor = useEditor({
       extensions: [
@@ -156,6 +170,11 @@ export default {
         Heading.configure({
           levels: [1, 2, 3],
         }),
+        Link.configure({
+          openOnClick: false,
+        }),
+        TextStyle,
+        Color,
       ],
       content: '',
       onUpdate: ({ editor }) => {
@@ -268,6 +287,27 @@ export default {
       }
     };
 
+    const openAddLinkDialog = () => {
+      addLinkDialog.value.openAddLinkDialog();
+    };
+
+    const insertLink = ({ url, text }) => {
+      if (url && text && editor.value) {
+        editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).insertContent(text).run();
+      }
+    };
+
+    const openColorPicker = () => {
+      colorPicker.value.click();
+    };
+
+    const setColor = (event) => {
+      const color = event.target.value;
+      if (editor.value) {
+        editor.value.chain().focus().setColor(color).run();
+      }
+    };
+
     return {
       pages,
       sortedPages,
@@ -285,6 +325,12 @@ export default {
       addEventDialog,
       openAddEventsDialog: openAddEventDialog,
       insertEvent,
+      addLinkDialog,
+      openAddLinkDialog,
+      insertLink,
+      colorPicker,
+      openColorPicker,
+      setColor,
     };
   },
 };
@@ -346,9 +392,11 @@ export default {
   width: 24px;
   height: 24px;
 }
+
 .delete-icon {
   fill: #ff0000;
 }
+
 .align-top {
   vertical-align: top;
 }
diff --git a/src/icons.js b/src/icons.js
index f792bd0..90413cb 100644
--- a/src/icons.js
+++ b/src/icons.js
@@ -1,6 +1,6 @@
 // src/icons.js
 import { Bold, Italic, Underline, Strikethrough, List, NumberedListLeft, Table, Table2Columns, ArrowRight, ArrowDown, TableRows,
-    AlignTopBox, AlignLeftBox, StatsReport
+    AlignTopBox, AlignLeftBox, StatsReport, OpenInWindow
  } from '@iconoir/vue';
 
 export {
@@ -17,5 +17,6 @@ export {
     TableRows as TableRowsIcon,
     AlignTopBox as AlignTopBoxIcon,
     AlignLeftBox as AlignLeftBoxIcon,
-    StatsReport as StatsReportIcon
+    StatsReport as StatsReportIcon,
+    OpenInWindow as OpenInWindowIcon,
 };