diff --git a/src/lib/element_tiptap_editor.svelte b/src/lib/element_tiptap_editor.svelte
index 7b562482..93a51b97 100644
--- a/src/lib/element_tiptap_editor.svelte
+++ b/src/lib/element_tiptap_editor.svelte
@@ -60,6 +60,8 @@ if (default_minimal) {
 
 let element: HTMLDivElement;
 let editor: any;
+// More default options should be defined later.
+// minimal, basic, full
 let show_button_kv_defaults: any = {
     bold: true,
     italic: true,
@@ -134,6 +136,7 @@ function getContent() {
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- class:py-1={show_menu} -->
 <div
     on:click={() => {
         if (default_minimal) {
@@ -151,9 +154,7 @@ function getContent() {
             show_menu = true;
         }
     }}
-    class="editor border border-gray-300 rounded p-1 bg-gray-200 transition-all duration-1000"
-    class:font-mono={show_menu}
-    class:py-2={show_menu}
+    class="editor textarea p-1 transition-all duration-1000"
     >
 
     <!-- && show_menu -->
@@ -183,8 +184,9 @@ function getContent() {
                     on:click={() => editor.chain().toggleBold().run()}
                     disabled={!editor.can().chain().focus().toggleBold().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md font-bold"
-                    class:variant-ghost-secondary={editor.isActive("bold") ?? false}
+                    class:variant-ghost-success={editor.isActive("bold") ?? false}
                     class:hidden={!show_button_kv.bold}
+                    title="Bold"
                     >
                     <span class="fas fa-bold mx-1"></span>
                     <!-- Bold -->
@@ -194,8 +196,9 @@ function getContent() {
                     on:click={() => editor.chain().focus().toggleItalic().run()}
                     disabled={!editor.can().chain().focus().toggleItalic().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md italic"
-                    class:variant-ghost-secondary={editor.isActive("italic") ?? false}
+                    class:variant-ghost-success={editor.isActive("italic") ?? false}
                     class:hidden={!show_button_kv.italic}
+                    title="Italic"
                     >
                     <span class="fas fa-italic mx-1"></span>
                     <!-- Italic -->
@@ -205,8 +208,9 @@ function getContent() {
                     on:click={() => editor.chain().focus().toggleStrike().run()}
                     disabled={!editor.can().chain().focus().toggleStrike().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md line-through"
-                    class:variant-ghost-secondary={editor.isActive("strike") ?? false}
+                    class:variant-ghost-success={editor.isActive("strike") ?? false}
                     class:hidden={!show_button_kv.strike}
+                    title="Strike"
                     >
                     <span class="fas fa-strikethrough mx-1"></span>
                     <!-- Strike -->
@@ -220,32 +224,13 @@ function getContent() {
                     on:click={() => editor.chain().focus().toggleCode().run()}
                     disabled={!editor.can().chain().focus().toggleCode().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("code") ?? false}
+                    class:variant-ghost-success={editor.isActive("code") ?? false}
                     class:hidden={!show_button_kv.code}
+                    title="Code <code>"
                     >
                     <span class="fas fa-code mx-1"></span>
                     <!-- Code -->
                 </button>
-                <button
-                    type="button"
-                    on:click={() => editor.chain().focus().unsetAllMarks().run()}
-                    class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:hidden={!show_button_kv.unsetAllMarks}
-                    >
-                    <!-- <span class="fas fa-broom mx-1"></span> -->
-                    <span class="fas fa-remove-format mx-1"></span>
-                    <!-- Clear marks -->
-                </button>
-                <button
-                    type="button"
-                    on:click={() => editor.chain().focus().clearNodes().run()}
-                    class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:hidden={!show_button_kv.clearNodes}
-                    >
-                    <!-- <span class="fas fa-broom mx-1"></span> -->
-                    <span class="fas fa-remove-format mx-1"></span>
-                    Clear nodes
-                </button>
             </span>
 
             <span>
@@ -253,7 +238,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().setParagraph().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("paragraph") ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("paragraph") ? "is-active" : ""}
                     class:hidden={!show_button_kv.paragraph}
                     title="Paragraph"
                     >
@@ -265,7 +250,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
-                    class:variant-ghost-secondary={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
                     class:hidden={!show_button_kv.heading__h1}
                     title="Heading 1 <h1>"
                     >
@@ -276,7 +261,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
-                    class:variant-ghost-secondary={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
                     class:hidden={!show_button_kv.heading__h2}
                     title="Heading 2 <h2>"
                     >
@@ -289,7 +274,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
-                    class:variant-ghost-secondary={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
                     class:hidden={!show_button_kv.heading__h3}
                     title="Heading 3 <h3>"
                     >
@@ -300,7 +285,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
                     class:hidden={!show_button_kv.heading__h4}
                     title="Heading 4 <h4>"
                     >
@@ -310,7 +295,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
                     class:hidden={!show_button_kv.heading__h5}
                     title="Heading 5 <h5>"
                     >
@@ -320,7 +305,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
                     class:hidden={!show_button_kv.heading__h6}
                     title="Heading 6 <h6>"
                     >
@@ -334,7 +319,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleBulletList().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("bulletList") ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("bulletList") ? "is-active" : ""}
                     class:hidden={!show_button_kv.bulletList}
                     title="Bullet list"
                     >
@@ -345,7 +330,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleOrderedList().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("orderedList") ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("orderedList") ? "is-active" : ""}
                     class:hidden={!show_button_kv.orderedList}
                     title="Ordered list"
                     >
@@ -356,7 +341,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleCodeBlock().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("codeBlock") ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("codeBlock") ? "is-active" : ""}
                     class:hidden={!show_button_kv.codeBlock}
                     title="Code block"
                     >
@@ -366,7 +351,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().toggleBlockquote().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive("blockquote") ? "is-active" : ""}
+                    class:variant-ghost-success={editor.isActive("blockquote") ? "is-active" : ""}
                     class:hidden={!show_button_kv.blockquote}
                     title="Blockquote"
                     >
@@ -397,28 +382,53 @@ function getContent() {
             <span
                 class="justify-self-end"
                 >
+                <button
+                    type="button"
+                    on:click={() => editor.chain().focus().unsetAllMarks().run()}
+                    class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
+                    class:hidden={!show_button_kv.unsetAllMarks}
+                    title="Clear marks"
+                    >
+                    <!-- <span class="fas fa-broom mx-1"></span> -->
+                    <span class="fas fa-remove-format mx-1"></span>
+                    <!-- Clear marks -->
+                </button>
+                <button
+                    type="button"
+                    on:click={() => editor.chain().focus().clearNodes().run()}
+                    class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
+                    class:hidden={!show_button_kv.clearNodes}
+                    title="Clear nodes"
+                    >
+                    <!-- <span class="fas fa-broom mx-1"></span> -->
+                    <span class="fas fa-remove-format mx-1"></span>
+                    Clear nodes
+                </button>
+
+                <!-- Undo (only once???) -->
+                 <!-- Seems to forget the history after the first undo? -->
                 <button
                     type="button"
                     on:click={() => editor.chain().focus().undo().run()}
                     disabled={!editor.can().chain().focus().undo().run()}
-                    class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
+                    class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
                     class:hidden={!show_button_kv.undo}
                     title="Undo"
                     >
                     <span class="fas fa-undo mx-1"></span>
-                    <!-- Undo -->
                 </button>
-                <button
+
+                <!-- Redo (not working???) -->
+                <!-- <button
                     type="button"
                     on:click={() => editor.chain().focus().redo().run()}
                     disabled={!editor.can().chain().focus().redo().run()}
-                    class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
+                    class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
                     class:hidden={!show_button_kv.redo}
                     title="Redo"
                     >
                     <span class="fas fa-redo mx-1"></span>
-                    <!-- Redo -->
-                </button>
+                </button> -->
             </span>
 
 
@@ -427,7 +437,7 @@ function getContent() {
                     type="button"
                     on:click={() => editor.chain().focus().setColor('#958DF1').run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
-                    class:variant-ghost-secondary={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
+                    class:variant-ghost-success={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
                     class:hidden={!show_button_kv.color__purple}
                     >
                     Purple
@@ -439,9 +449,11 @@ function getContent() {
     </div>
     {/if} <!-- show_menu -->
 
+    <!-- bg-slate-100 px-2 py-2 -->
     <div
         bind:this={element}
-        class="tiptap bg-slate-100 px-2 py-2 relative"
+        class="tiptap px-2 py-2 relative"
+        class:font-mono={show_menu}
         >
         <span
             class="placeholder text-sm text-gray-400 italic absolute"
@@ -462,4 +474,9 @@ function getContent() {
     // box-shadow: 0 0 0 2px hsla(208, 99%, 55%, .1);
     outline: none;
 }
+
+.textarea {
+    // border: none;
+    // box-shadow: 0 0 0 2px hsla(208, 99%, 55%, .1);
+}
 </style>