diff --git a/solara/lib/core/dashboard/brands/BrandsView.js b/solara/lib/core/dashboard/brands/BrandsView.js
index a277f2d..dcb282b 100644
--- a/solara/lib/core/dashboard/brands/BrandsView.js
+++ b/solara/lib/core/dashboard/brands/BrandsView.js
@@ -1,14 +1,16 @@
+import './OnboardBottomSheet.js';
+
 class BrandsView {
     constructor() {
         this.brandList = document.getElementById('brandList');
         this.currentBrandSection = document.getElementById('currentBrandSection');
         this.currentBrandItem = document.getElementById('currentBrandItem');
-        this.onboardBrandSheet = document.getElementById('onboardBrandSheet');
         this.overlay = document.getElementById('overlay');
         this.aliasesBottomSheet = document.getElementById('aliasesBottomSheet');
         this.bottomSheet = document.getElementById('bottomSheet');
         this.confirmationDialog = document.getElementById('confirmationDialog');
         this.messageBottomSheet = document.getElementById('messageBottomSheet');
+        this.onboardSheet = document.getElementById('onboardBottomSheet');
     }
 
     createBrandItem(brand, isCurrent = false) {
@@ -29,11 +31,11 @@ class BrandsView {
                 </div>
             </div>
         `;
-        
+
         brandItem.addEventListener('click', () => {
             window.location.href = this.brandUrl(brand.key);
         });
-        
+
         const switchButton = brandItem.querySelector('.switch-button');
         if (isCurrent && brand.content_changed) {
             switchButton.textContent = "Apply Changes";
@@ -78,16 +80,14 @@ class BrandsView {
     }
 
     showOnboardBrandForm() {
-        this.onboardBrandSheet.style.display = 'block';
+        this.onboardSheet.show();
         this.overlay.style.display = 'block';
         this.overlay.onclick = () => this.hideOnboardBrandForm();
-        setTimeout(() => this.onboardBrandSheet.classList.add('show'), 10);
     }
 
     async hideOnboardBrandForm() {
-        this.onboardBrandSheet.classList.remove('show');
+        this.onboardSheet.hide();
         setTimeout(() => {
-            this.onboardBrandSheet.style.display = 'none';
             this.overlay.style.display = 'none';
         }, 300);
     }
@@ -115,10 +115,10 @@ class BrandsView {
 
         this.aliasesBottomSheet.style.display = 'block';
         this.overlay.style.display = 'block';
-        
+
         this.overlay.onclick = () => this.hideAliasesBottomSheet();
         closeAliasesBtn.onclick = () => this.hideAliasesBottomSheet();
-        
+
         setTimeout(() => this.aliasesBottomSheet.classList.add('show'), 10);
     }
 
@@ -196,7 +196,7 @@ class BrandsView {
     setOnSwitch(handler) {
         this.onSwitch = handler;
     }
-    
+
     brandUrl(brandKey) {
         return `../brand/brand.html?brand_key=${encodeURIComponent(brandKey)}&source=${this.source}`;
     }
diff --git a/solara/lib/core/dashboard/brands/OnboardBottomSheet.js b/solara/lib/core/dashboard/brands/OnboardBottomSheet.js
new file mode 100644
index 0000000..5340fe7
--- /dev/null
+++ b/solara/lib/core/dashboard/brands/OnboardBottomSheet.js
@@ -0,0 +1,53 @@
+class OnboardBottomSheet extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+    }
+
+    async connectedCallback() {
+        await this.render();
+        this.setupEventListeners();
+    }
+
+    async render() {
+        try {
+            const response = await fetch('onboard-bottom-sheet.html');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const html = await response.text();
+            this.shadowRoot.innerHTML = html;
+        } catch (error) {
+            console.error('Error loading HTML:', error);
+        }
+    }
+
+    setupEventListeners() {
+        const form = this.shadowRoot.getElementById('onboardBrandForm');
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const brandKey = this.shadowRoot.getElementById('brandKey').value;
+            const brandName = this.shadowRoot.getElementById('brandName').value;
+            this.dispatchEvent(new CustomEvent('onboard', {
+                detail: {brandKey, brandName},
+                bubbles: true,
+                composed: true
+            }));
+            this.hide();
+        });
+    }
+
+    show() {
+        const sheet = this.shadowRoot.getElementById('onboardBrandSheet');
+        sheet.style.display = 'block';
+        setTimeout(() => sheet.classList.add('show'), 10);
+    }
+
+    hide() {
+        const sheet = this.shadowRoot.getElementById('onboardBrandSheet');
+        sheet.classList.remove('show');
+        setTimeout(() => sheet.style.display = 'none', 300);
+    }
+}
+
+customElements.define('onboard-bottom-sheet', OnboardBottomSheet);
\ No newline at end of file
diff --git a/solara/lib/core/dashboard/brands/brands.html b/solara/lib/core/dashboard/brands/brands.html
index da00c92..81b475f 100644
--- a/solara/lib/core/dashboard/brands/brands.html
+++ b/solara/lib/core/dashboard/brands/brands.html
@@ -521,7 +521,7 @@ <h1>Solara Dashboard</h1>
         </button>
 
         <div class="container">
-            <div class="current-brand" id="currentBrandSection" style="   display: none;">
+            <div class="current-brand" id="currentBrandSection" style="    display: none;">
                 <h2>Current Brand</h2>
                 <div id="currentBrandItem"></div>
             </div>
@@ -562,32 +562,7 @@ <h3>Confirm Action</h3>
             </div>
         </div>
 
-        <div class="bottom-sheet" id="onboardBrandSheet">
-            <h3>Onboard New Brand</h3>
-            <form class="onboard-brand-form" id="onboardBrandForm">
-                <div class="form-group">
-                    <label for="brandKey">
-                        Brand Key
-                        <div class="tooltip">
-                            <i class="fas fa-question-circle question-icon"></i>
-                            <span class="tooltiptext">Brand key will be added to the brands.json and is used to identify the brand with a unique name. It must match the brand folder in brands.</span>
-                        </div>
-                    </label>
-                    <input type="text" id="brandKey" name="brandKey" required>
-                </div>
-                <div class="form-group">
-                    <label for="brandName">
-                        Brand Name
-                        <div class="tooltip">
-                            <i class="fas fa-question-circle question-icon"></i>
-                            <span class="tooltiptext">The brand name will be added to the brands.json and is used to identify the brand in Solara. It is not used in the actual app.</span>
-                        </div>
-                    </label>
-                    <input type="text" id="brandName" name="brandName" required>
-                </div>
-                <button type="submit" class="onboard-brand-button">Onboard Brand</button>
-            </form>
-        </div>
+        <onboard-bottom-sheet id="onboardBottomSheet"></onboard-bottom-sheet>
 
         <div class="message-bottom-sheet" id="messageBottomSheet">
             <div class="message-content" id="messageContent"></div>
diff --git a/solara/lib/core/dashboard/brands/onboard-bottom-sheet.html b/solara/lib/core/dashboard/brands/onboard-bottom-sheet.html
new file mode 100644
index 0000000..896fa78
--- /dev/null
+++ b/solara/lib/core/dashboard/brands/onboard-bottom-sheet.html
@@ -0,0 +1,111 @@
+<style>
+    .bottom-sheet {
+        display: none;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: white;
+        border-top-left-radius: 20px;
+        border-top-right-radius: 20px;
+        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+        padding: 20px;
+        transition: transform 0.3s ease-out;
+        transform: translateY(100%);
+        max-width: 700px;
+        margin: 0 auto;
+        width: 100%;
+    }
+    .bottom-sheet.show {
+        transform: translateY(0);
+    }
+    h3 {
+        color: var(--primary-color, #4A90E2);
+        margin-top: 0;
+    }
+    .onboard-brand-form {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+    .form-group {
+        display: flex;
+        flex-direction: column;
+    }
+    .form-group label {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        font-weight: bold;
+    }
+    .form-group input {
+        padding: 10px;
+        border: 1px solid var(--border-color, #E1E4E8);
+        border-radius: 5px;
+        font-size: 16px;
+    }
+    .tooltip {
+        position: relative;
+        display: inline-block;
+    }
+    .tooltip .tooltiptext {
+        visibility: hidden;
+        width: 200px;
+        background-color: #555;
+        color: #fff;
+        text-align: center;
+        border-radius: 6px;
+        padding: 5px;
+        position: absolute;
+        z-index: 1;
+        bottom: 125%;
+        left: 50%;
+        margin-left: -100px;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+    .tooltip:hover .tooltiptext {
+        visibility: visible;
+        opacity: 1;
+    }
+    .onboard-brand-button {
+        background-color: var(--primary-color, #4A90E2);
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 16px;
+        transition: background-color 0.3s ease;
+    }
+    .onboard-brand-button:hover {
+        background-color: #3a7bc8;
+    }
+</style>
+<div class="bottom-sheet" id="onboardBrandSheet">
+    <h3>Onboard New Brand</h3>
+    <form class="onboard-brand-form" id="onboardBrandForm">
+        <div class="form-group">
+            <label for="brandKey">
+                Brand Key
+                <div class="tooltip">
+                    <i class="fas fa-question-circle question-icon"></i>
+                    <span class="tooltiptext">Brand key will be added to the brands.json and is used to identify the brand with a unique name. It must match the brand folder in brands.</span>
+                </div>
+            </label>
+            <input type="text" id="brandKey" name="brandKey" required>
+        </div>
+        <div class="form-group">
+            <label for="brandName">
+                Brand Name
+                <div class="tooltip">
+                    <i class="fas fa-question-circle question-icon"></i>
+                    <span class="tooltiptext">The brand name will be added to the brands.json and is used to identify the brand in Solara. It is not used in the actual app.</span>
+                </div>
+            </label>
+            <input type="text" id="brandName" name="brandName" required>
+        </div>
+        <button type="submit" class="onboard-brand-button">Onboard Brand</button>
+    </form>
+</div>
\ No newline at end of file