diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
index 06b1f65c..5f31efa7 100644
--- a/apps/storybook/.storybook/preview.js
+++ b/apps/storybook/.storybook/preview.js
@@ -3,11 +3,17 @@ import "./../../../packages/ui-stencil/dist/orama-ui/orama-ui.css";
 
 defineCustomElements();
 
-// import global styles
-
 /** @type { import('@storybook/html').Preview } */
 const preview = {
   tags: ["autodocs"],
+  decorators: [
+    (story) => {
+      const decorator = document.createElement('div');
+      decorator.id = 'orama-ui';
+      decorator.appendChild(story());
+      return decorator;
+    }
+  ],
   parameters: {
     controls: {
       matchers: {
diff --git a/packages/ui-stencil/src/styles/globals.scss b/packages/ui-stencil/src/styles/globals.scss
index 2c0e3432..b8c56733 100644
--- a/packages/ui-stencil/src/styles/globals.scss
+++ b/packages/ui-stencil/src/styles/globals.scss
@@ -1,3 +1,5 @@
 :root {
-  @include spread-map($theme-light);
+  #orama-ui {
+    @include spread-map($theme-light);
+  }
 }