diff --git a/src/index.ts b/src/index.ts
index 1cc20b1..6580e05 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,18 +1,19 @@
-import { h, render } from 'preact';
-import { Widget } from './ui/widget.js';
 import { parseConfig } from './config.js';
+import { mountWidget, type MountMode } from './mount.js';
 import cssText from './ui/theme.css?inline';
 
-// Inject styles into shadow-free <style> on first load
-(function injectStyles() {
-  if (document.getElementById('messenzy-styles')) return;
+const GLOBAL_STYLE_ID = 'messenzy-styles';
+
+function maybeInjectGlobalStyles(mode: MountMode): void {
+  if (mode === 'shadow') return;
+  if (document.getElementById(GLOBAL_STYLE_ID)) return;
   const style = document.createElement('style');
-  style.id = 'messenzy-styles';
+  style.id = GLOBAL_STYLE_ID;
   style.textContent = cssText;
   document.head.appendChild(style);
-})();
+}
 
-function boot() {
+function boot(): void {
   const config = parseConfig();
   if (!config) {
     console.warn(
@@ -21,16 +22,9 @@ function boot() {
     return;
   }
 
-  const root =
-    document.getElementById('messenzy-root') ??
-    (() => {
-      const d = document.createElement('div');
-      d.id = 'messenzy-root';
-      document.body.appendChild(d);
-      return d;
-    })();
-
-  render(h(Widget, { config }), root);
+  const mode: MountMode = config.shadow ? 'shadow' : 'classic';
+  maybeInjectGlobalStyles(mode);
+  mountWidget(config, cssText, mode);
 }
 
 if (document.readyState === 'loading') {