diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
index eb0891dc..da01214e 100644
--- a/apps/storybook/stories/public/orama-search-box.stories.tsx
+++ b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -25,7 +25,8 @@ const meta: Meta<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
         },
       },
     },
-    chatPlaceholder: {
+    searchPlaceholder: {
+      control: { type: 'text' },
       table: {
         type: {
           summary: 'string',
@@ -33,12 +34,13 @@ const meta: Meta<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
         defaultValue: { summary: '' },
       },
     },
-    searchPlaceholder: {
+    chatPlaceholder: {
+      control: { type: 'text' },
       table: {
         type: {
           summary: 'string',
         },
-        defaultValue: { summary: 'Search...' },
+        defaultValue: { summary: '' },
       },
     },
     colorScheme: {
@@ -64,22 +66,37 @@ const meta: Meta<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
 }
 export default meta
 
-const Template = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, disableChat }) => {
+const Template = ({
+  preset,
+  chatPlaceholder,
+  searchPlaceholder,
+  colorScheme,
+  disableChat,
+  suggestions,
+  open,
+  facetProperty,
+  themeConfig,
+  index,
+  sourceBaseUrl,
+  sourcesMap,
+  highlight,
+  resultMap,
+}) => {
   return html`<div>
       <div style="width: 240px">
         <orama-search-button>Search...</orama-search-button>
       </div>
       <orama-search-box
-      .open=${preset?.open}
-      .facetProperty=${preset?.facetProperty}
-      .resultMap=${preset?.resultMap}
+      .open=${open || preset?.open}
+      .facetProperty=${facetProperty || preset?.facetProperty}
+      .resultMap=${resultMap || preset?.resultMap}
       .colorScheme=${colorScheme}
-      .themeConfig=${preset.themeConfig}
-      .index=${preset.index}
+      .themeConfig=${themeConfig || preset.themeConfig}
+      .index=${index || preset.index}
       .instance=${preset.instance}
-      .suggestions=${preset?.suggestions}
-      .sourceBaseUrl=${preset?.sourceBaseUrl}
-      .sourcesMap=${preset?.sourcesMap}
+      .suggestions=${suggestions || preset?.suggestions}
+      .sourceBaseUrl=${sourceBaseUrl || preset?.sourceBaseUrl}
+      .sourcesMap=${sourcesMap || preset?.sourcesMap}
       .disableChat=${disableChat}
       .chatPlaceholder=${chatPlaceholder}
       .searchPlaceholder=${searchPlaceholder}
@@ -91,20 +108,34 @@ const Template = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, dis
     ></orama-search-box></div>`
 }
 
-const TemplateAsEmbed = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, disableChat }) => {
+const TemplateAsEmbed = ({
+  preset,
+  chatPlaceholder,
+  searchPlaceholder,
+  colorScheme,
+  disableChat,
+  open,
+  facetProperty,
+  resultMap,
+  themeConfig,
+  index,
+  sourceBaseURL,
+  suggestions,
+  sourcesMap,
+}) => {
   return html`<div style="height: 420px">
     <orama-search-box
       layout="embed"
-      .open=${preset?.open}
-      .facetProperty=${preset?.facetProperty}
-      .resultMap=${preset?.resultMap}
+      .open=${open || preset?.open}
+      .facetProperty=${facetProperty || preset?.facetProperty}
+      .resultMap=${resultMap || preset?.resultMap}
       .colorScheme=${colorScheme}
-      .themeConfig=${preset.themeConfig}
-      .index=${preset.index}
+      .themeConfig=${themeConfig || preset.themeConfig}
+      .index=${index || preset.index}
       .instance=${preset.instance}
-      .suggestions=${preset?.suggestions}
-      .sourceBaseUrl=${preset?.sourceBaseUrl}
-      .sourcesMap=${preset?.sourcesMap}
+      .suggestions=${suggestions || preset?.suggestions}
+      .sourceBaseUrl=${sourceBaseURL || preset?.sourceBaseUrl}
+      .sourcesMap=${sourcesMap || preset?.sourcesMap}
       .disableChat=${disableChat}
       .chatPlaceholder=${chatPlaceholder}
       .searchPlaceholder=${searchPlaceholder}
@@ -119,13 +150,11 @@ const TemplateAsEmbed = ({ preset, chatPlaceholder, searchPlaceholder, colorSche
 
 type Story = StoryObj<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
 
-export const SearchBox: Story = {
+export const SearchBoxAsModal: Story = {
   render: Template as any,
   args: {
     preset: 'orama',
     colorScheme: 'light',
-    searchPlaceholder: 'Search...',
-    chatPlaceholder: 'Ask me anything...',
     disableChat: false,
   },
 }
@@ -135,7 +164,6 @@ export const SearchBoxAsEmbed: Story = {
   args: {
     preset: 'orama',
     colorScheme: 'light',
-    searchPlaceholder: 'Search...',
     chatPlaceholder: 'Ask me anything...',
     disableChat: false,
   },
diff --git a/packages/ui-stencil/src/components/internal/icons.tsx b/packages/ui-stencil/src/components/internal/icons.tsx
index 034c9b97..6fb79add 100644
--- a/packages/ui-stencil/src/components/internal/icons.tsx
+++ b/packages/ui-stencil/src/components/internal/icons.tsx
@@ -9,7 +9,7 @@ interface IconProps {
 export const Icon: FunctionalComponent<IconProps> = ({ name, size = 24, color = 'black' }) => {
   const getIconSvg = (iconName: string) => {
     const icons: { [key: string]: string } = {
-      star: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      star: `<svg xmlns="http://www.w3.org/2000/svg" width=${size} height=${size} viewBox="0 0 16 16" fill="none">
           <path d="M8.1875 0.6875L9.12531 3.22189C9.78366 5.00107 11.1864 6.40384 12.9656 7.06219L15.5 8L12.9656 8.93781C11.1864 9.59616 9.78366 10.9989 9.12531 12.7781L8.1875 15.3125L7.24969 12.7781C6.59134 10.9989 5.18857 9.59616 3.40939 8.93781L0.875 8L3.40939 7.06219C5.18857 6.40384 6.59134 5.00107 7.24969 3.22189L8.1875 0.6875Z" fill="url(#paint0_radial_1183_175)"/>
           <defs>
           <radialGradient id="paint0_radial_1183_175" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.5 -9.5) rotate(141.053) scale(24.2042)">
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx
index 90f1e4e2..4d2e0129 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx
@@ -44,7 +44,7 @@ export class OramaChatButton {
           type="button"
         >
           <span class="icon-star">
-            <Icon name="star" size={14} />
+            <Icon name="star" size={16} />
           </span>
           <span class="button-label">{this.label}</span>
           <span class="icon-enter">
diff --git a/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss b/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss
index f4ab2a21..63507a7c 100644
--- a/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss
+++ b/packages/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss
@@ -7,7 +7,6 @@
   align-items: center;
   gap: var(--spacing-m, $spacing-m);
   padding: var(--radius-s, $spacing-s) var(--radius-l, $spacing-l);
-
   list-style: none;
   margin: 0;
   overflow-x: auto;
@@ -80,6 +79,7 @@
   -webkit-text-fill-color: transparent;
   width: 100%;
   border: 1px solid transparent;
+  font-family: inherit;
 
   &:focus-visible {
     outline: none;
diff --git a/packages/ui-stencil/src/components/internal/orama-embed/orama-embed.scss b/packages/ui-stencil/src/components/internal/orama-embed/orama-embed.scss
index 32d15328..3bd2b2e7 100644
--- a/packages/ui-stencil/src/components/internal/orama-embed/orama-embed.scss
+++ b/packages/ui-stencil/src/components/internal/orama-embed/orama-embed.scss
@@ -1,5 +1,5 @@
 .embed {
-  background-color: var(--background-color-secondary, background-color('secondary'));
+  background-color: var(--background-color-primary, background-color('primary'));
   border: 1px solid var(--border-color-primary, border-color('primary'));
   border-radius: var(--radius-m, $radius-m);
   inset: 0;
@@ -14,6 +14,8 @@
   flex-direction: column;
 
   @media (--md-min) {
+    background-color: var(--background-color-secondary, background-color('secondary'));
+
     orama-input {
       padding: 0;
       margin: 0;
@@ -24,4 +26,4 @@
       border-radius: var(--radius-m, $radius-m) var(--radius-m, $radius-m) 0 0;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss
index b12ee160..77e95711 100644
--- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss
+++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  width: 100%;
 
   orama-input {
     @media (--md-max) {
diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss
index f7f123a2..64a183b9 100644
--- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss
+++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss
@@ -32,6 +32,7 @@
 
 .section-active {
   display: flex;
+  overflow: hidden;
 }
 
 .section-inactive {
diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx
index 17c70add..3f9deb3f 100644
--- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx
+++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx
@@ -177,9 +177,16 @@ export class SearchBox {
 
   getSearchBox() {
     return (
-      <Fragment>
+      <div
+        class={`${
+          this.windowWidth > 1024
+            ? 'section-active'
+            : globalContext.currentTask === 'search'
+              ? 'section-active'
+              : 'section-inactive'
+        }`}
+      >
         <orama-search
-          class={`${this.windowWidth > 1024 ? 'section-active' : globalContext.currentTask === 'search' ? 'section-active' : 'section-inactive'}`}
           placeholder={this?.searchPlaceholder || 'Search...'}
           focusInput={globalContext.currentTask === 'search'}
           sourceBaseUrl={this.sourceBaseUrl}
@@ -201,7 +208,7 @@ export class SearchBox {
             />
           )}
         </orama-search>
-      </Fragment>
+      </div>
     )
   }
 
diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss
index 8977cd6c..d0080f20 100644
--- a/packages/ui-stencil/src/styles/_colors.scss
+++ b/packages/ui-stencil/src/styles/_colors.scss
@@ -3,6 +3,8 @@
 TODO: We'll make this task automatic in the future
 */
 
+@use 'sass:color';
+
 /**
 * * PRIMITIVE COLORS
 */
@@ -69,6 +71,8 @@ $semanticColors: (
 
 $elementColors: (
   'button-text': (
+    // TODO: example of how to use the color functions with semantic colors
+    // primary: color.adjust(text-color('primary', $semanticColors), $lightness: 10%),
     primary: $purple100,
     secondary: text-color('secondary', $semanticColors),
     inactive: $gray500,