diff --git a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
index de17d545..dd7fbf25 100644
--- a/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
+++ b/packages/ui-stencil/src/components/orama-chat-box/orama-chat-box.tsx
@@ -33,7 +33,7 @@ export class ChatBox {
 
     return (
       // TODO: only dark theme supported to start
-      <Host id="orama-ui" class="theme-dark">
+      <Host id="orama-ui-chatbox" class="theme-dark">
         <orama-chat style={{ display: 'flex' }} />
       </Host>
     )
diff --git a/packages/ui-stencil/src/styles/globals.scss b/packages/ui-stencil/src/styles/globals.scss
index 5a0fb55f..a48f93a1 100644
--- a/packages/ui-stencil/src/styles/globals.scss
+++ b/packages/ui-stencil/src/styles/globals.scss
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
 
-#orama-ui {
+// selector id starts with orama-ui
+[id^='orama-ui'] {
   @include font-smoothing();
   font-weight: normal;
   text-rendering: optimizeLegibility;