diff --git a/web/templates/editor.html b/web/templates/editor.html
index 91944bb..d584e97 100644
--- a/web/templates/editor.html
+++ b/web/templates/editor.html
@@ -26,7 +26,7 @@
 
     <div class="flex flex-col gap-1">
         <h3>Artikel</h3>
-        <textarea id="easyMDE">{{.Content}}</textarea>
+        <div id="editor"></div>
         <input id="article-content" name="article-content" type="hidden" value="{{.Content}}" />
     </div>
 
@@ -88,34 +88,37 @@
 </form>
 
 <script>
-    var easyMDE = new EasyMDE({
-        element: document.getElementById('easyMDE'),
-        hideIcons: ['image'],
-        imageTexts: {sbInit: ''},
-        showIcons: ["code", "table", "upload-image"],
-        uploadImage: true,
+    var editor = new toastui.Editor({
+        el: document.querySelector('#editor'),
+        height: '500px',
+        hooks: {
+            addImageBlobHook: (blob, callback) => {
+                const formData = new FormData();
+                formData.append('article-image', blob);
 
-        imageUploadFunction: function (file, onSuccess, onError) {
-            var formData = new FormData();
-            formData.append('article-image', file);
-
-            fetch('/article/upload-image', {
-                method: 'POST',
-                body: formData
-            })
-                .then(response => response.json())
-                .then(data => {
-                    onSuccess(data);
+                fetch('/article/upload-image', {
+                    method: 'POST',
+                    body: formData
                 })
-                .catch(error => {
-                    htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}});
-                    onError(error);
-                });
+                    .then(response => response.json())
+                    .then(data => {
+                        callback(data, 'Alternativtext');
+                    })
+                    .catch(error => {
+                        htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}});
+                        console.error('Upload fehlgeschlagen:', error);
+                    });
+            }
         },
+        initialEditType: 'wysiwyg',
+        initialValue: '{{.Content}}',
+        language: 'de',
+        theme: localStorage.theme,
+        usageStatistics: 'false'
     });
 
-    easyMDE.codemirror.on("change", () => {
-        document.getElementById('article-content').value = easyMDE.value();
+    editor.on('change', () => {
+        document.getElementById('article-content').value = editor.getMarkdown();
     });
 </script>
 {{end}}
diff --git a/web/templates/index.html b/web/templates/index.html
index 6ddf7f1..38925ed 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -7,7 +7,7 @@
     <title>Orient Editor</title>
 
     <link href="/web/static/css/style.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
+    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
 </head>
 
 <body
@@ -43,7 +43,9 @@
     </footer>
 
     <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-    <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
+    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
+    <script src="https://uicdn.toast.com/editor/latest/i18n/de-de.js"></script>
+
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const toggleSwitch = document.getElementById('theme-toggle');
@@ -70,6 +72,7 @@
             });
         });
     </script>
+
     <script>
         htmx.on('htmx:responseError', function (event) {
             var notification = document.getElementById('notification');
