diff --git a/bbcode/Editor.vue b/bbcode/Editor.vue
index c13b467b..536686e1 100644
--- a/bbcode/Editor.vue
+++ b/bbcode/Editor.vue
@@ -1,152 +1,183 @@
 <template>
   <div
-    class="bbcode-editor"
-    style="display: flex; flex-wrap: wrap; justify-content: flex-end"
+    class="bbcode-editor bbcode-editor-mattermost"
+    :class="{ 'toolbar-top': toolbarPosition === 'top' }"
     @keydown="onKeyDownGlobal"
     tabindex="1"
     ref="editorContainer"
   >
-    <slot></slot>
-    <a
-      tabindex="0"
-      class="btn btn-light bbcode-btn btn-sm"
-      role="button"
-      @click="showToolbar = true"
-      @blur="showToolbar = false"
-      style="border-bottom-left-radius: 0; border-bottom-right-radius: 0"
-      v-if="hasToolbar"
-    >
-      <i class="fa fa-code"></i>
-    </a>
-
     <EIconSelector
       :onSelect="onSelectEIcon"
       ref="eIconSelector"
     ></EIconSelector>
 
-    <div
-      class="bbcode-toolbar btn-toolbar"
-      role="toolbar"
-      :disabled="disabled"
-      :style="
-        showToolbar || colorPopupVisible ? { display: 'flex' } : undefined
-      "
-      @mousedown.stop.prevent
-      v-if="hasToolbar"
-      style="flex: 1 51%"
-    >
-      <transition name="color-popover">
-        <div
-          class="popover popover-top color-selector"
-          v-show="colorPopupVisible"
-          v-on-clickaway="dismissColorSelector"
-        >
-          <div class="popover-body">
-            <div
-              class="color-typing-hint"
-              v-if="awaitingColorKey && awaitingBuffer"
-              :class="{ 'no-match': awaitingNoMatch }"
-            >
-              <div class="buffer">{{ awaitingBuffer.toLowerCase() }}</div>
-              <div class="matches">
-                <span
-                  v-for="m in awaitingMatches"
-                  :key="m"
-                  :class="['chip', m]"
-                  >{{ m }}</span
-                >
+    <div class="bbcode-editor-container" :class="{ focused: isFocused }">
+      <div
+        class="bbcode-toolbar-internal"
+        role="toolbar"
+        :disabled="disabled"
+        @mousedown.stop.prevent
+        v-if="hasToolbar"
+        ref="toolbarInternal"
+      >
+        <transition name="color-popover">
+          <div
+            class="popover color-selector"
+            :class="
+              toolbarPosition === 'top' ? 'popover-bottom' : 'popover-top'
+            "
+            v-show="colorPopupVisible"
+            v-on-clickaway="dismissColorSelector"
+          >
+            <div class="popover-body">
+              <div
+                class="color-typing-hint"
+                v-if="awaitingColorKey && awaitingBuffer"
+                :class="{ 'no-match': awaitingNoMatch }"
+              >
+                <div class="buffer">{{ awaitingBuffer.toLowerCase() }}</div>
+                <div class="matches">
+                  <span
+                    v-for="m in awaitingMatches"
+                    :key="m"
+                    :class="['chip', m]"
+                    >{{ m }}</span
+                  >
+                </div>
+              </div>
+              <div
+                class="btn-group"
+                role="group"
+                :aria-label="l('common.color')"
+              >
+                <button
+                  v-for="btnCol in buttonColors"
+                  type="button"
+                  class="btn text-color"
+                  :class="btnCol"
+                  :title="btnCol"
+                  @click.prevent.stop="applyAndClearColor(btnCol)"
+                  tabindex="0"
+                ></button>
               </div>
-            </div>
-            <div class="btn-group" role="group" :aria-label="l('common.color')">
-              <button
-                v-for="btnCol in buttonColors"
-                type="button"
-                class="btn text-color"
-                :class="btnCol"
-                :title="btnCol"
-                @click.prevent.stop="applyAndClearColor(btnCol)"
-                tabindex="0"
-              ></button>
             </div>
           </div>
-        </div>
-      </transition>
+        </transition>
+
+        <div class="toolbar-buttons-wrapper" ref="toolbarButtonsWrapper">
+          <div v-if="!!characterName" class="character-btn">
+            <icon :character="characterName"></icon>
+          </div>
 
-      <div class="btn-group toolbar-buttons" style="flex-wrap: wrap">
-        <div v-if="!!characterName" class="character-btn">
-          <icon :character="characterName"></icon>
+          <div
+            class="toolbar-btn"
+            v-for="button in visibleButtons"
+            :key="button.tag"
+            :class="button.outerClass"
+            :title="button.title"
+            @click.prevent.stop="apply(button)"
+          >
+            <i
+              :class="(button.class ? button.class : 'fa fa-fw ') + button.icon"
+            ></i>
+          </div>
+
+          <div
+            class="toolbar-btn toolbar-overflow-btn"
+            v-if="overflowButtons.length > 0"
+            @click.prevent.stop="toggleOverflowMenu"
+            :class="{ active: showOverflowMenu }"
+            :title="l('editor.moreOptions')"
+            ref="overflowTrigger"
+          >
+            <i class="fa fa-fw fa-ellipsis-h"></i>
+          </div>
+
+          <div
+            @click="previewBBCode"
+            class="toolbar-btn bbcode-editor-preview"
+            :class="preview ? 'active' : ''"
+            :title="
+              preview
+                ? l(
+                    'editor.closePreview',
+                    `${this.shortcutModifierKey}+Shift+P`
+                  )
+                : l('editor.preview', `${this.shortcutModifierKey}+Shift+P`)
+            "
+          >
+            <i class="fa" :class="preview ? 'fa-eye' : 'far fa-eye'"></i>
+          </div>
         </div>
 
         <div
-          class="btn btn-light btn-sm"
-          v-for="button in buttons"
-          :class="button.outerClass"
-          :title="button.title"
-          @click.prevent.stop="apply(button)"
+          class="toolbar-overflow-menu"
+          v-if="overflowButtons.length > 0"
+          v-show="showOverflowMenu"
+          v-on-clickaway="closeOverflowMenu"
+          ref="overflowMenu"
         >
-          <i
-            :class="(button.class ? button.class : 'fa fa-fw ') + button.icon"
-          ></i>
+          <div
+            class="toolbar-overflow-item"
+            v-for="button in overflowButtons"
+            :key="button.tag"
+            :class="button.outerClass"
+            :title="button.title"
+            @click.prevent.stop="applyFromOverflow(button)"
+          >
+            <i
+              :class="(button.class ? button.class : 'fa fa-fw ') + button.icon"
+            ></i>
+          </div>
         </div>
-        <div
-          @click="previewBBCode"
-          class="btn btn-light btn-sm bbcode-editor-preview"
-          :class="preview ? 'active' : ''"
-          :title="
-            preview
-              ? l('editor.closePreview', `${this.shortcutModifierKey}+Shift+P`)
-              : l('editor.preview', `${this.shortcutModifierKey}+Shift+P`)
-          "
-        >
-          <i class="fa" :class="preview ? 'fa-eye' : 'far fa-eye'"></i>
+
+        <slot name="controls"></slot>
+      </div>
+
+      <div class="bbcode-editor-separator" v-if="hasToolbar"></div>
+
+      <div class="bbcode-editor-text-area">
+        <textarea
+          ref="input"
+          v-model="text"
+          @input="onInput"
+          v-show="!preview"
+          :maxlength="maxlength"
+          :placeholder="placeholder"
+          :class="finalClasses"
+          class="hidden-scrollbar"
+          @keyup="onKeyUp"
+          :disabled="disabled"
+          @paste="onPaste"
+          @keypress="$emit('keypress', $event)"
+          @keydown="onKeyDown"
+          @focus="isFocused = true"
+          @blur="isFocused = false"
+        ></textarea>
+        <textarea ref="sizer" class="hidden-scrollbar"></textarea>
+        <div class="bbcode-preview bg-body" v-show="preview">
+          <div class="bbcode-preview-warnings">
+            <div class="alert alert-danger" v-show="previewWarnings.length">
+              <li v-for="(warning, index) in previewWarnings" :key="index">
+                {{ warning }}
+              </li>
+            </div>
+          </div>
+          <div class="bbcode" ref="preview-element"></div>
         </div>
       </div>
-      <button
-        type="button"
-        class="btn-close"
-        :aria-label="l('action.close')"
-        style="margin-left: 10px"
-        @click="showToolbar = false"
-      ></button>
     </div>
+
+    <slot></slot>
+
     <div
       @click="previewBBCode"
       v-if="preview && !hasToolbar"
-      class="btn btn-light btn-sm bbcode-editor-preview active"
+      class="btn btn-light btn-sm bbcode-editor-preview active standalone-preview"
       :title="l('editor.closePreview', `${this.shortcutModifierKey}+Shift+P`)"
     >
       <i class="fa fa-eye-slash"></i>
     </div>
-    <div
-      class="bbcode-editor-text-area bg-light"
-      style="order: 100; width: 100%"
-    >
-      <textarea
-        ref="input"
-        v-model="text"
-        @input="onInput"
-        v-show="!preview"
-        :maxlength="maxlength"
-        :placeholder="placeholder"
-        :class="finalClasses"
-        class="hidden-scrollbar"
-        @keyup="onKeyUp"
-        :disabled="disabled"
-        @paste="onPaste"
-        @keypress="$emit('keypress', $event)"
-        :style="hasToolbar ? { 'border-top-left-radius': 0 } : undefined"
-        @keydown="onKeyDown"
-      ></textarea>
-      <textarea ref="sizer" class="hidden-scrollbar"></textarea>
-      <div class="bbcode-preview bg-body" v-show="preview">
-        <div class="bbcode-preview-warnings">
-          <div class="alert alert-danger" v-show="previewWarnings.length">
-            <li v-for="warning in previewWarnings">{{ warning }}</li>
-          </div>
-        </div>
-        <div class="bbcode" ref="preview-element"></div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -197,6 +228,9 @@
     @Prop({ default: true })
     readonly hasToolbar!: boolean;
 
+    @Prop({ default: 'bottom' })
+    readonly toolbarPosition!: 'bottom' | 'top';
+
     @Prop({ default: false, type: Boolean })
     readonly invalid!: boolean;
 
@@ -237,6 +271,10 @@
     protected parser!: BBCodeParser;
     protected defaultButtons = defaultButtons;
 
+    showOverflowMenu = false;
+    visibleButtonCount = 14;
+    isFocused = false;
+
     private isShiftPressed = false;
     private undoStack: string[] = [];
     private undoIndex = 0;
@@ -245,9 +283,77 @@
     private awaitingNoMatch: boolean = false;
     private awaitingNoMatchTimer: number | null = null;
     private awaitingBuffer: string = '';
+    // tslint:disable-next-line:no-any
+    private overflowResizeObserver: any = null;
     //tslint:disable:strict-boolean-expressions
     private resizeListener!: () => void;
 
+    get visibleButtons(): EditorButton[] {
+      return this.buttons.slice(0, this.visibleButtonCount);
+    }
+
+    get overflowButtons(): EditorButton[] {
+      return this.buttons.slice(this.visibleButtonCount);
+    }
+
+    toggleOverflowMenu(): void {
+      this.showOverflowMenu = !this.showOverflowMenu;
+    }
+
+    closeOverflowMenu(event?: MouseEvent): void {
+      if (event) {
+        const trigger = this.$refs['overflowTrigger'] as HTMLElement;
+        if (trigger && trigger.contains(event.target as Node)) {
+          return;
+        }
+      }
+      this.showOverflowMenu = false;
+    }
+
+    applyFromOverflow(button: EditorButton): void {
+      this.apply(button);
+      this.closeOverflowMenu();
+    }
+
+    private calculateVisibleButtons(): void {
+      if (!this.hasToolbar) return;
+
+      const wrapper = this.$refs['toolbarButtonsWrapper'] as HTMLElement;
+      if (!wrapper) return;
+
+      const wrapperWidth = wrapper.clientWidth;
+      const buttonWidth = 32;
+      const overflowBtnWidth = 32;
+      const previewBtnWidth = 32;
+      const characterBtnWidth = this.characterName ? 32 : 0;
+      const padding = 16;
+
+      const totalButtons = this.buttons.length;
+      const availableWithoutOverflow =
+        wrapperWidth - previewBtnWidth - characterBtnWidth - padding;
+      const maxButtonsWithoutOverflow = Math.floor(
+        availableWithoutOverflow / buttonWidth
+      );
+
+      if (maxButtonsWithoutOverflow >= totalButtons) {
+        this.visibleButtonCount = totalButtons;
+      } else {
+        const availableWithOverflow =
+          wrapperWidth -
+          overflowBtnWidth -
+          previewBtnWidth -
+          characterBtnWidth -
+          padding;
+        const maxButtonsWithOverflow = Math.floor(
+          availableWithOverflow / buttonWidth
+        );
+        this.visibleButtonCount = Math.max(
+          4,
+          Math.min(maxButtonsWithOverflow, totalButtons - 1)
+        );
+      }
+    }
+
     private getMatches(prefix: string): string[] {
       const topRow = new Set(this.buttonColors.slice(0, 8));
       return this.buttonColors
@@ -321,6 +427,19 @@
       this.resize();
       window.addEventListener('resize', this.resizeListener);
       this.editorContainer = this.$refs['editorContainer'] as HTMLElement;
+
+      this.$nextTick(() => {
+        this.calculateVisibleButtons();
+        const wrapper = this.$refs['toolbarButtonsWrapper'] as HTMLElement;
+        // tslint:disable-next-line:no-any
+        const RO = (window as any).ResizeObserver;
+        if (wrapper && typeof RO !== 'undefined') {
+          this.overflowResizeObserver = new RO(() => {
+            this.calculateVisibleButtons();
+          });
+          this.overflowResizeObserver.observe(wrapper);
+        }
+      });
     }
 
     //tslint:enable
@@ -329,6 +448,10 @@
     destroyed(): void {
       // console.log('EDITOR', 'destroyed');
       window.removeEventListener('resize', this.resizeListener);
+      if (this.overflowResizeObserver) {
+        this.overflowResizeObserver.disconnect();
+        this.overflowResizeObserver = null;
+      }
     }
 
     get finalClasses(): string | undefined {
@@ -366,6 +489,31 @@
       return btn;
     }
 
+    @Watch('toolbarPosition')
+    onToolbarPositionChanged(): void {
+      this.$nextTick(() => {
+        this.reattachResizeObserver();
+        this.calculateVisibleButtons();
+      });
+    }
+
+    private reattachResizeObserver(): void {
+      if (this.overflowResizeObserver) {
+        this.overflowResizeObserver.disconnect();
+      }
+      const wrapper = this.$refs['toolbarButtonsWrapper'] as HTMLElement;
+      // tslint:disable-next-line:no-any
+      const RO = (window as any).ResizeObserver;
+      if (wrapper && typeof RO !== 'undefined') {
+        if (!this.overflowResizeObserver) {
+          this.overflowResizeObserver = new RO(() => {
+            this.calculateVisibleButtons();
+          });
+        }
+        this.overflowResizeObserver.observe(wrapper);
+      }
+    }
+
     @Watch('value')
     watchValue(newValue: string): void {
       this.$nextTick(() => this.resize());
@@ -748,118 +896,324 @@
   }
 </script>
 <style lang="scss">
-  .bbcode-editor .bbcode-toolbar .character-btn {
-    width: 30px;
-    height: 30px;
-    overflow: hidden;
-
-    a {
-      width: 100%;
-      height: 100%;
+  .bbcode-editor.bbcode-editor-mattermost {
+    display: flex;
+    flex-direction: column;
+    position: relative;
 
-      img {
-        width: inherit;
-        height: inherit;
-      }
+    &:focus {
+      outline: none;
     }
-  }
 
-  .bbcode-preview {
-    max-height: 450px;
-    overflow-y: auto;
-    div.bbcode {
-      padding: 0.2em 0.45em;
-      min-height: 60px;
+    > .chat-info-text {
+      margin-bottom: 4px;
+      font-size: 0.875em;
+      order: -2;
     }
-  }
 
-  .bbcode-editor {
-    resize: none;
-    &:focus {
-      outline: none;
+    .bbcode-editor-container {
+      order: 0;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid var(--bs-border-color);
+      border-radius: 4px;
+      background-color: var(--input-bg, var(--bs-body-bg));
+      transition:
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+      overflow: visible;
+
+      &.focused {
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
+      }
+
       .bbcode-editor-text-area {
-        outline: 2px ridge var(--bs-primary-border-subtle);
+        order: 1;
+      }
+
+      .bbcode-toolbar-internal {
+        order: 2;
+      }
+
+      .bbcode-editor-separator {
+        order: 2;
       }
     }
-  }
 
-  .bbcode-toolbar {
-    position: relative;
-    .toolbar-buttons {
-      .btn.toggled {
-        background-color: var(--bs-secondary) !important;
+    &.toolbar-top .bbcode-editor-container {
+      .bbcode-toolbar-internal {
+        order: 0;
+      }
+
+      .bbcode-editor-separator {
+        order: 0;
+      }
+
+      .bbcode-editor-text-area {
+        order: 1;
       }
     }
 
-    .color-selector {
-      max-width: 150px;
-      left: 5.7em;
-      bottom: 2.2em;
-      line-height: 1;
-      z-index: 1000;
-      background-color: var(--bs-body-bg);
-      position: absolute;
+    .bbcode-editor-text-area {
+      position: relative;
+      flex: 1;
+      overflow: hidden;
+      border-radius: 4px;
+
+      textarea {
+        width: 100%;
+        border: none;
+        background: transparent;
+        padding: 10px 12px;
+        min-height: 80px;
+        max-height: 250px;
+        resize: none;
+        color: var(--input-color, var(--bs-body-color));
+        font-size: inherit;
+
+        &:focus {
+          outline: none;
+          box-shadow: none;
+        }
 
-      .popover-body {
-        padding: 0px;
+        &::placeholder {
+          color: var(--bs-secondary-color);
+          opacity: 0.4;
+        }
       }
+    }
 
-      .btn-group {
-        display: block;
-        margin: 10px 13px 10px 13px;
+    .bbcode-editor-separator {
+      height: 1px;
+      background-color: var(--bs-border-color);
+      margin: 0 8px;
+    }
+
+    .bbcode-toolbar-internal {
+      display: flex;
+      align-items: center;
+      padding: 6px 8px;
+      position: relative;
+      min-height: 40px;
+      container-type: inline-size;
+
+      .toolbar-buttons-wrapper {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        gap: 2px;
+        overflow: hidden;
+        min-width: 0;
       }
 
-      .color-typing-hint {
-        padding: 6px 8px;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      > .toolbar-controls {
         display: flex;
-        gap: 8px;
         align-items: center;
-        font-size: 0.85em;
-        background: linear-gradient(
-          180deg,
-          rgba(255, 255, 255, 0.02),
-          rgba(0, 0, 0, 0.02)
-        );
-        backdrop-filter: blur(3px);
+        gap: 6px;
+        margin-left: 8px;
+        flex-shrink: 0;
+
+        .char-counter {
+          font-size: 0.7rem;
+          color: var(--bs-secondary-color);
+          white-space: nowrap;
+        }
+
+        .send-ads-switcher {
+          display: flex;
+          gap: 1px;
+          margin: 0;
+          padding: 0;
+
+          .nav-item {
+            list-style: none;
+          }
+
+          .nav-link {
+            padding: 2px 6px;
+            font-size: 0.7rem;
+            border-radius: 4px;
+            color: var(--bs-secondary-color);
+            background: transparent;
+            transition:
+              background-color 0.1s ease,
+              color 0.1s ease;
+
+            &:hover {
+              background-color: var(--bs-tertiary-bg);
+              color: var(--bs-body-color);
+            }
+
+            &.active {
+              background-color: var(--bs-primary-bg-subtle);
+              color: var(--bs-primary);
+            }
+
+            &.disabled {
+              opacity: 0.5;
+              pointer-events: none;
+            }
+          }
+        }
+
+        .toolbar-separator {
+          width: 1px;
+          height: 18px;
+          background-color: var(--bs-border-color);
+          margin: 0 2px;
+        }
+
+        .send-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 26px;
+          height: 26px;
+          padding: 0;
+          font-size: 0.75rem;
+          border-radius: 4px;
+        }
       }
 
-      .color-typing-hint .buffer {
-        font-weight: 600;
-        text-transform: lowercase;
-        min-width: 18px;
-        color: var(--bs-body-color);
-        padding-right: 6px;
-        border-right: 1px solid rgba(0, 0, 0, 0.06);
+      @container (max-width: 350px) {
+        > .toolbar-controls .char-counter {
+          display: none;
+        }
       }
 
-      .color-typing-hint .matches {
-        display: flex;
-        gap: 6px;
-        flex-wrap: nowrap;
-        align-items: center;
+      .character-btn {
+        width: 26px;
+        height: 26px;
+        overflow: hidden;
+        flex-shrink: 0;
+        margin-right: 4px;
+
+        a {
+          width: 100%;
+          height: 100%;
+          display: block;
+
+          img {
+            width: 100%;
+            height: 100%;
+            border-radius: 3px;
+          }
+        }
       }
 
-      .color-typing-hint .chip {
-        display: inline-flex;
+      .toolbar-btn {
+        display: flex;
         align-items: center;
         justify-content: center;
-        height: 18px;
-        padding: 0 6px;
-        border-radius: 10px;
-        font-size: 0.85em;
-        color: rgba(0, 0, 0, 0.7);
-        background: rgba(255, 255, 255, 0.85);
-        border: 1px solid rgba(0, 0, 0, 0.06);
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        cursor: pointer;
+        color: var(--bs-secondary-color);
+        transition:
+          background-color 0.1s ease,
+          color 0.1s ease;
+        flex-shrink: 0;
+
+        &:hover {
+          background-color: var(--bs-tertiary-bg);
+          color: var(--bs-body-color);
+        }
+
+        &.active,
+        &.toggled {
+          background-color: var(--bs-primary-bg-subtle);
+          color: var(--bs-primary);
+        }
+
+        i {
+          font-size: 14px;
+        }
       }
 
-      .color-typing-hint.no-match .chip {
-        opacity: 0.5;
-        filter: grayscale(100%);
+      .bbcode-editor-preview {
+        margin-left: 4px;
       }
 
-      .btn {
-        &.text-color {
+      .color-selector {
+        max-width: 150px;
+        left: 4.5em;
+        line-height: 1;
+        z-index: 1000;
+        background-color: var(--bs-body-bg);
+        position: absolute;
+        border: 1px solid var(--bs-border-color);
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+        &.popover-top {
+          bottom: 2.5em;
+        }
+
+        &.popover-bottom {
+          top: 2.5em;
+        }
+
+        .popover-body {
+          padding: 0;
+        }
+
+        .btn-group {
+          display: block;
+          margin: 10px 13px;
+        }
+
+        .color-typing-hint {
+          padding: 6px 8px;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          font-size: 0.85em;
+          background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.02),
+            rgba(0, 0, 0, 0.02)
+          );
+          backdrop-filter: blur(3px);
+        }
+
+        .color-typing-hint .buffer {
+          font-weight: 600;
+          text-transform: lowercase;
+          min-width: 18px;
+          color: var(--bs-body-color);
+          padding-right: 6px;
+          border-right: 1px solid rgba(0, 0, 0, 0.06);
+        }
+
+        .color-typing-hint .matches {
+          display: flex;
+          gap: 6px;
+          flex-wrap: nowrap;
+          align-items: center;
+        }
+
+        .color-typing-hint .chip {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          height: 18px;
+          padding: 0 6px;
+          border-radius: 10px;
+          font-size: 0.85em;
+          color: rgba(0, 0, 0, 0.7);
+          background: rgba(255, 255, 255, 0.85);
+          border: 1px solid rgba(0, 0, 0, 0.06);
+        }
+
+        .color-typing-hint.no-match .chip {
+          opacity: 0.5;
+          filter: grayscale(100%);
+        }
+
+        .btn.text-color {
           border-radius: 0 !important;
           margin: 0 !important;
           padding: 0 !important;
@@ -880,54 +1234,111 @@
           &.red {
             background-color: var(--textRedColor);
           }
-
           &.orange {
             background-color: var(--textOrangeColor);
           }
-
           &.yellow {
             background-color: var(--textYellowColor);
           }
-
           &.green {
             background-color: var(--textGreenColor);
           }
-
           &.cyan {
             background-color: var(--textCyanColor);
           }
-
           &.purple {
             background-color: var(--textPurpleColor);
           }
-
           &.blue {
             background-color: var(--textBlueColor);
           }
-
           &.pink {
             background-color: var(--textPinkColor);
           }
-
           &.black {
             background-color: var(--textBlackColor);
           }
-
           &.brown {
             background-color: var(--textBrownColor);
           }
-
           &.white {
             background-color: var(--textWhiteColor);
           }
-
           &.gray {
             background-color: var(--textGrayColor);
           }
         }
       }
     }
+
+    .toolbar-overflow-menu {
+      position: absolute;
+      right: 8px;
+      bottom: calc(100% + 4px);
+      background-color: var(--bs-body-bg);
+      border: 1px solid var(--bs-border-color);
+      border-radius: 6px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 1001;
+      padding: 6px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 2px;
+      max-width: 180px;
+
+      .toolbar-overflow-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        cursor: pointer;
+        color: var(--bs-secondary-color);
+        transition:
+          background-color 0.1s ease,
+          color 0.1s ease;
+
+        &:hover {
+          background-color: var(--bs-tertiary-bg);
+          color: var(--bs-body-color);
+        }
+
+        &.active,
+        &.toggled {
+          background-color: var(--bs-primary-bg-subtle);
+          color: var(--bs-primary);
+        }
+
+        i {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .standalone-preview {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  .bbcode-preview {
+    max-height: 450px;
+    overflow-y: auto;
+    div.bbcode {
+      padding: 0.2em 0.45em;
+      min-height: 60px;
+    }
+  }
+
+  .bbcode-editor.bbcode-editor-mattermost.toolbar-top {
+    .bbcode-toolbar-internal .toolbar-overflow-menu {
+      bottom: auto;
+      top: calc(100% + 4px);
+    }
   }
+
   .color-popover-enter-active,
   .color-popover-leave-active {
     transition: all 0.1s ease-in;
diff --git a/chat/ConversationView.vue b/chat/ConversationView.vue
index 222d2cbd..598a05aa 100644
--- a/chat/ConversationView.vue
+++ b/chat/ConversationView.vue
@@ -358,6 +358,7 @@
           : '')
       "
       :hasToolbar="settings.bbCodeBar"
+      :toolbarPosition="settings.bbCodeBarPosition"
       ref="textBox"
       style="position: relative; margin-top: 5px"
       :maxlength="
@@ -367,6 +368,7 @@
       "
       :characterName="ownName"
       :type="'big'"
+      :placeholder="editorPlaceholder"
     >
       <span
         v-if="isPrivate(conversation) && conversation.typingStatus !== 'clear'"
@@ -403,71 +405,74 @@
           style="flex: 1; margin-left: 5px"
         ></bbcode-ui>
       </div>
-      <div class="bbcode-editor-controls">
-        <div
-          v-if="isChannel(conversation) || isPrivate(conversation)"
-          style="margin-right: 5px"
-        >
-          {{ getByteLength(conversation.enteredText) }} /
-          {{ conversation.maxMessageLength }}
-        </div>
-        <ul
-          class="nav nav-pills send-ads-switcher"
-          v-if="isChannel(conversation)"
-          style="position: relative; z-index: 10; margin-right: 5px"
-        >
-          <li
-            class="nav-item"
-            v-show="
-              conversation.channel.mode === 'both' ||
-              conversation.channel.mode === 'chat'
-            "
+      <template v-slot:controls>
+        <div class="toolbar-controls">
+          <span
+            v-if="isChannel(conversation) || isPrivate(conversation)"
+            class="char-counter"
           >
-            <a
-              href="#"
-              :class="{
-                active: !conversation.isSendingAds,
-                disabled:
-                  conversation.channel.mode != 'both' ||
-                  conversation.adManager.isActive()
-              }"
-              class="nav-link"
-              @click.prevent="setSendingAds(false)"
-              >{{ l('channel.mode.chat') }}</a
-            >
-          </li>
-          <li
-            class="nav-item"
-            v-show="
-              conversation.channel.mode === 'both' ||
-              conversation.channel.mode === 'ads'
-            "
+            {{ getByteLength(conversation.enteredText) }} /
+            {{ conversation.maxMessageLength }}
+          </span>
+          <ul
+            class="nav nav-pills send-ads-switcher"
+            v-if="isChannel(conversation)"
           >
-            <a
-              href="#"
-              :class="{
-                active: conversation.isSendingAds,
-                disabled:
-                  conversation.channel.mode != 'both' ||
-                  conversation.adManager.isActive()
-              }"
-              class="nav-link"
-              @click.prevent="setSendingAds(true)"
-              >{{ adsMode }}</a
+            <li
+              class="nav-item"
+              v-show="
+                conversation.channel.mode === 'both' ||
+                conversation.channel.mode === 'chat'
+              "
             >
-          </li>
-          <!--                    <li class="nav-item">-->
-          <!--                        <a href="#" :class="{active: conversation.adManager.isActive()}" class="nav-link toggle-autopost" @click="toggleAutoPostAds()">{{l('admgr.toggleAutoPost')}}</a>-->
-          <!--                    </li>-->
-        </ul>
-        <div
-          class="btn btn-sm btn-primary"
-          v-show="!settings.enterSend"
-          @click="sendButton"
-        >
-          {{ l('chat.send') }}
+              <a
+                href="#"
+                :class="{
+                  active: !conversation.isSendingAds,
+                  disabled:
+                    conversation.channel.mode != 'both' ||
+                    conversation.adManager.isActive()
+                }"
+                class="nav-link"
+                @click.prevent="setSendingAds(false)"
+                >{{ l('channel.mode.chat') }}</a
+              >
+            </li>
+            <li
+              class="nav-item"
+              v-show="
+                conversation.channel.mode === 'both' ||
+                conversation.channel.mode === 'ads'
+              "
+            >
+              <a
+                href="#"
+                :class="{
+                  active: conversation.isSendingAds,
+                  disabled:
+                    conversation.channel.mode != 'both' ||
+                    conversation.adManager.isActive()
+                }"
+                class="nav-link"
+                @click.prevent="setSendingAds(true)"
+                >{{ adsMode }}</a
+              >
+            </li>
+          </ul>
+          <span
+            class="toolbar-separator"
+            v-show="!settings.enterSend && isChannel(conversation)"
+          ></span>
+          <div
+            class="btn btn-sm btn-primary send-btn"
+            v-show="!settings.enterSend"
+            @click="sendButton"
+            :title="l('chat.send')"
+          >
+            <i class="fas fa-paper-plane"></i>
+          </div>
         </div>
-      </div>
+      </template>
     </bbcode-editor>
     <command-help ref="helpDialog"></command-help>
     <settings ref="settingsDialog" :conversation="conversation"></settings>
@@ -737,6 +742,15 @@
         : undefined;
     }
 
+    get editorPlaceholder(): string {
+      if (this.isChannel(this.conversation)) {
+        return l('chat.placeholder.channel', this.conversation.name);
+      } else if (this.isPrivate(this.conversation)) {
+        return l('chat.placeholder.private', this.conversation.name);
+      }
+      return '';
+    }
+
     get conversation(): Conversation {
       return core.conversations.selectedConversation;
     }
diff --git a/chat/ManageChannel.vue b/chat/ManageChannel.vue
index 1c24739b..c99361fa 100644
--- a/chat/ManageChannel.vue
+++ b/chat/ManageChannel.vue
@@ -42,9 +42,13 @@
         style="position: relative"
         :maxlength="50000"
       >
-        <div class="bbcode-editor-controls">
-          {{ getByteLength(description) }} / {{ maxLength }}
-        </div>
+        <template v-slot:controls>
+          <div class="toolbar-controls">
+            <span class="char-counter">
+              {{ getByteLength(description) }} / {{ maxLength }}
+            </span>
+          </div>
+        </template>
       </bbcode-editor>
     </div>
     <template v-if="isChannelOwner">
diff --git a/chat/SettingsView.vue b/chat/SettingsView.vue
index eca750a1..03f98483 100644
--- a/chat/SettingsView.vue
+++ b/chat/SettingsView.vue
@@ -89,6 +89,29 @@
         </div>
       </div>
 
+      <div class="mb-3">
+        <div class="d-flex p-2 justify-content-between align-items-start">
+          <div class="w-50">
+            <label class="control-label" for="bbCodeBarPosition">
+              {{ l('settings.bbCodeBarPosition') }}
+            </label>
+          </div>
+          <select
+            v-model="bbCodeBarPosition"
+            id="bbCodeBarPosition"
+            class="form-select form-select-sm w-auto"
+            :disabled="!bbCodeBar"
+          >
+            <option value="bottom">
+              {{ l('settings.bbCodeBarPosition.bottom') }}
+            </option>
+            <option value="top">
+              {{ l('settings.bbCodeBarPosition.top') }}
+            </option>
+          </select>
+        </div>
+      </div>
+
       <div class="mb-3">
         <div class="d-flex p-2 justify-content-between align-items-start">
           <div class="w-50">
@@ -1178,6 +1201,7 @@
     showPerCharacterFriends!: boolean;
     hideNonCharacterFriends!: boolean;
     bbCodeBar!: boolean;
+    bbCodeBarPosition!: 'bottom' | 'top';
 
     risingAdScore!: boolean;
     risingLinkPreview!: boolean;
@@ -1244,6 +1268,7 @@
       this.showPerCharacterFriends = settings.showPerCharacterFriends;
       this.hideNonCharacterFriends = settings.hideNonCharacterFriends;
       this.bbCodeBar = settings.bbCodeBar;
+      this.bbCodeBarPosition = settings.bbCodeBarPosition;
       this.availableImports = (
         await core.settingsStore.getAvailableCharacters()
       ).filter(x => x !== core.connection.character);
@@ -1400,6 +1425,7 @@
         showPerCharacterFriends: this.showPerCharacterFriends,
         hideNonCharacterFriends: this.hideNonCharacterFriends,
         bbCodeBar: this.bbCodeBar,
+        bbCodeBarPosition: this.bbCodeBarPosition,
 
         risingAdScore: this.risingAdScore,
         risingLinkPreview: this.risingLinkPreview,
diff --git a/chat/StatusSwitcher.vue b/chat/StatusSwitcher.vue
index 23109362..94aa097a 100644
--- a/chat/StatusSwitcher.vue
+++ b/chat/StatusSwitcher.vue
@@ -27,9 +27,11 @@
     <div class="mb-3">
       <label class="control-label">{{ l('chat.setStatus.message') }}</label>
       <editor id="text" v-model="text" classes="form-control" maxlength="255">
-        <div class="bbcode-editor-controls">
-          {{ getByteLength(text) }} / 255
-        </div>
+        <template v-slot:controls>
+          <div class="toolbar-controls">
+            <span class="char-counter"> {{ getByteLength(text) }} / 255 </span>
+          </div>
+        </template>
       </editor>
     </div>
     <div class="mb-3">
diff --git a/chat/common.ts b/chat/common.ts
index b70277d8..ce346f8a 100644
--- a/chat/common.ts
+++ b/chat/common.ts
@@ -84,6 +84,7 @@ export class Settings implements ISettings {
   showPerCharacterFriends = true;
   hideNonCharacterFriends = false;
   bbCodeBar = true;
+  bbCodeBarPosition: 'bottom' | 'top' = 'bottom';
 
   risingAdScore = true;
   risingLinkPreview = true;
diff --git a/chat/interfaces.ts b/chat/interfaces.ts
index bb32025e..0d8811c5 100644
--- a/chat/interfaces.ts
+++ b/chat/interfaces.ts
@@ -286,6 +286,7 @@ export namespace Settings {
     readonly showPerCharacterFriends: boolean;
     readonly hideNonCharacterFriends: boolean;
     readonly bbCodeBar: boolean;
+    readonly bbCodeBarPosition: 'bottom' | 'top';
 
     readonly risingAdScore: boolean;
     readonly risingLinkPreview: boolean;
diff --git a/chat/locales/en_us.json b/chat/locales/en_us.json
index fad88860..c4bd37e7 100644
--- a/chat/locales/en_us.json
+++ b/chat/locales/en_us.json
@@ -150,6 +150,8 @@
   "chat.roll": "rolls {0}: {1}",
   "chat.search": "Search in messages…",
   "chat.send": "Send",
+  "chat.placeholder.channel": "Send a message in #{0}…",
+  "chat.placeholder.private": "Send a message to {0}…",
   "chat.setStatus": "Set status",
   "chat.setStatus.message": "Status message (optional)",
   "chat.setStatus.status": "Status",
@@ -342,6 +344,7 @@
   "duplicateDialog.info": "This will duplicate the character, kinks, infotags, customs, subkinks and images. Guestbook entries, friends, groups, and bookmarks are not duplicated.",
   "duplicateDialog.nameValid": "Name valid and unused.",
   "editor.closePreview": "Close Preview ({0})\n\nDismisses the BBCode preview.",
+  "editor.moreOptions": "More formatting options",
   "editor.preview": "Preview ({0})\n\nShows a preview of the BBCode you have typed, including any formatting errors.",
   "eicon.action": "Select EIcon",
   "eicon.addToFavorites": "Add to favorites",
@@ -566,6 +569,9 @@
   "settings.autoReplyPlaceholder": "Put your custom message for automatic replies here",
   "settings.automaticReplies": "Automatic Replies",
   "settings.bbCodeBar": "Show BBCode formatting bar",
+  "settings.bbCodeBarPosition": "Formatting bar position",
+  "settings.bbCodeBarPosition.top": "Top",
+  "settings.bbCodeBarPosition.bottom": "Bottom",
   "settings.behavior.chat": "Chat",
   "settings.behavior.window": "Window",
   "settings.beta": "Opt-in to test unstable prerelease updates",
diff --git a/electron/browser_windows.ts b/electron/browser_windows.ts
index 94c5aa76..baf7dc03 100644
--- a/electron/browser_windows.ts
+++ b/electron/browser_windows.ts
@@ -240,6 +240,8 @@ export function createMainWindow(
     ...lastState,
     center: lastState.x === undefined,
     show: false,
+    minWidth: 600,
+    minHeight: 400,
     icon: process.platform === 'win32' ? winIcon : pngIcon,
     backgroundColor: !settings.allowWindowTransparency
       ? windowBackgroundColor
diff --git a/scss/_bbcode_editor.scss b/scss/_bbcode_editor.scss
index 27346eb4..bc48c4b4 100644
--- a/scss/_bbcode_editor.scss
+++ b/scss/_bbcode_editor.scss
@@ -1,13 +1,78 @@
 .bbcode-editor-text-area {
   textarea {
-    min-height: 150px;
+    min-height: 80px;
     &:focus {
-      box-shadow: 0 0 0 ($input-btn-focus-width / 2) $input-btn-focus-color;
+      box-shadow: none;
     }
     resize: none;
   }
 }
 
+.bbcode-editor.bbcode-editor-mattermost {
+  .bbcode-editor-text-area {
+    textarea {
+      min-height: 80px;
+      max-height: 250px;
+
+      &:focus {
+        box-shadow: none;
+        outline: none;
+      }
+    }
+  }
+
+  .bbcode-toolbar-internal {
+    .color-typing-hint .chip.red {
+      background: var(--textRedColor);
+      color: color-contrast($red-color);
+    }
+    .color-typing-hint .chip.orange {
+      background: var(--textOrangeColor);
+      color: color-contrast($orange-color);
+    }
+    .color-typing-hint .chip.yellow {
+      background: var(--textYellowColor);
+      color: color-contrast($yellow-color);
+    }
+    .color-typing-hint .chip.green {
+      background: var(--textGreenColor);
+      color: color-contrast($green-color);
+    }
+    .color-typing-hint .chip.cyan {
+      background: var(--textCyanColor);
+      color: color-contrast($cyan-color);
+    }
+    .color-typing-hint .chip.purple {
+      background: var(--textPurpleColor);
+      color: color-contrast($purple-color);
+    }
+    .color-typing-hint .chip.blue {
+      background: var(--textBlueColor);
+      color: color-contrast($blue-color);
+    }
+    .color-typing-hint .chip.pink {
+      background: var(--textPinkColor);
+      color: color-contrast($pink-color);
+    }
+    .color-typing-hint .chip.black {
+      background: var(--textBlackColor);
+      color: color-contrast($black-color);
+    }
+    .color-typing-hint .chip.brown {
+      background: var(--textBrownColor);
+      color: color-contrast($brown-color);
+    }
+    .color-typing-hint .chip.white {
+      background: var(--textWhiteColor);
+      color: color-contrast($white);
+    }
+    .color-typing-hint .chip.gray {
+      background: var(--textGrayColor);
+      color: color-contrast($gray-color);
+    }
+  }
+}
+
 .bbcode-toolbar {
   align-items: flex-start;
   flex-wrap: nowrap;