diff --git a/src/contentScripts/communityConsole/threadToolbar/components/index.js b/src/contentScripts/communityConsole/threadToolbar/components/index.js
new file mode 100644
index 0000000..65b2e31
--- /dev/null
+++ b/src/contentScripts/communityConsole/threadToolbar/components/index.js
@@ -0,0 +1,65 @@
+import '@material/web/formfield/formfield.js';
+import '@material/web/switch/switch.js';
+
+import {css, html, LitElement, nothing} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
+
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+import {kEventFlattenThreadsUpdated} from '../constants.js';
+
+export default class TwptThreadToolbarInject extends LitElement {
+  static properties = {
+    options: {type: Object},
+  };
+
+  static styles = [
+    SHARED_MD3_STYLES,
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        padding-top: 1.5rem;
+        padding-left: 0.25rem;
+        padding-right: 0.25rem;
+        padding-bottom: 0.5rem;
+      }
+    `,
+  ];
+
+  nestedViewRef = createRef();
+
+  constructor() {
+    super();
+    this.options = {};
+  }
+
+  renderFlattenRepliesSwitch() {
+    if (!this.options.flattenthreads) return nothing;
+
+    return html`
+      <md-formfield label="Nested view">
+        <md-switch ${ref(this.nestedViewRef)}
+            ?selected=${!this.options?.flattenthreads_switch_enabled}
+            @click=${this._flattenThreadsChanged}>
+      </md-formfield>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.renderFlattenRepliesSwitch()}
+    `;
+  }
+
+  _flattenThreadsChanged() {
+    const enabled = !this.nestedViewRef.value.selected;
+    const e = new CustomEvent(kEventFlattenThreadsUpdated, {
+      bubbles: true,
+      composed: true,
+      detail: {enabled},
+    });
+    this.dispatchEvent(e);
+  }
+}
+window.customElements.define(
+    'twpt-thread-toolbar-inject', TwptThreadToolbarInject);