diff --git a/addon/components/o-s-s/button.ts b/addon/components/o-s-s/button.ts
index f6cde2e66..f01400b1c 100644
--- a/addon/components/o-s-s/button.ts
+++ b/addon/components/o-s-s/button.ts
@@ -70,7 +70,7 @@ const SQUARE_CLASS = 'upf-square-btn';
 const DEFAULT_COUNTER_TIME = 5000;
 const DEFAULT_STEP_COUNTER_TIME = 1000;
 
-interface ButtonArgs {
+export interface OSSButtonArgs {
   skin?: string;
   size?: string;
   loading?: boolean;
@@ -87,15 +87,17 @@ interface ButtonArgs {
   };
 }
 
-export default class OSSButton extends Component<ButtonArgs> {
+export default class OSSButton<T extends OSSButtonArgs> extends Component<T> {
   @tracked DOMElement: HTMLElement | undefined;
   @tracked intervalID: ReturnType<typeof setInterval> | undefined;
   @tracked intervalState: boolean = false;
   @tracked counterTimeLeft: number = 0;
 
-  constructor(owner: unknown, args: ButtonArgs) {
+  constructor(owner: unknown, args: OSSButtonArgs, preventDefaultAssertions?: boolean) {
     super(owner, args);
 
+    if (preventDefaultAssertions) return;
+
     assert(
       '[component][OSS::Button] You must pass either a @label, an @icon or an @iconUrl argument.',
       args.label || args.icon || args.iconUrl
diff --git a/addon/components/o-s-s/currency-input.ts b/addon/components/o-s-s/currency-input.ts
index edbab6410..03bcfcb26 100644
--- a/addon/components/o-s-s/currency-input.ts
+++ b/addon/components/o-s-s/currency-input.ts
@@ -10,7 +10,7 @@ export type Currency = {
   symbol: string;
 };
 
-interface OSSCurrencyInputArgs {
+export interface OSSCurrencyInputArgs {
   currency: string;
   value: number;
   onChange(currency: string, value: number): void;
@@ -70,16 +70,18 @@ const AUTHORIZED_INPUTS = [
   'ArrowDown'
 ];
 
-export default class OSSCurrencyInput extends Component<OSSCurrencyInputArgs> {
+export default class OSSCurrencyInput<T extends OSSCurrencyInputArgs> extends Component<T> {
   private currencies = this.args.allowedCurrencies ?? PLATFORM_CURRENCIES;
 
   @tracked currencySelectorShown: boolean = false;
   @tracked filteredCurrencies: Currency[] = this.currencies;
   @tracked localValue: number = this.args.value;
 
-  constructor(owner: unknown, args: OSSCurrencyInputArgs) {
+  constructor(owner: unknown, args: OSSCurrencyInputArgs, preventDefaultAssertions?: boolean) {
     super(owner, args);
 
+    if (preventDefaultAssertions) return;
+
     if (!this.args.value && !this.args.placeholder) {
       this.localValue = 0;
     }
diff --git a/addon/components/o-s-s/infinite-select.hbs b/addon/components/o-s-s/infinite-select.hbs
index 61490c6c9..32232353c 100644
--- a/addon/components/o-s-s/infinite-select.hbs
+++ b/addon/components/o-s-s/infinite-select.hbs
@@ -1,7 +1,9 @@
 <div
   id={{this.elementId}}
   data-internal-id={{this.elementId}}
-  class="fx-col fx-gap-px-12 upf-infinite-select {{unless this.inline 'upf-infinite-select--absolute'}}"
+  class="fx-col fx-gap-px-12 upf-infinite-select
+    {{unless this.inline 'upf-infinite-select--absolute'}}
+    upf-infinite-select--{{this.skin}}"
   {{did-insert this.onRender}}
   ...attributes
 >
@@ -10,6 +12,7 @@
       @value={{this._searchKeyword}}
       @placeholder={{this.searchPlaceholder}}
       @onChange={{this.updateSearchKeyword}}
+      class="upf-infinite-select--search"
       {{on "keydown" this.handleKeyEventInput}}
       {{did-insert this.initSearchInput}}
     />
diff --git a/addon/components/o-s-s/infinite-select.stories.js b/addon/components/o-s-s/infinite-select.stories.js
index b96d5e310..e9b4edcff 100644
--- a/addon/components/o-s-s/infinite-select.stories.js
+++ b/addon/components/o-s-s/infinite-select.stories.js
@@ -11,6 +11,8 @@ const FAKE_DATA = [
   { superhero: 'Spider Man', characters: 'Peter Parker' }
 ];
 
+const SkinTypes = ['default', 'smart'];
+
 export default {
   title: 'Components/OSS::InfiniteSelect',
   component: 'infinite-select',
@@ -56,6 +58,17 @@ export default {
       },
       control: { type: 'boolean' }
     },
+    skin: {
+      description: 'Adjust the skin of the badge',
+      table: {
+        type: {
+          summary: SkinTypes.join('|')
+        },
+        defaultValue: { summary: 'default' }
+      },
+      options: SkinTypes,
+      control: { type: 'select' }
+    },
     loading: {
       type: { name: 'boolean' },
       description: 'Whether or not the initial content is loading',
@@ -159,6 +172,7 @@ const defaultArgs = {
   loadingMore: false,
   inline: false,
   enableKeyboard: false,
+  skin: 'default',
   onSelect: action('onSelect'),
   onSearch: action('onSearch'),
   onBottomReached: action('onBottomReached'),
@@ -171,7 +185,8 @@ const Template = (args) => ({
         @items={{this.items}} @itemLabel={{this.itemLabel}} @searchEnabled={{this.searchEnabled}} @onSearch={{this.onSearch}}
         @searchPlaceholder={{this.searchPlaceholder}} @onSelect={{this.onSelect}} @loading={{this.loading}}
         @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}} 
-        @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}} class="upf-align--absolute-center"/>
+        @skin={{this.skin}} @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}}
+        class="upf-align--absolute-center"/>
   `,
   context: args
 });
diff --git a/addon/components/o-s-s/infinite-select.ts b/addon/components/o-s-s/infinite-select.ts
index 63cc7e1db..ebef603a5 100644
--- a/addon/components/o-s-s/infinite-select.ts
+++ b/addon/components/o-s-s/infinite-select.ts
@@ -14,6 +14,7 @@ interface InfiniteSelectArgs {
   items: InfinityItem[];
   inline: boolean;
   enableKeyboard?: boolean;
+  skin?: 'default' | 'smart';
 
   onSelect: (item: InfinityItem) => void;
   onSearch?: (keyword: string) => void;
@@ -71,6 +72,10 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
     return this.args.inline ?? false;
   }
 
+  get skin(): 'default' | 'smart' {
+    return this.args.skin ?? 'default';
+  }
+
   @action
   onRender(): void {
     this.args.didRender?.();
diff --git a/addon/components/o-s-s/input-container.ts b/addon/components/o-s-s/input-container.ts
index 7e42cc3e5..dc5baf75c 100644
--- a/addon/components/o-s-s/input-container.ts
+++ b/addon/components/o-s-s/input-container.ts
@@ -7,7 +7,7 @@ export type FeedbackMessage = {
   value: string;
 };
 
-interface OSSInputContainerArgs {
+export interface OSSInputContainerArgs {
   value?: string;
   disabled?: boolean;
   feedbackMessage?: FeedbackMessage;
@@ -21,7 +21,7 @@ interface OSSInputContainerArgs {
 
 export const AutocompleteValues = ['on', 'off'];
 
-export default class OSSInputContainer extends Component<OSSInputContainerArgs> {
+export default class OSSInputContainer<T extends OSSInputContainerArgs> extends Component<T> {
   get feedbackMessage(): FeedbackMessage | undefined {
     if (this.args.feedbackMessage && ['error', 'warning', 'success'].includes(this.args.feedbackMessage.type)) {
       return this.args.feedbackMessage;
diff --git a/addon/components/o-s-s/number-input.ts b/addon/components/o-s-s/number-input.ts
index 9bce0d59c..f3fde026b 100644
--- a/addon/components/o-s-s/number-input.ts
+++ b/addon/components/o-s-s/number-input.ts
@@ -2,7 +2,7 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-interface OSSNumberInputArgs {
+export interface OSSNumberInputArgs {
   value?: number;
   min?: number;
   max?: number;
@@ -21,7 +21,7 @@ const DECREASE_VALUE_KEYS = ['ArrowDown', 'ArrowLeft'];
 const BASE_INPUT_PIXEL_WIDTH = 40;
 const CHAR_PIXEL_WIDTH = 7;
 
-export default class OSSNumberInput extends Component<OSSNumberInputArgs> {
+export default class OSSNumberInput<T extends OSSNumberInputArgs> extends Component<T> {
   @tracked localValue: number = this.args.value || DEFAULT_VALUE;
   @tracked reachedTooltip: string | null = null;
   @tracked inputElement: HTMLElement | null = null;
diff --git a/addon/components/o-s-s/scrollable-panel.stories.js b/addon/components/o-s-s/scrollable-panel.stories.js
index 4eb0af811..0c12e8871 100644
--- a/addon/components/o-s-s/scrollable-panel.stories.js
+++ b/addon/components/o-s-s/scrollable-panel.stories.js
@@ -45,6 +45,16 @@ export default {
         type: 'boolean'
       }
     },
+    offset: {
+      description: 'Offset in pixels from which the scrollable panel will be considered as scrolled',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' }
+      },
+      control: {
+        type: 'number'
+      }
+    },
     onBottomReached: {
       description: 'Function to be called when the scroll hits the bottom',
       table: {
@@ -68,6 +78,7 @@ const defaultArgs = {
   plain: false,
   disableShadows: false,
   hideScrollbar: false,
+  offset: 0,
   onBottomReached: action('onBottomReached')
 };
 
@@ -83,7 +94,8 @@ const Template = (args) => ({
                             @disableShadows={{this.disableShadows}}
                             @onBottomReached={{this.onBottomReached}}
                             @hideScrollbar={{this.hideScrollbar}}
-                            @horizontal={{this.horizontal}} >
+                            @horizontal={{this.horizontal}}
+                            @offset={{this.offset}} >
         <div class="fx-col fx-gap-px-12 padding-px-12">
           <div class="background-color-gray-200" style="height: 50px; width: 100%;" />
           <div class="background-color-gray-200" style="height: 50px; width: 100%;" />
@@ -105,7 +117,8 @@ const TemplateHorizontal = (args) => ({
                             @disableShadows={{this.disableShadows}}
                             @onBottomReached={{this.onBottomReached}}
                             @hideScrollbar={{this.hideScrollbar}}
-                            @horizontal={{this.horizontal}} >
+                            @horizontal={{this.horizontal}}
+                            @offset={{this.offset}} >
         <div class="fx-row fx-gap-px-12 padding-px-12" style="width: fit-content">
           <div class="background-color-gray-200" style="height: 50px; width: 100px;" />
           <div class="background-color-gray-200" style="height: 50px; width: 100px;" />
diff --git a/addon/components/o-s-s/scrollable-panel.ts b/addon/components/o-s-s/scrollable-panel.ts
index 20ba0449b..7dd2187e3 100644
--- a/addon/components/o-s-s/scrollable-panel.ts
+++ b/addon/components/o-s-s/scrollable-panel.ts
@@ -7,6 +7,7 @@ interface OSSScrollablePanelComponentSignature {
   disableShadows?: boolean;
   horizontal?: boolean;
   hideScrollbar?: boolean;
+  offset?: number;
   onBottomReached?: () => void;
 }
 
@@ -19,6 +20,10 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
 
   resizeObserver = new ResizeObserver(this.resizeObserverCallback.bind(this));
 
+  get offset(): number {
+    return this.args.offset ?? 0;
+  }
+
   @action
   initScrollListener(element: HTMLElement): void {
     this.parentElement = element;
@@ -54,7 +59,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   }
 
   private scrollListener(): void {
-    if (this.parentElement.scrollTop > 0) {
+    if (this.parentElement.scrollTop - this.offset > 0) {
       this.shadowTopVisible = true;
     } else {
       this.shadowTopVisible = false;
@@ -63,7 +68,10 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   }
 
   private displayBottomShadow(): void {
-    if (this.parentElement.scrollTop + this.parentElement.clientHeight >= this.parentElement.scrollHeight - 1) {
+    if (
+      this.parentElement.scrollTop + this.parentElement.clientHeight + this.offset >=
+      this.parentElement.scrollHeight - 1
+    ) {
       this.shadowBottomVisible = false;
     } else {
       this.shadowBottomVisible = true;
@@ -71,7 +79,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   }
 
   private horizontalScrollListener(): void {
-    if (this.parentElement.scrollLeft > 0) {
+    if (this.parentElement.scrollLeft - this.offset > 0) {
       this.shadowLeftVisible = true;
     } else {
       this.shadowLeftVisible = false;
@@ -80,7 +88,10 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   }
 
   private displayRightShadow(): void {
-    if (this.parentElement.scrollLeft + this.parentElement.clientWidth >= this.parentElement.scrollWidth - 1) {
+    if (
+      this.parentElement.scrollLeft + this.parentElement.clientWidth + this.offset >=
+      this.parentElement.scrollWidth - 1
+    ) {
       this.shadowRightVisible = false;
     } else {
       this.shadowRightVisible = true;
diff --git a/addon/components/o-s-s/skeleton.ts b/addon/components/o-s-s/skeleton.ts
index 737f1019c..ae709bb94 100644
--- a/addon/components/o-s-s/skeleton.ts
+++ b/addon/components/o-s-s/skeleton.ts
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { htmlSafe } from '@ember/template';
 
-interface OSSSkeletonArgs {
+export interface OSSSkeletonArgs {
   width?: number | string;
   height?: number | string;
   multiple?: number;
@@ -13,10 +13,12 @@ interface OSSSkeletonArgs {
 
 const RANGE_PERCENTAGE: number = 15;
 
-export default class OSSSkeleton extends Component<OSSSkeletonArgs> {
-  constructor(owner: unknown, args: OSSSkeletonArgs) {
+export default class OSSSkeleton<T extends OSSSkeletonArgs> extends Component<T> {
+  constructor(owner: unknown, args: OSSSkeletonArgs, preventDefaultAssertions?: boolean) {
     super(owner, args);
 
+    if (preventDefaultAssertions) return;
+
     if (this.args.direction) {
       assert(
         `[component][OSS::Skeleton] The @direction argument should be a value of ${['row', 'column', 'col']}`,
diff --git a/addon/components/o-s-s/smart/button.hbs b/addon/components/o-s-s/smart/button.hbs
new file mode 100644
index 000000000..62d1b97a4
--- /dev/null
+++ b/addon/components/o-s-s/smart/button.hbs
@@ -0,0 +1,26 @@
+{{! template-lint-disable u-template-lint/no-bare-button}}
+<div class="upf-smart-btn-container fx-row" ...attributes>
+  <button
+    type="button"
+    class={{this.computedSmartClasses}}
+    disabled={{@disabled}}
+    {{did-insert this.didInsert}}
+    {{on "click" this.onclick}}
+  >
+    {{#if this.loadingState}}
+      <OSS::Icon @style="solid" @icon="fa-spinner-third fa-spin" />
+      {{#if (and @label @loadingOptions.showLabel)}}
+        <span class="margin-left-px-6">{{@label}}</span>
+      {{/if}}
+    {{else}}
+      {{#if @icon}}
+        <OSS::Icon @style={{fa-icon-style @icon}} @icon={{fa-icon-value @icon}} />
+      {{else if @iconUrl}}
+        <img src={{@iconUrl}} alt="icon" />
+      {{/if}}
+      {{#if (and @label (not this.isCircle))}}
+        <span class={{if (or @icon @iconUrl) "margin-left-px-6"}}>{{@label}}</span>
+      {{/if}}
+    {{/if}}
+  </button>
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/button.stories.js b/addon/components/o-s-s/smart/button.stories.js
new file mode 100644
index 000000000..8c3aa3cae
--- /dev/null
+++ b/addon/components/o-s-s/smart/button.stories.js
@@ -0,0 +1,143 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const SkinTypes = ['primary', 'secondary'];
+const SizeTypes = ['xs', 'sm', 'md', 'lg'];
+
+export default {
+  title: 'Components/OSS::Smart::Button',
+  component: 'button',
+  argTypes: {
+    skin: {
+      description: 'Adjust appearance',
+      table: {
+        type: {
+          summary: SkinTypes.join('|')
+        },
+        defaultValue: { summary: 'primary' }
+      },
+      options: SkinTypes,
+      control: { type: 'select' }
+    },
+    size: {
+      description: 'Adjust size',
+      table: {
+        type: {
+          summary: SizeTypes.join('|')
+        },
+        defaultValue: { summary: 'null' }
+      },
+      options: SizeTypes,
+      control: { type: 'select' }
+    },
+    loading: {
+      description: 'Display loading state',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: 'false' }
+      },
+      control: { type: 'boolean' }
+    },
+    loadingOptions: {
+      description: 'Options to configure the loading state',
+      table: {
+        type: {
+          summary: '{ showLabel?: boolean }'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
+    label: {
+      description: 'Text content of the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    icon: {
+      description: 'Font Awesome class, for example: far fa-envelope-open',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    iconUrl: {
+      description: 'Url of an icon that will be shown within the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    circle: {
+      description: 'Displays the button as a circle. Useful for icon buttons.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' }
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    disabled: {
+      description: 'Disables the button',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'The smart version of the button component. Configurable & skinable.'
+      }
+    }
+  }
+};
+
+const defaultArgs = {
+  skin: 'primary',
+  size: 'md',
+  loading: false,
+  label: 'Label',
+  icon: 'far fa-envelope-open',
+  circle: false,
+  loadingOptions: undefined,
+  iconUrl: undefined,
+  disabled: false
+};
+
+const Template = (args) => ({
+  template: hbs`
+    <OSS::Smart::Button
+      @skin={{this.skin}} @size={{this.size}} @loading={{this.loading}} @label={{this.label}} @icon={{this.icon}}
+      @circle={{this.circle}} @iconUrl={{this.iconUrl}} @loadingOptions={{this.loadingOptions}} @disabled={{this.disabled}} />
+  `,
+  context: args
+});
+
+export const Default = Template.bind({});
+Default.args = defaultArgs;
+
+export const WithIconUrl = Template.bind({});
+WithIconUrl.args = {
+  ...defaultArgs,
+  ...{
+    icon: undefined,
+    iconUrl: '/@upfluence/oss-components/assets/star-icon.svg'
+  }
+};
diff --git a/addon/components/o-s-s/smart/button.ts b/addon/components/o-s-s/smart/button.ts
new file mode 100644
index 000000000..d7e18e9b0
--- /dev/null
+++ b/addon/components/o-s-s/smart/button.ts
@@ -0,0 +1,53 @@
+import { assert } from '@ember/debug';
+import OSSButton, { type OSSButtonArgs } from '../button';
+
+type SmartSkinType = 'primary' | 'secondary';
+
+type SmartSkinDefType = {
+  [key in SmartSkinType]: string;
+};
+
+const SmartSkinDefinition: SmartSkinDefType = {
+  primary: 'primary',
+  secondary: 'secondary'
+};
+
+const SMART_BASE_CLASS = 'upf-smart-btn';
+const SMART_SQUARE_CLASS = 'upf-smart-square-btn';
+
+interface OSSSmartButtonArgs extends OSSButtonArgs {
+  disabled?: boolean;
+  circle?: boolean;
+}
+
+export default class OSSSmartButton extends OSSButton<OSSSmartButtonArgs> {
+  constructor(owner: unknown, args: OSSSmartButtonArgs) {
+    super(owner, args, true);
+
+    assert(
+      '[component][OSS::Smart::Button] You must pass either a @label, an @icon or an @iconUrl argument.',
+      args.label || args.icon || args.iconUrl
+    );
+  }
+
+  get isCircle(): boolean {
+    return this.args.square || this.args.circle || false;
+  }
+
+  get smartSkin(): string {
+    if (!this.args.skin) {
+      return SmartSkinDefinition.primary;
+    }
+    return SmartSkinDefinition[this.args.skin as SmartSkinType] ?? SmartSkinDefinition.primary;
+  }
+
+  get computedSmartClasses(): string {
+    let classes = [this.isCircle ? SMART_SQUARE_CLASS : SMART_BASE_CLASS, `upf-smart-btn--${this.smartSkin}`];
+
+    if (this.size) {
+      classes.push(this.isCircle ? `upf-smart-square-btn--${this.size}` : `upf-smart-btn--${this.size}`);
+    }
+
+    return classes.join(' ');
+  }
+}
diff --git a/addon/components/o-s-s/smart/feedback.hbs b/addon/components/o-s-s/smart/feedback.hbs
new file mode 100644
index 000000000..aba1704e3
--- /dev/null
+++ b/addon/components/o-s-s/smart/feedback.hbs
@@ -0,0 +1,23 @@
+<div class="oss-smart__feedback {{this.currentStateClass}} fx-row fx-gap-px-18 fx-xalign-center" ...attributes>
+  <div>
+    {{yield to="icon"}}
+  </div>
+  <div class="oss-smart__feedback__content">
+    {{#if @loading}}
+      <div class="fx-col fx-1 fx-gap-px-10">
+        <OSS::Smart::Skeleton @width="75%" height="10px" />
+        <OSS::Smart::Skeleton @width="45%" height="10px" />
+      </div>
+    {{else}}
+      {{#if @contentString}}
+        <span class="oss-smart__feedback__content__text">{{@contentString}}</span>
+      {{else if @contentArray}}
+        <span class="oss-smart__feedback__content__text">
+          {{#each @contentArray as |item|}}
+            {{item}}
+          {{/each}}
+        </span>
+      {{/if}}
+    {{/if}}
+  </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/feedback.stories.js b/addon/components/o-s-s/smart/feedback.stories.js
new file mode 100644
index 000000000..407ba5068
--- /dev/null
+++ b/addon/components/o-s-s/smart/feedback.stories.js
@@ -0,0 +1,81 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Components/OSS::Smart::Feedback',
+  component: 'oss-smart-feedback',
+  argTypes: {
+    loading: {
+      description: 'Whether the feedback component is in a loading state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    contentString: {
+      description: 'Text content to display when not loading',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' }
+      },
+      control: { type: 'text' }
+    },
+    contentArray: {
+      description: 'Array of text lines to display instead of a single string',
+      table: {
+        type: { summary: 'string[]' },
+        defaultValue: { summary: '[]' }
+      },
+      control: { type: 'object' }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Component used to display feedback with optional loading skeletons and dynamic content (string or array).'
+      },
+      iframeHeight: 250
+    }
+  }
+};
+
+const defaultArgs = {
+  loading: false,
+  contentString: 'This is feedback content.',
+  contentArray: []
+};
+
+const Template = (args) => ({
+  template: hbs`
+    <div class="bg-color-white padding-px-6">
+      <OSS::Smart::Feedback 
+        @loading={{this.loading}} 
+        @contentString={{this.contentString}} 
+        @contentArray={{this.contentArray}} 
+      >
+        <:icon>
+          <div class="w-px-40 h-px-40 bg-color-blue border-radius-px-6"></div>
+        </:icon>
+      </OSS::Smart::Feedback>
+    </div>
+  `,
+  context: args
+});
+
+export const Default = Template.bind({});
+Default.args = defaultArgs;
+
+export const WithArrayContent = Template.bind({});
+WithArrayContent.args = {
+  loading: false,
+  contentArray: ['Line 1', 'Line 2', 'Line 3'],
+  contentString: ''
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+  contentString: '',
+  contentArray: []
+};
diff --git a/addon/components/o-s-s/smart/feedback.ts b/addon/components/o-s-s/smart/feedback.ts
new file mode 100644
index 000000000..2b2671a68
--- /dev/null
+++ b/addon/components/o-s-s/smart/feedback.ts
@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+interface OSSSmartFeedbackArgs {
+  loading: boolean;
+  contentString?: string;
+  contentArray?: string[];
+}
+
+export default class OSSSmartFeedback extends Component<OSSSmartFeedbackArgs> {
+  get currentStateClass(): string | null {
+    if (this.args.loading) return 'oss-smart__feedback__loading';
+    if (this.args.contentString || this.args.contentArray) return 'oss-smart__generated';
+    return null;
+  }
+}
diff --git a/addon/components/o-s-s/smart/immersive/currency-input.hbs b/addon/components/o-s-s/smart/immersive/currency-input.hbs
new file mode 100644
index 000000000..6d994be85
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/currency-input.hbs
@@ -0,0 +1,72 @@
+<div
+  class={{this.computedClasses}}
+  id={{this.inputId}}
+  {{did-insert this.registerElement}}
+  {{did-update this.runAnimationOnLoadEnd @loading}}
+  ...attributes
+>
+  <div class="smart-immersive-currency-input fx-row">
+    <div
+      class="currency-selector fx-row fx-gap-px-12 fx-malign-space-between fx-xalign-center"
+      role={{if this.allowCurrencyUpdate "button" "img"}}
+      {{on "click" this.toggleCurrencySelector}}
+    >
+      <div class="fx-col">
+        <div class="fx-row fx-gap-px-9">
+          <span>{{this.selectedCurrencySymbol}}</span>
+        </div>
+      </div>
+
+      {{#if this.allowCurrencyUpdate}}
+        <OSS::Icon
+          @icon="{{if this.currencySelectorShown 'fa-chevron-up' 'fa-chevron-down'}}"
+          class="margin-left-px-6"
+        />
+      {{/if}}
+    </div>
+    {{#if @loading}}
+      <div class="loading-placeholder fx-row fx-xalign-center">
+        <span class="rainbow-text-animated">{{@placeholder}}</span>
+      </div>
+    {{else}}
+      <div class="input-container">
+        <span class="hidden-span">{{or @value @placeholder}}</span>
+        <Input
+          class="displayed-input"
+          @value={{@value}}
+          @type="text"
+          min="0"
+          autocomplete="off"
+          placeholder={{this.placeholder}}
+          disabled={{@disabled}}
+          {{on "keydown" this.onlyNumeric}}
+          {{on "keyup" (fn this.onChange @currency @value)}}
+          {{on "paste" this.handlePaste}}
+        />
+      </div>
+    {{/if}}
+  </div>
+  {{#if this.currencySelectorShown}}
+    {{#in-element this.portalTarget insertBefore=null}}
+      <OSS::InfiniteSelect
+        @items={{this.filteredCurrencies}}
+        @onSearch={{this.onSearch}}
+        @onSelect={{this.onSelect}}
+        @searchPlaceholder={{t "oss-components.currency-input.search"}}
+        class={{concat "margin-top-px-0 " this.dropdownAddressableClass}}
+        id={{this.portalId}}
+        {{on-click-outside this.hideCurrencySelector}}
+      >
+        <:option as |currency|>
+          <div class="fx-row fx-xalign-center {{if (eq this.selectedCurrency currency) 'row-selected'}}">
+            <span class="symbol text-color-default-light margin-left-xx-sm">{{currency.symbol}}</span>
+            <span class="text-color-default-light margin-left-xx-sm fx-1">{{currency.code}}</span>
+            {{#if (eq this.selectedCurrency currency)}}
+              <OSS::Icon @icon="fa-check" class="font-color-primary-500 padding-right-px-6" />
+            {{/if}}
+          </div>
+        </:option>
+      </OSS::InfiniteSelect>
+    {{/in-element}}
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/immersive/currency-input.stories.js b/addon/components/o-s-s/smart/immersive/currency-input.stories.js
new file mode 100644
index 000000000..bd26496ba
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/currency-input.stories.js
@@ -0,0 +1,98 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/OSS::Smart::Immersive::CurrencyInput',
+  component: 'currency-input',
+  argTypes: {
+    currency: {
+      description: 'The currency applied to the component (EUR, USD, etc.)',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'USD' }
+      },
+      control: { type: 'text' }
+    },
+    value: {
+      description: 'The value applied to the input',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: 0 }
+      },
+      control: { type: 'number' }
+    },
+    placeholder: {
+      description: 'Placeholder for the number input when no value is passed',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: null }
+      },
+      control: { type: 'text' }
+    },
+    onChange: {
+      type: { required: true },
+      description: 'A callback that sends the modifications of the value & the currency back to the parent component',
+      table: {
+        category: 'Actions',
+        type: { summary: 'onChange(currency: string, value: number): void' }
+      }
+    },
+    allowedCurrencies: {
+      description: 'Allows passing a custom set of selectable currencies to the component.',
+      table: {
+        type: {
+          summary: '{ code: string, symbol: string }[]'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'array' }
+    }
+  },
+  hasError: {
+    description: 'Displays an error border around the input.',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' }
+    },
+    control: {
+      type: 'boolean'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A smart and immersive currency selector & input, used to set prices.'
+      },
+      iframeHeight: 200
+    }
+  }
+};
+
+const defaultArgs = {
+  value: 42,
+  currency: 'USD',
+  onChange: action('onChange'),
+  hasError: false,
+  allowedCurrencies: undefined,
+  placeholder: undefined
+};
+
+const Template = (args) => ({
+  template: hbs`
+      <div style="width:270px">
+        <OSS::Smart::Immersive::CurrencyInput @value={{this.value}} @currency={{this.currency}} @onChange={{this.onChange}}
+                                              @hasError={{this.hasError}} @allowedCurrencies={{this.allowedCurrencies}}
+                                              @placeholder={{this.placeholder}} />
+      </div>
+  `,
+  context: args
+});
+
+export const BasicUsage = Template.bind({});
+BasicUsage.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/immersive/currency-input.ts b/addon/components/o-s-s/smart/immersive/currency-input.ts
new file mode 100644
index 000000000..025557efe
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/currency-input.ts
@@ -0,0 +1,92 @@
+import { assert } from '@ember/debug';
+import OSSCurrencyInput, { type OSSCurrencyInputArgs } from '../../currency-input';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+import { isEmpty } from '@ember/utils';
+import { guidFor } from '@ember/object/internals';
+import attachDropdown from '@upfluence/oss-components/utils/attach-dropdown';
+import { scheduleOnce } from '@ember/runloop';
+import { isTesting } from '@embroider/macros';
+
+interface OSSSmartImmersiveCurrencyInputArgs extends OSSCurrencyInputArgs {
+  loading: boolean;
+  hasError?: boolean;
+  addressableAs?: string;
+}
+
+export default class OSSSmartImmersiveCurrencyInput extends OSSCurrencyInput<OSSSmartImmersiveCurrencyInputArgs> {
+  declare portalTarget: HTMLElement;
+  portalId: string = guidFor(this);
+
+  @tracked declare element: HTMLElement;
+
+  constructor(owner: unknown, args: OSSCurrencyInputArgs) {
+    super(owner, args, true);
+
+    assert(
+      '[component][OSS::Smart::Immersive::CurrencyInput] The parameter @onChange of type function is mandatory',
+      typeof this.args.onChange === 'function'
+    );
+  }
+
+  get placeholder(): string {
+    return this.args.placeholder ?? '';
+  }
+
+  get computedClasses(): string {
+    const classes = ['smart-immersive-currency-input-container'];
+
+    if (this.args.value && !this.args.loading) {
+      classes.push('smart-immersive-currency-input-container--filled');
+    }
+    if (this.args.hasError) {
+      classes.push('smart-immersive-currency-input-container--errored');
+    }
+    return classes.join(' ');
+  }
+
+  @action
+  onChange(currency: string, value: number): void {
+    this.args.onChange(currency, value);
+  }
+
+  @action
+  registerElement(element: HTMLElement): void {
+    this.portalTarget = isTesting() ? element : document.body;
+    this.element = element;
+  }
+
+  @action
+  runAnimationOnLoadEnd(): void {
+    if (this.element && this.args.loading === false && !isEmpty(this.args.value)) {
+      runSmartGradientAnimation(this.element);
+    }
+  }
+
+  @action
+  toggleCurrencySelector(e: any): void {
+    super.toggleCurrencySelector(e);
+
+    scheduleOnce('afterRender', this, this.setupDropdownAutoplacement);
+  }
+
+  get dropdownAddressableClass(): string {
+    return this.args.addressableAs ? `${this.args.addressableAs}__dropdown` : '';
+  }
+
+  cleanupDrodpownAutoplacement?: () => void;
+
+  private setupDropdownAutoplacement(): void {
+    const referenceTarget = this.element.querySelector('.currency-selector');
+    const floatingTarget = document.querySelector(`#${this.portalId}`);
+
+    if (referenceTarget && floatingTarget) {
+      this.cleanupDrodpownAutoplacement = attachDropdown(
+        referenceTarget as HTMLElement,
+        floatingTarget as HTMLElement,
+        { maxHeight: 200, maxWidth: 320, placement: 'bottom-start', fallbackPlacements: ['top-start'] }
+      );
+    }
+  }
+}
diff --git a/addon/components/o-s-s/smart/immersive/input.hbs b/addon/components/o-s-s/smart/immersive/input.hbs
new file mode 100644
index 000000000..ef3839a64
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/input.hbs
@@ -0,0 +1,40 @@
+<OSS::InputContainer
+  @feedbackMessage={{@feedbackMessage}}
+  class={{this.computedClasses}}
+  {{did-insert this.registerElement}}
+  {{did-update this.runAnimationOnLoadEnd @loading}}
+  ...attributes
+>
+  <:input>
+    <div class="smart-immersive--input-container">
+      {{#if (has-block "prefix")}}
+        <div class="prefix">
+          {{yield to="prefix"}}
+        </div>
+      {{/if}}
+      {{#if @loading}}
+        <div class="upf-input loading-placeholder fx-row fx-xalign-center">
+          <span class="smart_text_animated">{{@placeholder}}</span>
+        </div>
+      {{else}}
+        <div class="smart-immersive-input-sizer">
+          <span class="smart-immersive-span-placeholder">{{or @value @placeholder}}</span>
+          <Input
+            @value={{@value}}
+            @type={{this.type}}
+            placeholder={{this.placeholder}}
+            disabled={{@disabled}}
+            class="smart-immersive--input"
+            aria-label="input"
+            {{on "input" (fn this.onChange @value)}}
+          />
+        </div>
+      {{/if}}
+      {{#if (has-block "suffix")}}
+        <div class="suffix">
+          {{yield to="suffix"}}
+        </div>
+      {{/if}}
+    </div>
+  </:input>
+</OSS::InputContainer>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/immersive/input.stories.js b/addon/components/o-s-s/smart/immersive/input.stories.js
new file mode 100644
index 000000000..a0f605cb4
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/input.stories.js
@@ -0,0 +1,136 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/OSS::Smart::Immersive::Input',
+  component: 'input',
+  argTypes: {
+    value: {
+      description: 'Value of the input',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    type: {
+      description: 'The input type',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'text' }
+      },
+      control: { type: 'text' }
+    },
+    disabled: {
+      description: 'Disable the default input (when not passing an input named block)',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    placeholder: {
+      description: 'Placeholder of the input',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    feedbackMessage: {
+      description: 'A success, warning or error message that will be displayed below the input-group.',
+      table: {
+        type: {
+          summary: '{ type: string, value: string }'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
+    hasError: {
+      description:
+        'Allows setting the error style on the input without showing an error message. Useful for form validation.',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'boolean' }
+    },
+    onChange: {
+      description: 'Method called every time the input is updated',
+      table: {
+        category: 'Actions',
+        type: {
+          summary: 'onChange(value: string): void'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'The smart & immersive version of the input component. Configurable.'
+      }
+    }
+  }
+};
+
+const defaultArgs = {
+  value: 'John',
+  disabled: false,
+  type: undefined,
+  placeholder: 'this is the placeholder',
+  errorMessage: undefined,
+  onChange: action('onChange')
+};
+
+const DefaultUsageTemplate = (args) => ({
+  template: hbs`
+    <OSS::Smart::Immersive::Input @value={{this.value}} @disabled={{this.disabled}} @placeholder={{this.placeholder}} @type={{this.type}}
+                              @errorMessage={{this.errorMessage}} @onChange={{this.onChange}} />
+  `,
+  context: args
+});
+
+export const BasicUsage = DefaultUsageTemplate.bind({});
+BasicUsage.args = defaultArgs;
+
+const PrefixUsageTemplate = (args) => ({
+  template: hbs`
+      <OSS::Smart::Immersive::Input @value={{this.value}} @disabled={{this.disabled}} @placeholder={{this.placeholder}} @type={{this.type}}
+                               @errorMessage={{this.errorMessage}} @onChange={{this.onChange}}>
+        <:prefix>
+          <i class="fas fa-user" />
+        </:prefix>
+      </OSS::Smart::Immersive::Input>
+  `,
+  context: args
+});
+
+export const PrefixUsage = PrefixUsageTemplate.bind({});
+PrefixUsage.args = defaultArgs;
+
+const SuffixUsageTemplate = (args) => ({
+  template: hbs`
+      <OSS::Smart::Immersive::Input @value={{this.value}} @disabled={{this.disabled}} @placeholder={{this.placeholder}} @type={{this.type}}
+                               @errorMessage={{this.errorMessage}} @onChange={{this.onChange}}>
+        <:suffix>
+          <i class="fas fa-user" />
+        </:suffix>
+      </OSS::Smart::Immersive::Input>
+  `,
+  context: args
+});
+
+export const SuffixUsage = SuffixUsageTemplate.bind({});
+SuffixUsage.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/immersive/input.ts b/addon/components/o-s-s/smart/immersive/input.ts
new file mode 100644
index 000000000..3da16099c
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/input.ts
@@ -0,0 +1,54 @@
+import { action } from '@ember/object';
+import { isEmpty } from '@ember/utils';
+import { tracked } from '@glimmer/tracking';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+import type { OSSInputContainerArgs } from '../../input-container';
+import OSSInputContainer from '../../input-container';
+
+interface OSSSmartImmersiveInputComponentSignature extends OSSInputContainerArgs {
+  value: string;
+  loading: boolean;
+}
+
+export default class OSSSmartImmersiveInputComponent extends OSSInputContainer<OSSSmartImmersiveInputComponentSignature> {
+  @tracked declare element: HTMLElement;
+
+  get placeholder(): string {
+    return this.args.placeholder ?? '';
+  }
+
+  get computedClasses(): string {
+    const classes = ['smart-immersive-input-container'];
+
+    if (this.args.value) {
+      classes.push('smart-immersive-input-container--filled');
+    }
+    if (this.args.hasError) {
+      classes.push('smart-immersive-input-container--errored');
+    }
+    if (this.feedbackMessage) {
+      classes.push(`smart-immersive-input-container--${this.feedbackMessage.type}`);
+    }
+    return classes.join(' ');
+  }
+
+  @action
+  onChange(_: string, event: Event): void {
+    if (this.args.onChange) {
+      const target = event.target as HTMLInputElement;
+      this.args.onChange(target.value);
+    }
+  }
+
+  @action
+  registerElement(element: HTMLElement): void {
+    this.element = element;
+  }
+
+  @action
+  runAnimationOnLoadEnd(): void {
+    if (this.element && this.args.loading === false && !isEmpty(this.args.value)) {
+      runSmartGradientAnimation(this.element);
+    }
+  }
+}
diff --git a/addon/components/o-s-s/smart/immersive/logo.hbs b/addon/components/o-s-s/smart/immersive/logo.hbs
new file mode 100644
index 000000000..d407b9025
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/logo.hbs
@@ -0,0 +1,19 @@
+<div
+  class={{this.computedClass}}
+  {{did-update this.handleLoadingUpdate @loading}}
+  {{did-insert this.registerElement}}
+  ...attributes
+>
+  {{#if @editable}}
+    <div class="edit-overlay fx-row fx-malign-center fx-xalign-center" role="button" {{on "click" @onEdit}}>
+      <OSS::Icon @icon="fa-pen" />
+    </div>
+  {{/if}}
+  {{#if (eq this.logoMode "icon")}}
+    <div class="smart-logo-icon fx-row fx-malign-center fx-xalign-center {{this.logoColor}}">
+      <OSS::Icon @icon="fa-{{this.logoIcon}}" @style="duotone" />
+    </div>
+  {{else}}
+    <img class="smart-logo-image" src={{or @url this.fallbackSvgUrl}} onError={{this.onError}} alt="Smart branding" />
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/immersive/logo.stories.js b/addon/components/o-s-s/smart/immersive/logo.stories.js
new file mode 100644
index 000000000..b962ef351
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/logo.stories.js
@@ -0,0 +1,150 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { LOGO_COLORS, LOGO_ICONS } from '../../../../../app/utils/logo-config';
+
+export default {
+  title: 'Components/OSS::Smart::Immersive::Logo',
+  component: 'oss-smart-immersive-logo',
+  argTypes: {
+    icon: {
+      name: 'Icon',
+      description: 'icon name and color for icon mode (e.g., "rabbit:orange")',
+      table: { disable: false },
+      control: { type: 'text' }
+    },
+    iconName: {
+      name: 'Icon Name',
+      description: 'Name of the icon to display, concatenated with iconColor to form "iconName:iconColor"',
+      control: {
+        type: 'select',
+        options: LOGO_ICONS
+      }
+    },
+    iconColor: {
+      name: 'Icon Color',
+      description: 'Color of the icon to display, concatenated with iconName to form "iconName:iconColor"',
+      control: {
+        type: 'select',
+        options: LOGO_COLORS
+      }
+    },
+
+    url: {
+      description: 'URL of the image for image mode',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    editable: {
+      description: 'Whether the logo is editable and shows an overlay',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    loading: {
+      description: 'Whether the logo is in a loading state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    size: {
+      description: 'Allow to define the size of the container',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' }
+      },
+      control: {
+        type: 'select',
+        options: ['sm', 'md', 'lg']
+      }
+    },
+    hasError: {
+      description: 'Display an error border around the component.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    onEdit: {
+      description: 'Action triggered when clicking the edit overlay',
+      table: {
+        category: 'Actions',
+        type: { summary: '() => void' }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Smart immersive logo component which supports icon or image display and editable overlay.'
+      }
+    }
+  }
+};
+
+const Template = ({ iconName, iconColor, ...rest }) => {
+  const icon = iconName && iconColor ? `${iconName}:${iconColor}` : undefined;
+
+  return {
+    template: hbs`
+      <div style="width: 350px; background-color: var(--color-gray-50); padding: var(--spacing-px-24);">
+        <OSS::Smart::Immersive::Logo
+          @icon={{this.icon}}
+          @url={{this.url}}
+          @editable={{this.editable}}
+          @loading={{this.loading}}
+          @size={{this.size}}
+          @hasError={{this.hasError}}
+          @onEdit={{this.onEdit}}
+        />
+      </div>
+    `,
+    context: {
+      ...rest,
+      icon
+    }
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  iconName: 'rabbit',
+  iconColor: 'orange',
+  url: undefined,
+  editable: false,
+  loading: false,
+  size: 'md',
+  hasError: false,
+  onEdit: action('onEdit')
+};
+
+export const Editable = Template.bind({});
+Editable.args = {
+  ...Default.args,
+  editable: true
+};
+
+export const ImageMode = Template.bind({});
+ImageMode.args = {
+  ...Default.args,
+  url: 'https://example.com/logo.png'
+};
+
+export const LoadingState = Template.bind({});
+LoadingState.args = {
+  ...Default.args,
+  loading: true
+};
+
+export const OversizeState = Template.bind({});
+OversizeState.args = {
+  ...Default.args,
+  oversize: true
+};
diff --git a/addon/components/o-s-s/smart/immersive/logo.ts b/addon/components/o-s-s/smart/immersive/logo.ts
new file mode 100644
index 000000000..235f3b90e
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/logo.ts
@@ -0,0 +1,93 @@
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+
+const FALLBACK_SVG_URL = '/assets/images/picture-frame.svg';
+type size = 'sm' | 'md' | 'lg';
+
+interface OSSSmartImmersiveLogoArgs {
+  icon?: string;
+  url?: string;
+  editable: boolean;
+  loading?: boolean;
+  hasError?: boolean;
+  size?: size;
+  onEdit(): void;
+}
+
+const BASE_COMPONENT_CLASS = 'oss-smart__immersive-icon-container';
+
+export default class OSSSmartImmersiveLogoComponent extends Component<OSSSmartImmersiveLogoArgs> {
+  @tracked declare element: HTMLElement;
+  fallbackSvgUrl = FALLBACK_SVG_URL;
+
+  constructor(owner: unknown, args: OSSSmartImmersiveLogoArgs) {
+    super(owner, args);
+
+    if (!args.url && args.icon) {
+      const parts = args.icon.split(':');
+      if (parts) {
+        assert(
+          `Invalid icon format "${args.icon}". Expected format is "iconName:colorName".`,
+          parts.length === 2 &&
+            typeof parts[0] === 'string' &&
+            typeof parts[1] === 'string' &&
+            parts[0].trim().length > 0 &&
+            parts[1].trim().length > 0
+        );
+      }
+    }
+  }
+
+  get size(): size {
+    return this.args.size ?? 'md';
+  }
+
+  get computedClass(): string {
+    const classes = [BASE_COMPONENT_CLASS];
+
+    if (this.args.loading) {
+      classes.push(`${BASE_COMPONENT_CLASS}--generating`);
+    }
+    if (this.args.hasError) {
+      classes.push(`${BASE_COMPONENT_CLASS}--errored`);
+    }
+    if (this.size) {
+      classes.push(`${BASE_COMPONENT_CLASS}--size-${this.size}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  get logoColor(): string | null {
+    return this.args.icon ? `smart-logo-icon-color_${this.args.icon.split(':')[1]}` : null;
+  }
+
+  get logoIcon(): string | null {
+    return this.args.icon?.split(':')[0] ?? null;
+  }
+
+  get logoMode(): 'icon' | 'image' {
+    return this.args.url || !this.args.icon ? 'image' : 'icon';
+  }
+
+  @action
+  handleLoadingUpdate(): void {
+    if (this.args.loading === false && !isBlank(this.args.url ?? this.args.icon)) {
+      runSmartGradientAnimation(this.element);
+    }
+  }
+
+  @action
+  registerElement(element: HTMLElement): void {
+    this.element = element;
+  }
+
+  @action
+  onError(event: Event): void {
+    (<HTMLImageElement>event.target).src = FALLBACK_SVG_URL;
+  }
+}
diff --git a/addon/components/o-s-s/smart/immersive/select.hbs b/addon/components/o-s-s/smart/immersive/select.hbs
new file mode 100644
index 000000000..8eaf4082e
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/select.hbs
@@ -0,0 +1,69 @@
+<div
+  class="{{this.computedClasses}}"
+  data-toggle="oss-dropdown"
+  {{did-insert this.registerContainer}}
+  {{did-insert (fn this.ensureBlockPresence (has-block "selected-item") (has-block "option-item"))}}
+  {{did-update this.runAnimationOnLoadEnd @loading}}
+  {{will-destroy this.disconnectObserver}}
+  ...attributes
+>
+  {{#if @loading}}
+    <div class="upf-input loading-placeholder fx-row fx-xalign-center">
+      <span class="smart_text_animated">{{@placeholder}}</span>
+    </div>
+  {{else}}
+    <div class="upf-power-select__array-container" role="button" {{on "click" this.toggleDropdown}}>
+      <div class="upf-input fx-row padding-px-6 {{if this.isOpen 'active'}}">
+        <div class="fx-row fx-xalign-center fx-1 fx-gap-px-6 fx-wrap">
+          {{#each this.values as |selectedItem|}}
+            <div class="select-smart-item" style={{this.computedSmartItemStyle}}>
+              {{yield selectedItem to="selected-item"}}
+            </div>
+          {{else}}
+            <span class="font-size-md font-color-gray-400">
+              {{@placeholder}}
+            </span>
+          {{/each}}
+        </div>
+      </div>
+    </div>
+  {{/if}}
+
+  {{#if this.isOpen}}
+    {{#in-element this.portalTarget insertBefore=null}}
+      <OSS::InfiniteSelect
+        @skin="smart"
+        @items={{@items}}
+        @onSearch={{@onSearch}}
+        @inline={{false}}
+        @onSelect={{this.onSelect}}
+        @searchPlaceholder={{@searchPlaceholder}}
+        @loading={{@loading}}
+        @loadingMore={{@loadingMore}}
+        @onBottomReached={{@onBottomReached}}
+        @enableKeyboard={{true}}
+        @searchEnabled={{@searchEnabled}}
+        class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
+        id={{this.portalId}}
+        {{on "click" this.noop}}
+        {{on-click-outside this.onClickOutside useCapture=@captureClickOutside}}
+      >
+        <:option as |item|>
+          <div
+            class="item-wrapper fx-row fx-xalign-center fx-gap-px-6
+              {{unless @multiple 'fx-malign-space-between'}}
+              {{if (this.isSelected value=item.value) 'selected'}}"
+          >
+            {{#if (and @multiple (not @hideCheckboxes))}}
+              <OSS::Checkbox @checked={{this.isSelected value=item.value}} @onChange={{fn this.onSelect item}} />
+            {{/if}}
+            {{yield item to="option-item"}}
+            {{#if (and (not @multiple) (this.isSelected value=item.value))}}
+              <OSS::Icon @icon="fa-check" class="font-color-primary-500 padding-right-px-6" />
+            {{/if}}
+          </div>
+        </:option>
+      </OSS::InfiniteSelect>
+    {{/in-element}}
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/immersive/select.stories.js b/addon/components/o-s-s/smart/immersive/select.stories.js
new file mode 100644
index 000000000..22707f3dd
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/select.stories.js
@@ -0,0 +1,207 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/OSS::Smart::Immersive::Select',
+  component: 'oss-smart-immersive-select',
+  argTypes: {
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Text displayed when no value is selected.',
+      table: { defaultValue: { summary: 'undefined' } },
+      control: { type: 'text' }
+    },
+    values: {
+      name: 'Values',
+      description: 'Selected values for multi-select mode.',
+      table: {
+        type: {
+          summary: '<Array<String>>'
+        },
+        defaultValue: { summary: '[]' }
+      },
+      control: { type: 'array' }
+    },
+    loading: {
+      name: 'Loading',
+      type: { name: 'boolean' },
+      description: 'Enable the loading state.',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    multiple: {
+      name: 'Multiple',
+      type: { name: 'boolean' },
+      description: 'Allow multiple selections.',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    hideCheckboxes: {
+      name: 'Hide Checkboxes',
+      type: { name: 'boolean' },
+      description: 'Hide checkboxes in multiple selection mode.',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    searchEnabled: {
+      name: 'Search Enabled',
+      type: { name: 'boolean' },
+      description: 'Enable the search functionality.',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: true }
+      },
+      control: { type: 'boolean' }
+    },
+    items: {
+      name: 'Items',
+      description: 'Array of selectable items, each with a value and label.',
+      table: {
+        type: {
+          summary: '<Array<{ value: string, label: string }>>'
+        },
+        defaultValue: { summary: '[]' }
+      },
+      control: { type: 'array' }
+    },
+    onSearch: {
+      description: 'Action triggered when the search field is edited.',
+      table: {
+        category: 'Actions',
+        type: { summary: '() => void' }
+      }
+    },
+    onChange: {
+      description: 'Action triggered when a value is selected.',
+      table: {
+        category: 'Actions',
+        type: { summary: '() => void' }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A customizable select component for immersive experiences, supporting single or multiple selection, search, and loading states.'
+      }
+    }
+  }
+};
+
+const Template = ({ iconName, iconColor, ...rest }) => {
+  const icon = iconName && iconColor ? `${iconName}:${iconColor}` : undefined;
+
+  return {
+    template: hbs`
+      <div style="width: 350px; background-color: var(--color-gray-50); padding: var(--spacing-px-24);">
+        <OSS::Smart::Immersive::Select
+          @placeholder={{this.placeholder}}
+          @values={{this.values}}
+          @loading={{this.loading}}
+          @items={{this.items}}
+          @onSearch={{this.onSearch}}
+          @onChange={{this.onChange}}
+          @multiple={{this.multiple}}
+        >
+          <:selected-item as |item|>{{item}}</:selected-item>
+          <:option-item as |item|>
+            <div class="text-ellipsis" {{enable-tooltip title=item.label displayOnlyOnOverflow=true}}>
+              {{item.label}}
+            </div>
+          </:option-item>
+        </OSS::Smart::Immersive::Select>
+      </div>
+    `,
+    context: {
+      ...rest,
+      icon
+    }
+  };
+};
+
+const TemplateSingle = ({ iconName, iconColor, ...rest }) => {
+  const icon = iconName && iconColor ? `${iconName}:${iconColor}` : undefined;
+
+  return {
+    template: hbs`
+      <div style="width: 350px; background-color: var(--color-gray-50); padding: var(--spacing-px-24);">
+        <OSS::Smart::Immersive::Select
+          @placeholder={{this.placeholder}}
+          @values={{this.values}}
+          @loading={{this.loading}}
+          @items={{this.items}}
+          @onSearch={{this.onSearch}}
+          @onChange={{this.onChange}}
+          @multiple={{this.multiple}}
+          @hideCheckboxes={{this.hideCheckboxes}}
+          @searchEnabled={{this.searchEnabled}}
+        >
+          <:selected-item as |item|>{{item.value}}</:selected-item>
+          <:option-item as |item|>
+            <div class="text-ellipsis" {{enable-tooltip title=item.label displayOnlyOnOverflow=true}}>
+              {{item.label}}
+            </div>
+          </:option-item>
+        </OSS::Smart::Immersive::Select>
+      </div>
+    `,
+    context: {
+      ...rest,
+      icon
+    }
+  };
+};
+
+export const Select = TemplateSingle.bind({});
+
+Select.args = {
+  placeholder: 'Placeholder',
+  values: [{ value: 'step 1' }],
+  loading: false,
+  multiple: false,
+  hideCheckboxes: false,
+  searchEnabled: true,
+  items: [
+    { value: 'step 1', label: 'Step 1' },
+    { value: 'step 2', label: 'Step 2' },
+    { value: 'step 3', label: 'Step 3' }
+  ],
+  onSearch: action('onSearch'),
+  onChange: action('onChange')
+};
+
+export const Multiple = Template.bind({});
+
+Multiple.args = {
+  placeholder: 'Placeholder',
+  values: [{ value: 'step 1' }, { value: 'step 2' }],
+  loading: false,
+  multiple: true,
+  hideCheckboxes: false,
+  searchEnabled: true,
+  items: [
+    { value: 'step 1', label: 'Step 1' },
+    { value: 'step 2', label: 'Step 2' },
+    { value: 'step 3', label: 'Step 3' }
+  ],
+  onSearch: action('onSearch'),
+  onChange: action('onChange')
+};
diff --git a/addon/components/o-s-s/smart/immersive/select.ts b/addon/components/o-s-s/smart/immersive/select.ts
new file mode 100644
index 000000000..478d3c083
--- /dev/null
+++ b/addon/components/o-s-s/smart/immersive/select.ts
@@ -0,0 +1,149 @@
+import { action } from '@ember/object';
+import BaseDropdown, { type BaseDropdownArgs } from '../../private/base-dropdown';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+import { isBlank } from '@ember/utils';
+import { assert } from '@ember/debug';
+import { scheduleOnce } from '@ember/runloop';
+import attachDropdown from '@upfluence/oss-components/utils/attach-dropdown';
+import { helper } from '@ember/component/helper';
+
+export type SmartImmersiveSelectItem = {
+  value: any;
+  label: string;
+};
+
+interface OSSSmartImmersiveSelectComponentSignature extends BaseDropdownArgs {
+  values?: SmartImmersiveSelectItem[];
+  items: SmartImmersiveSelectItem[];
+  placeholder?: string;
+  loading?: boolean;
+  hasError?: boolean;
+  displayedItems?: number;
+  maxItemWidth?: number;
+  addressableAs?: string;
+  multiple?: boolean;
+  searchEnabled?: boolean;
+  hideCheckboxes?: boolean;
+  onChange?: (item: string) => void;
+  onSearch?: (keyword: string) => void;
+  onBottomReached?: () => void;
+}
+
+export default class OSSSmartImmersiveSelectComponent extends BaseDropdown<OSSSmartImmersiveSelectComponentSignature> {
+  cleanupDrodpownAutoplacement?: () => void;
+
+  isSelected = helper((_, { value }: { value: any }): boolean => {
+    return this.args.values?.some((item) => item.value === value) || false;
+  });
+
+  get hasValue(): boolean {
+    return !isBlank(this.args.values);
+  }
+
+  get computedClasses(): string {
+    const classes = ['smart-immersive-select-container'];
+    if (this.hasValue) {
+      classes.push('smart-immersive-select-container--filled');
+    }
+    if (this.args.hasError) {
+      classes.push('smart-immersive-select-container--errored');
+    }
+    return classes.join(' ');
+  }
+
+  get computedSmartItemStyle(): string {
+    const style: string[] = [];
+    if (this.args.maxItemWidth) {
+      style.push(`max-width: ${this.args.maxItemWidth}px;`);
+    }
+    return style.join(' ');
+  }
+
+  get dropdownAddressableClass(): string {
+    return this.args.addressableAs ? `${this.args.addressableAs}__dropdown` : '';
+  }
+
+  get displayedItems(): number {
+    return this.args.displayedItems ?? 0;
+  }
+
+  get values(): SmartImmersiveSelectItem[] {
+    let values: SmartImmersiveSelectItem[] = [];
+    values = [
+      ...(this.args.values?.filter((el) => {
+        return !isBlank(el) && el !== undefined;
+      }) ?? [])
+    ];
+
+    if (this.displayedItems > 0 && values.length > this.displayedItems) {
+      values = values.slice(0, this.displayedItems);
+      values.push({
+        value: `+${(this.args.values?.length ?? 0) - this.displayedItems}`,
+        label: `+${(this.args.values?.length ?? 0) - this.displayedItems}`
+      });
+    }
+
+    return values;
+  }
+
+  @action
+  runAnimationOnLoadEnd(): void {
+    if (this.container && this.args.loading === false && this.hasValue) {
+      runSmartGradientAnimation(this.container);
+    }
+  }
+
+  @action
+  onSelect(selection: any): void {
+    this.args.onChange?.(selection);
+    if (!this.args.multiple) {
+      this.closeDropdown();
+    }
+  }
+
+  @action
+  handleSelectorClose(): void {
+    if (!this.container.hasAttribute('open') && document.querySelector(`#${this.portalId}`)) {
+      document.querySelector(`#${this.portalId}`)!.remove();
+      this.cleanupDrodpownAutoplacement?.();
+      this.closeDropdown();
+    }
+  }
+
+  @action
+  ensureBlockPresence(hasSelectedItem: boolean, hasOptionItem: boolean): void | never {
+    assert(`[component][OSS::Smart::Immersive::Select] You must pass selected-item named block`, hasSelectedItem);
+    assert(`[component][OSS::Smart::Immersive::Select] You must pass option-item named block`, hasOptionItem);
+  }
+
+  @action
+  toggleDropdown(event: PointerEvent): void {
+    super.toggleDropdown(event);
+
+    if (!this.isOpen) {
+      this.args.onSearch?.('');
+      return;
+    }
+
+    scheduleOnce('afterRender', this, this.setupDropdownAutoplacement);
+  }
+
+  @action
+  onClickOutside(element: HTMLElement, event: PointerEvent): void {
+    this.args.onSearch?.('');
+    super.onClickOutside(element, event);
+  }
+
+  private setupDropdownAutoplacement(): void {
+    const referenceTarget = this.container.querySelector('.upf-input');
+    const floatingTarget = document.querySelector(`#${this.portalId}`);
+
+    if (referenceTarget && floatingTarget) {
+      this.cleanupDrodpownAutoplacement = attachDropdown(
+        referenceTarget as HTMLElement,
+        floatingTarget as HTMLElement,
+        { maxHeight: 300, maxWidth: 320, placement: 'bottom-start', fallbackPlacements: ['top-start'] }
+      );
+    }
+  }
+}
diff --git a/addon/components/o-s-s/smart/input.hbs b/addon/components/o-s-s/smart/input.hbs
new file mode 100644
index 000000000..14b23dbc7
--- /dev/null
+++ b/addon/components/o-s-s/smart/input.hbs
@@ -0,0 +1,52 @@
+<div class="fx-col oss-smart-input-container" {{did-update this.handleUpdate @loading}}>
+  <div
+    class="oss-input-container
+      {{this.containerClass}}
+      {{if (has-block 'prefix') ' has-prefix'}}
+      {{if (has-block 'suffix') ' has-suffix'}}"
+    {{did-insert this.registerElement}}
+    data-control-name="oss-smart-input"
+    ...attributes
+  >
+    {{#if (has-block "prefix")}}
+      <div class="prefix">{{yield to="prefix"}}</div>
+    {{/if}}
+
+    {{#if (has-block "input")}}
+      <div class="yielded-input">
+        {{yield to="input"}}
+      </div>
+    {{else}}
+      {{#if @loading}}
+        <div class="upf-input loading-placeholder fx-row fx-xalign-center">
+          <span class="smart_text_animated">{{@placeholder}}</span>
+        </div>
+      {{else}}
+        <Input
+          @value={{@value}}
+          @type={{this.type}}
+          placeholder={{@placeholder}}
+          disabled={{@disabled}}
+          class="upf-input"
+          {{on "keyup" (fn this._onChange @value)}}
+          {{on "paste" this.onPaste}}
+        />
+      {{/if}}
+    {{/if}}
+
+    {{#if (has-block "suffix")}}
+      <div class="suffix">{{yield to="suffix"}}</div>
+    {{/if}}
+  </div>
+
+  {{#if @errorMessage}}
+    <span class="text-color-error margin-top-px-6">{{@errorMessage}}</span>
+  {{else if this.feedbackMessage}}
+    <span class={{concat "margin-top-px-6 font-color-" this.feedbackMessage.type "-500"}}>
+      {{#unless (eq this.feedbackMessage.type "error")}}
+        <OSS::Icon @icon={{this.messageIcon}} />
+      {{/unless}}
+      <span>{{this.feedbackMessage.value}}</span>
+    </span>
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/input.stories.js b/addon/components/o-s-s/smart/input.stories.js
new file mode 100644
index 000000000..8ab1389f9
--- /dev/null
+++ b/addon/components/o-s-s/smart/input.stories.js
@@ -0,0 +1,129 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/OSS::Smart::Input',
+  component: 'button',
+  argTypes: {
+    argTypes: {
+      value: {
+        description: 'Value of the input',
+        table: {
+          type: {
+            summary: 'string'
+          },
+          defaultValue: { summary: 'undefined' }
+        },
+        control: { type: 'text' }
+      },
+      type: {
+        description: 'The input type',
+        table: {
+          type: {
+            summary: 'string'
+          },
+          defaultValue: { summary: 'text' }
+        },
+        control: { type: 'text' }
+      },
+      disabled: {
+        description: 'Disable the default input (when not passing an input named block)',
+        table: {
+          type: {
+            summary: 'boolean'
+          },
+          defaultValue: { summary: false }
+        },
+        control: { type: 'boolean' }
+      },
+      placeholder: {
+        description: 'Placeholder of the input',
+        table: {
+          type: {
+            summary: 'string'
+          },
+          defaultValue: { summary: 'undefined' }
+        },
+        control: { type: 'text' }
+      },
+      feedbackMessage: {
+        description: 'A success, warning or error message that will be displayed below the input-group.',
+        table: {
+          type: {
+            summary: '{ type: string, value: string }'
+          },
+          defaultValue: { summary: 'undefined' }
+        },
+        control: { type: 'object' }
+      },
+      errorMessage: {
+        description: 'An error message that will be displayed below the input-group.',
+        table: {
+          type: {
+            summary: 'string'
+          },
+          defaultValue: { summary: 'undefined' }
+        },
+        control: { type: 'text' }
+      },
+      hasError: {
+        description:
+          'Allows setting the error style on the input without showing an error message. Useful for form validation.',
+        table: {
+          type: {
+            summary: 'boolean'
+          },
+          defaultValue: { summary: 'undefined' }
+        },
+        control: { type: 'boolean' }
+      },
+      onChange: {
+        description: 'Method called every time the input is updated',
+        table: {
+          category: 'Actions',
+          type: {
+            summary: 'onChange(value: string): void'
+          }
+        }
+      }
+    },
+    loading: {
+      type: { required: true },
+      control: 'boolean',
+      description: 'Flag to display loading state',
+      defaultValue: false,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      }
+    }
+  }
+};
+
+const Template = (args) => ({
+  template: hbs`
+     <OSS::Smart::Input
+          @value={{this.value}} 
+          @disabled={{this.disabled}}
+          @placeholder={{this.placeholder}}
+          @type={{this.type}}
+          @errorMessage={{this.errorMessage}}
+          @onChange={{this.onChange}}
+          @loading={{this.loading}}
+        />
+  `,
+  context: args
+});
+
+const defaultArgs = {
+  value: 'John',
+  disabled: false,
+  type: undefined,
+  placeholder: 'this is the placeholder',
+  errorMessage: undefined,
+  onChange: action('onChange'),
+  loading: false
+};
+
+export const Default = Template.bind({});
+Default.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/input.ts b/addon/components/o-s-s/smart/input.ts
new file mode 100644
index 000000000..866214d4d
--- /dev/null
+++ b/addon/components/o-s-s/smart/input.ts
@@ -0,0 +1,28 @@
+import OSSInputContainer from '../input-container';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+import { isEmpty } from '@ember/utils';
+
+interface SmartInputArgs {
+  value?: string;
+  placeholder?: string;
+  loading: boolean;
+  onChange?: (value: string) => void;
+}
+
+export default class OSSSmartInput extends OSSInputContainer<SmartInputArgs> {
+  @tracked declare element: HTMLElement;
+
+  @action
+  handleUpdate(): void {
+    if (!this.args.loading && !isEmpty(this.args.value)) {
+      runSmartGradientAnimation(this.element);
+    }
+  }
+
+  @action
+  registerElement(element: HTMLElement): void {
+    this.element = element;
+  }
+}
diff --git a/addon/components/o-s-s/smart/number-input.hbs b/addon/components/o-s-s/smart/number-input.hbs
new file mode 100644
index 000000000..04a5bce93
--- /dev/null
+++ b/addon/components/o-s-s/smart/number-input.hbs
@@ -0,0 +1,46 @@
+<div class="fx-col oss-smart-number-input-container" {{did-update this.handleUpdate @loading}}>
+  <div class="smart-number-input fx-row {{this.computedClasses}}" {{did-insert this.registerElement}} ...attributes>
+    <OSS::Button
+      @square={{true}}
+      @size="md"
+      @icon="far fa-minus"
+      {{on "click" this.decreaseValue}}
+      disabled={{or this.isMinDisabled @disabled @loading}}
+      {{enable-tooltip title=this.minTooltipTitle placement="top"}}
+    />
+
+    {{! template-lint-disable no-triple-curlies}}
+    <OSS::InputContainer
+      @value={{this.localValue}}
+      @onChange={{this.checkUserInput}}
+      @disabled={{@disabled}}
+      @hasError={{@hasError}}
+      @errorMessage={{@errorMessage}}
+      @feedbackMessage={{@feedbackMessage}}
+      style={{{this.dynamicWidth}}}
+      {{on "keydown" this.keyParser}}
+      {{on "blur" this.checkUserInput}}
+      {{did-insert this.registerInputElement}}
+    />
+
+    <OSS::Button
+      @square={{true}}
+      @size="md"
+      @icon="far fa-plus"
+      {{on "click" this.increaseValue}}
+      disabled={{or this.isMaxDisabled @disabled @loading}}
+      {{enable-tooltip title=this.maxTooltipTitle placement="top"}}
+    />
+  </div>
+
+  {{#if @errorMessage}}
+    <span class="text-color-error margin-top-px-6">{{@errorMessage}}</span>
+  {{else if @feedbackMessage}}
+    <span class={{concat "margin-top-px-6 font-color-" @feedbackMessage.type "-500"}}>
+      {{#unless (eq @feedbackMessage.type "error")}}
+        <OSS::Icon @icon={{this.messageIcon}} />
+      {{/unless}}
+      <span>{{@feedbackMessage.value}}</span>
+    </span>
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/number-input.stories.js b/addon/components/o-s-s/smart/number-input.stories.js
new file mode 100644
index 000000000..757190728
--- /dev/null
+++ b/addon/components/o-s-s/smart/number-input.stories.js
@@ -0,0 +1,159 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/OSS::Smart::NumberInput',
+  component: 'smart-number-input',
+  argTypes: {
+    value: {
+      description: '[OPTIONAL] The current value of the input',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'number' }
+    },
+    min: {
+      description: '[OPTIONAL] The minimum value the number can be',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'number' }
+    },
+    max: {
+      description: '[OPTIONAL] The maximum value the number can be',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'number' }
+    },
+    step: {
+      description: '[OPTIONAL] The increase & decrease value of each button press. Defaults to 1',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: '1' }
+      },
+      control: { type: 'number' }
+    },
+    loading: {
+      description: '[OPTIONAL] Shows loading state with animated placeholder',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: 'false' }
+      },
+      control: { type: 'boolean' }
+    },
+    placeholder: {
+      description: '[OPTIONAL] Placeholder text shown during loading state',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    hasError: {
+      description: '[OPTIONAL] Applies error styling to the component',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: 'false' }
+      },
+      control: { type: 'boolean' }
+    },
+    disabled: {
+      description: '[OPTIONAL] Disables all interactions with the component',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: 'false' }
+      },
+      control: { type: 'boolean' }
+    },
+    onChange: {
+      description: '[OPTIONAL] Callback triggered when the value changes',
+      table: {
+        category: 'Actions',
+        type: {
+          summary: 'onChange(value: number): void'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A smart number input component with loading states, error handling, and gradient animations. Features decrease & increase buttons with keyboard navigation support.'
+      }
+    }
+  }
+};
+
+const DefaultTemplate = (args) => ({
+  template: hbs`
+    <OSS::Smart::NumberInput
+      @value={{this.value}}
+      @min={{this.min}}
+      @max={{this.max}}
+      @step={{this.step}}
+      @loading={{this.loading}}
+      @placeholder={{this.placeholder}}
+      @hasError={{this.hasError}}
+      @errorMessage={{this.errorMessage}}
+      @feedbackMessage={{this.feedbackMessage}}
+      @disabled={{this.disabled}}
+      @onChange={{this.onChange}}
+    />
+  `,
+  context: args
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  value: 10,
+  onChange: action('onChange')
+};
+
+export const Loading = DefaultTemplate.bind({});
+Loading.args = {
+  loading: true,
+  placeholder: 'Loading...',
+  onChange: action('onChange')
+};
+
+export const Filled = DefaultTemplate.bind({});
+Filled.args = {
+  value: 100,
+  onChange: action('onChange')
+};
+
+export const Error = DefaultTemplate.bind({});
+Error.args = {
+  value: 50,
+  hasError: true,
+  errorMessage: 'Invalid value',
+  onChange: action('onChange')
+};
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = {
+  value: 25,
+  disabled: true,
+  onChange: action('onChange')
+};
diff --git a/addon/components/o-s-s/smart/number-input.ts b/addon/components/o-s-s/smart/number-input.ts
new file mode 100644
index 000000000..43e124d08
--- /dev/null
+++ b/addon/components/o-s-s/smart/number-input.ts
@@ -0,0 +1,49 @@
+import OSSNumberInput, { type OSSNumberInputArgs } from '../number-input';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+import { isEmpty } from '@ember/utils';
+
+export interface OSSSmartNumberInputArgs extends OSSNumberInputArgs {
+  loading?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
+  feedbackMessage?: {
+    type: 'error' | 'warning';
+    value: string;
+  };
+}
+
+export default class OSSSmartNumberInput extends OSSNumberInput<OSSSmartNumberInputArgs> {
+  declare args: OSSSmartNumberInputArgs;
+  @tracked declare element: HTMLElement;
+
+  get computedClasses(): string {
+    const classes = ['smart-number-input'];
+
+    if (this.args.loading) {
+      classes.push('smart-number-input--loading');
+    } else if (this.args.value !== undefined && this.args.value !== null) {
+      classes.push('smart-number-input--filled');
+    }
+    if (this.args.hasError || this.args.errorMessage) {
+      classes.push('smart-number-input--errored');
+    }
+    if (this.args.feedbackMessage) {
+      classes.push(`smart-number-input--${this.args.feedbackMessage.type}`);
+    }
+    return classes.join(' ');
+  }
+
+  @action
+  handleUpdate(): void {
+    if (!this.args.loading && !isEmpty(this.args.value)) {
+      runSmartGradientAnimation(this.element);
+    }
+  }
+
+  @action
+  registerElement(element: HTMLElement): void {
+    this.element = element;
+  }
+}
diff --git a/addon/components/o-s-s/smart/pill.ts b/addon/components/o-s-s/smart/pill.ts
index 99fd696a7..6b50785c5 100644
--- a/addon/components/o-s-s/smart/pill.ts
+++ b/addon/components/o-s-s/smart/pill.ts
@@ -31,7 +31,7 @@ export default class OSSSmartPill extends OSSPill<OSSSmartPillArgs> {
 
   @action
   runAnimationOnLoadEnd(): void {
-    if (this.element && this.args.loading === false) {
+    if (this.element && this.args.loading === false && this.args.selected) {
       runSmartGradientAnimation(this.element);
     }
   }
diff --git a/addon/components/o-s-s/smart/skeleton.hbs b/addon/components/o-s-s/smart/skeleton.hbs
new file mode 100644
index 000000000..46b597779
--- /dev/null
+++ b/addon/components/o-s-s/smart/skeleton.hbs
@@ -0,0 +1,11 @@
+{{#if @multiple}}
+  <div class="fx-1 {{this.computedClass}}" ...attributes>
+    {{#each this.rows as |row|}}
+      <div class="upf-smart-skeleton-effect" style={{this.inlineStyles rowStyle=row}}></div>
+    {{/each}}
+  </div>
+{{else}}
+  {{#each this.rows as |row|}}
+    <div class="upf-smart-skeleton-effect" style={{this.inlineStyles rowStyle=row}} ...attributes></div>
+  {{/each}}
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/skeleton.stories.js b/addon/components/o-s-s/smart/skeleton.stories.js
new file mode 100644
index 000000000..c14a8c6e8
--- /dev/null
+++ b/addon/components/o-s-s/smart/skeleton.stories.js
@@ -0,0 +1,101 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const DirectionTypes = ['row', 'col', 'column'];
+
+export default {
+  title: 'Components/OSS::Smart::Skeleton',
+  component: 'smart-skeleton',
+  argTypes: {
+    height: {
+      description: 'Box height in px',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: '36' }
+      },
+      control: { type: 'number' }
+    },
+    width: {
+      description: 'Box width in px',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: '36' }
+      },
+      control: { type: 'number' }
+    },
+    multiple: {
+      description: 'How many skeleton effects should be displayed',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: '1' }
+      },
+      control: { type: 'number' }
+    },
+    gap: {
+      description: 'Gap between multiple rows in px',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: '9' }
+      },
+      control: { type: 'number' }
+    },
+    randomize: {
+      description: 'Randomize skeleton effect width within a 15% range',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    direction: {
+      description: 'Direction of the skeleton',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'row' }
+      },
+      options: DirectionTypes,
+      control: { type: 'select' }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Component used to create a smart skeleton effect.'
+      },
+      iframeHeight: 250
+    }
+  }
+};
+
+const defaultArgs = {
+  height: 200,
+  width: 300,
+  multiple: 1,
+  gap: 9,
+  randomize: false
+};
+
+const Template = (args) => ({
+  template: hbs`
+    <div class="bg-color-white padding-px-6">
+      <OSS::Smart::Skeleton @height={{this.height}} @width={{this.width}} @multiple={{this.multiple}} @gap={{this.gap}}
+                     @direction={{this.direction}}
+                     @randomize={{this.randomize}}/>
+    </div>
+  `,
+  context: args
+});
+
+export const Default = Template.bind({});
+Default.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/skeleton.ts b/addon/components/o-s-s/smart/skeleton.ts
new file mode 100644
index 000000000..341ab7ac1
--- /dev/null
+++ b/addon/components/o-s-s/smart/skeleton.ts
@@ -0,0 +1,51 @@
+import { helper } from '@ember/component/helper';
+import type { OSSSkeletonArgs } from '../skeleton';
+import OSSSkeleton from '../skeleton';
+import { assert } from '@ember/debug';
+
+interface OSSSmartSkeletonArgs extends OSSSkeletonArgs {}
+
+const MIN_HEIGHT = 10;
+
+export default class OSSSmartSkeleton extends OSSSkeleton<OSSSmartSkeletonArgs> {
+  constructor(owner: unknown, args: OSSSmartSkeletonArgs) {
+    super(owner, args, true);
+
+    if (this.args.direction) {
+      assert(
+        `[component][OSS::Smart::Skeleton] The @direction argument should be a value of ${['row', 'column', 'col']}`,
+        ['row', 'column', 'col'].includes(this.args.direction)
+      );
+    }
+  }
+
+  inlineStyles = helper((_, { rowStyle }: { rowStyle: string }): string => {
+    return [rowStyle, this.backgroundImage].join('; ');
+  });
+
+  get height(): number {
+    return parseInt((this.args.height || MIN_HEIGHT) as string);
+  }
+
+  get rotationDegrees(): number {
+    const maxHeight = 100;
+    const clampedHeight = Math.max(MIN_HEIGHT, Math.min(this.height, maxHeight)) * 1.3;
+    const minDegree = 100;
+    const maxDegree = 150;
+    const logMin = Math.log(MIN_HEIGHT);
+    const logMax = Math.log(maxHeight);
+    const scale = (Math.log(clampedHeight) - logMin) / (logMax - logMin);
+    return Math.round(maxDegree - scale * (maxDegree - minDegree));
+  }
+
+  get backgroundImage(): string {
+    return `background-image: linear-gradient(
+      ${this.rotationDegrees}deg,
+      rgba(255, 255, 255, 0.15) 8.2%,
+      rgba(247, 213, 250, 0.15) 23.6%,
+      rgba(83, 94, 252, 0.15) 38.3%,
+      rgba(237, 33, 255, 0.15) 53.2%,
+      rgba(255, 255, 255, 0.15) 91.7%
+    );`;
+  }
+}
diff --git a/addon/components/o-s-s/smart/tag-input.hbs b/addon/components/o-s-s/smart/tag-input.hbs
new file mode 100644
index 000000000..d9de0f55b
--- /dev/null
+++ b/addon/components/o-s-s/smart/tag-input.hbs
@@ -0,0 +1,34 @@
+<div
+  class="tag-input-container {{if (gt this.inputValue.length 0) 'tag-input-container--active'}}"
+  {{on "click" this.onClickQueryBuilder}}
+  {{did-insert this.registerElement}}
+  ...attributes
+>
+  <div class={{this.keywordInputClasses}}>
+    {{#if @loading}}
+      <div class="animated-overlay">
+        {{or this.inputValue this.placeholder}}
+      </div>
+    {{else}}
+      <div class="fx-col">
+        <span class="hidden-span">{{this.hiddenSpanValue}}</span>
+        <Input
+          class="displayed-input"
+          @value={{this.inputValue}}
+          @type="text"
+          data-control-name="tag-input"
+          {{on "keydown" this.onKeydown}}
+          {{on "focusin" this.onFocusin}}
+          {{on-click-outside this.onClickOutside}}
+          autocomplete="off"
+        />
+      </div>
+      <div class="tag-input-empty-state">
+        {{this.placeholder}}
+      </div>
+    {{/if}}
+    <span class="tag-input-icon">
+      <OSS::Icon @style="solid" @icon="fa-arrow-turn-down-left" />
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/tag-input.stories.js b/addon/components/o-s-s/smart/tag-input.stories.js
new file mode 100644
index 000000000..2895b6694
--- /dev/null
+++ b/addon/components/o-s-s/smart/tag-input.stories.js
@@ -0,0 +1,79 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Components/OSS::Smart::TagInput',
+  component: 'smart-tag-input',
+  argTypes: {
+    value: {
+      description: 'The current value of the input field.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' }
+      },
+      control: { type: 'text' }
+    },
+    loading: {
+      description: 'Whether the input is in a loading state (shows animated overlay).',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    hasError: {
+      description: 'If true, applies error styling to the input.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    onKeydown: {
+      description:
+        'Callback triggered when a key is pressed. Called with a `{ value, type }` object when Enter is pressed.',
+      table: {
+        category: 'Actions',
+        type: { summary: '(keyword: { value: string, type: "keyword" | "hashtag" | "mention" }) => void' }
+      }
+    },
+    placeholder: {
+      description: 'The placeholder to show when the input is empty',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: undefined }
+      },
+      control: { type: 'text' }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A smart tag input component for entering keywords, @mentions, and #hashtags.'
+      }
+    }
+  }
+};
+
+const defaultArgs = {
+  value: 'Keyword',
+  loading: false,
+  hasError: false,
+  placeholder: 'Type a keyword, mention, or hashtag'
+};
+
+const Template = (args) => ({
+  template: hbs`
+    <OSS::Smart::TagInput
+      @value={{this.value}}
+      @loading={{this.loading}}
+      @hasError={{this.hasError}}
+      @onKeydown={{this.onKeydown}}
+    />
+  `,
+  context: args
+});
+
+export const Default = Template.bind({});
+Default.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/tag-input.ts b/addon/components/o-s-s/smart/tag-input.ts
new file mode 100644
index 000000000..c95003f63
--- /dev/null
+++ b/addon/components/o-s-s/smart/tag-input.ts
@@ -0,0 +1,105 @@
+import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import { inject as service } from '@ember/service';
+import type { IntlService } from 'ember-intl';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import type { TagType } from './tag';
+
+export type Keyword = {
+  value: string;
+  type: TagType;
+};
+
+interface OSSSmartTagInputArgs {
+  value: string;
+  onKeydown(keyword: Keyword): void;
+  loading?: boolean;
+  hasError?: boolean;
+  placeholder?: string;
+}
+
+export default class OSSSmartTagInput extends Component<OSSSmartTagInputArgs> {
+  @service declare intl: IntlService;
+
+  @tracked inputValue: string = this.args.value || '';
+  @tracked isInputFocused: boolean = false;
+  @tracked lastFocusInTime: number = 0;
+  declare element: HTMLElement;
+
+  get keywordInputClasses(): string {
+    const classes = ['tag-input'];
+    if (this.isInputFocused) {
+      classes.push('tag-input--focus');
+    }
+    if (isBlank(this.inputValue)) {
+      classes.push('tag-input--empty');
+    }
+    if (this.args.hasError) {
+      console.log('input has error');
+      classes.push('tag-input--error');
+    }
+    return classes.join(' ');
+  }
+
+  get placeholder(): string {
+    return this.args.placeholder ?? this.intl.t('oss-components.smart.tag_input.placeholder');
+  }
+
+  get hiddenSpanValue(): string {
+    return this.inputValue || this.isInputFocused ? this.inputValue : this.placeholder;
+  }
+
+  @action
+  registerElement(element: HTMLElement): void {
+    this.element = element;
+  }
+
+  @action
+  onClickQueryBuilder(): void {
+    this.focusKeywordInput();
+  }
+
+  @action
+  onFocusin(): void {
+    this.lastFocusInTime = Date.now();
+    this.isInputFocused = true;
+  }
+
+  @action
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === 'Tab') {
+      this.formatAndNotify();
+    }
+  }
+
+  @action
+  onClickOutside(_: any, event: Event): void {
+    if (Date.now() - this.lastFocusInTime < 150) {
+      return;
+    }
+    if (!this.isInputFocused) return;
+    this.isInputFocused = false;
+    if (isBlank(this.inputValue)) return;
+    event.stopImmediatePropagation();
+    this.formatAndNotify();
+  }
+
+  private formatAndNotify(): void {
+    if (this.inputValue.trim().length > 0) {
+      let type: TagType = 'keyword';
+      if (this.inputValue.startsWith('@')) {
+        type = 'mention';
+      } else if (this.inputValue.startsWith('#')) {
+        type = 'hashtag';
+      }
+      const keyword = { value: this.inputValue.trim(), type };
+      this.args.onKeydown(keyword);
+      this.inputValue = '';
+    }
+  }
+
+  private focusKeywordInput(): void {
+    (this.element.querySelector('[data-control-name="tag-input"]') as HTMLInputElement)?.focus();
+  }
+}
diff --git a/addon/components/o-s-s/smart/tag.hbs b/addon/components/o-s-s/smart/tag.hbs
new file mode 100644
index 000000000..5defd8522
--- /dev/null
+++ b/addon/components/o-s-s/smart/tag.hbs
@@ -0,0 +1,15 @@
+<div
+  class="smart-tag-container {{if (eq @size 'lg') 'smart-tag-container--lg' 'smart-tag-container--md'}}"
+  {{did-insert this.handleElementLifecycle}}
+  {{did-update this.runAnimationOnLoadEnd @successAnimationOnInsertion}}
+>
+  <div class="smart-tag smart-tag--color-{{this.typeColor}}" ...attributes>
+    {{#if this.typeIcon}}
+      <OSS::Icon @icon={{this.typeIcon}} />
+    {{/if}}
+    <span class="text-ellipsis-140">{{this.displayLabel}}</span>
+    {{#if this.closable}}
+      <OSS::Icon @icon="fa-times" {{on "click" this.onRemove}} role="button" data-control-name="remove-tag-button" />
+    {{/if}}
+  </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/tag.stories.js b/addon/components/o-s-s/smart/tag.stories.js
new file mode 100644
index 000000000..62957c823
--- /dev/null
+++ b/addon/components/o-s-s/smart/tag.stories.js
@@ -0,0 +1,83 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Components/OSS::Smart::Tag',
+  component: 'smart-tag',
+  argTypes: {
+    label: {
+      description: 'The text content of the tag.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    type: {
+      description: 'The type of tag, which determines color and icon. Defaults to "keyword".',
+      table: {
+        type: { summary: '"keyword" | "hashtag" | "mention"' },
+        defaultValue: { summary: 'keyword' }
+      },
+      control: {
+        type: 'select',
+        options: ['keyword', 'hashtag', 'mention']
+      }
+    },
+    size: {
+      description: 'The size of the tag. "md" (default) or "lg".',
+      table: {
+        type: { summary: '"md" | "lg"' },
+        defaultValue: { summary: 'md' }
+      },
+      control: {
+        type: 'select',
+        options: ['md', 'lg']
+      }
+    },
+    successAnimationOnInsertion: {
+      description: 'If true, plays a success animation when the tag is inserted.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    onRemove: {
+      description: 'Callback triggered when the close icon is clicked. If set, the tag is closable.',
+      table: {
+        category: 'Actions',
+        type: { summary: '() => void' }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A colored tag component for keywords, hashtags, or mentions.'
+      }
+    }
+  }
+};
+
+const defaultArgs = {
+  label: 'Tag',
+  type: 'keyword',
+  size: 'md',
+  successAnimationOnInsertion: false
+};
+
+const Template = (args) => ({
+  template: hbs`
+    <OSS::Smart::Tag
+      @label={{this.label}}
+      @type={{this.type}}
+      @size={{this.size}}
+      @successAnimationOnInsertion={{this.successAnimationOnInsertion}}
+      @onRemove={{this.onRemove}}
+    />
+  `,
+  context: args
+});
+
+export const Default = Template.bind({});
+Default.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/tag.ts b/addon/components/o-s-s/smart/tag.ts
new file mode 100644
index 000000000..3f093854e
--- /dev/null
+++ b/addon/components/o-s-s/smart/tag.ts
@@ -0,0 +1,63 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+
+export type TagType = 'keyword' | 'hashtag' | 'mention';
+export type TagTypeDefinition = { icon?: string; color: string };
+
+const TypeDefinition: Record<TagType, TagTypeDefinition> = {
+  hashtag: { icon: 'fa-hashtag', color: 'cyan' },
+  mention: { icon: 'fa-at', color: 'violet' },
+  keyword: { icon: 'x', color: 'yellow' }
+};
+
+interface OSSSmartTagArgs {
+  label: string;
+  type?: TagType;
+  size?: 'md' | 'lg';
+  successAnimationOnInsertion?: boolean;
+  onRemove?(): void;
+}
+
+export default class OSSSmartTag extends Component<OSSSmartTagArgs> {
+  @tracked declare element: HTMLElement;
+
+  get closable(): boolean {
+    return Boolean(this.args.onRemove);
+  }
+
+  get typeColor(): string {
+    return TypeDefinition[this.args.type ?? 'keyword'].color;
+  }
+
+  get typeIcon(): string | undefined {
+    return TypeDefinition[this.args.type ?? 'keyword'].icon;
+  }
+
+  get displayLabel(): string {
+    if (this.args.label[0] === '@' || this.args.label[0] === '#') {
+      return this.args.label.slice(1);
+    }
+    return this.args.label;
+  }
+
+  @action
+  onRemove(event?: PointerEvent): void {
+    event?.stopPropagation();
+    this.args.onRemove?.();
+  }
+
+  @action
+  handleElementLifecycle(element: HTMLElement): void {
+    this.element = element;
+    this.runAnimationOnLoadEnd();
+  }
+
+  @action
+  runAnimationOnLoadEnd(): void {
+    if (this.element && this.args.successAnimationOnInsertion) {
+      runSmartGradientAnimation(this.element);
+    }
+  }
+}
diff --git a/addon/components/o-s-s/smart/text-area.hbs b/addon/components/o-s-s/smart/text-area.hbs
new file mode 100644
index 000000000..7133aacdd
--- /dev/null
+++ b/addon/components/o-s-s/smart/text-area.hbs
@@ -0,0 +1,23 @@
+<div
+  class="oss-smart-text-area-container {{if @hasError ' oss-smart-text-area-container--errored'}}"
+  {{did-insert this.registerElement}}
+  {{did-update this.handleUpdate @loading}}
+  ...attributes
+>
+  <div class="fx-row">
+    {{#if @loading}}
+      <div class="upf-input loading-placeholder fx-row fx-xalign-center">
+        <pre class="smart_text_animated">{{or @value @placeholder}}</pre>
+      </div>
+    {{/if}}
+    <Textarea
+      @value={{@value}}
+      placeholder={{@placeholder}}
+      disabled={{@disabled}}
+      rows={{this.rows}}
+      class="oss-textarea {{this.computedClass}}"
+      {{on "keyup" (fn this._onChange @value)}}
+    />
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/text-area.stories.js b/addon/components/o-s-s/smart/text-area.stories.js
new file mode 100644
index 000000000..f782ab338
--- /dev/null
+++ b/addon/components/o-s-s/smart/text-area.stories.js
@@ -0,0 +1,121 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+const ResizeTypes = ['horizontal', 'vertical', 'none', null];
+
+export default {
+  title: 'Components/OSS::Smart::TextArea',
+  component: 'smart text-area',
+  argTypes: {
+    value: {
+      description: 'Value of the textarea',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    rows: {
+      description: 'Number of rows dispayed in the textarea',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: 2 }
+      },
+      control: { type: 'number' }
+    },
+    resize: {
+      description: 'Define direction in which textarea can be resized (By default the resize is set to Both)',
+      table: {
+        type: {
+          summary: ResizeTypes.join('|')
+        },
+        defaultValue: { summary: 'both' }
+      },
+      options: ResizeTypes,
+      control: { type: 'select' }
+    },
+    disabled: {
+      description: 'Disable the default textarea',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    placeholder: {
+      description: 'Placeholder of the textarea',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    loading: {
+      description: 'Indicates if the textarea is in a loading state',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    hasError: {
+      description: 'Indicates if the textarea has an error',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    onChange: {
+      description: 'Method called every time the textarea is updated',
+      table: {
+        category: 'Actions',
+        type: {
+          summary: 'onChange(value: string): void'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'The OSS version of the textarea component.'
+      }
+    }
+  }
+};
+
+const defaultArgs = {
+  value: 'John',
+  rows: 2,
+  resize: null,
+  disabled: false,
+  placeholder: 'this is the placeholder',
+  hasError: false,
+  loading: false,
+  onChange: action('onChange')
+};
+
+const DefaultUsageTemplate = (args) => ({
+  template: hbs`
+      <OSS::Smart::TextArea @value={{this.value}} @disabled={{this.disabled}} @placeholder={{this.placeholder}}
+                     @hasError={{this.hasError}} @onChange={{this.onChange}} @rows={{this.rows}}
+                     @resize={{this.resize}} @loading={{this.loading}}/>
+  `,
+  context: args
+});
+
+export const BasicUsage = DefaultUsageTemplate.bind({});
+BasicUsage.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/text-area.ts b/addon/components/o-s-s/smart/text-area.ts
new file mode 100644
index 000000000..52222c64e
--- /dev/null
+++ b/addon/components/o-s-s/smart/text-area.ts
@@ -0,0 +1,43 @@
+import { action } from '@ember/object';
+import { isEmpty } from '@ember/utils';
+import { tracked } from '@glimmer/tracking';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+import type { OSSTextAreaArgs, textAreaResizeOptions } from '../text-area';
+import OSSTextArea from '../text-area';
+
+interface OSSSmartImmersiveInputComponentSignature extends OSSTextAreaArgs {
+  value: string;
+  loading: boolean;
+  hasError?: boolean;
+}
+
+export default class OSSSmartTextareaComponent extends OSSTextArea<OSSSmartImmersiveInputComponentSignature> {
+  @tracked declare element: HTMLElement;
+  @tracked declare textAreaElement: HTMLTextAreaElement;
+
+  @action
+  handleUpdate(): void {
+    if (!this.args.loading && !isEmpty(this.args.value)) {
+      runSmartGradientAnimation(this.element);
+    }
+  }
+
+  @action
+  registerElement(element: HTMLElement): void {
+    this.element = element;
+  }
+
+  get resize(): textAreaResizeOptions | undefined {
+    return this.args.resize ?? 'none';
+  }
+
+  get computedClass(): string {
+    let computedClass = super.computedClass;
+
+    if (this.args.loading) {
+      computedClass += ' oss-textarea--loading';
+    }
+
+    return computedClass;
+  }
+}
diff --git a/addon/components/o-s-s/smart/toggle-buttons.hbs b/addon/components/o-s-s/smart/toggle-buttons.hbs
new file mode 100644
index 000000000..e7f34b8a9
--- /dev/null
+++ b/addon/components/o-s-s/smart/toggle-buttons.hbs
@@ -0,0 +1,18 @@
+<div
+  class={{concat "oss-smart-toggle-buttons-container " (if @disabled "oss-smart-toggle-buttons-container--disabled")}}
+  ...attributes
+>
+  {{#each @toggles as |toggle|}}
+    <div
+      class="oss-smart-toggle-buttons-btn
+        {{if (eq @selectedToggle toggle.value) ' oss-smart-toggle-buttons-btn--selected'}}"
+      role="button"
+      {{on "click" (fn this.onSelectToggle toggle.value)}}
+    >
+      {{#if toggle.icon}}
+        <OSS::Icon @style={{fa-icon-style toggle.icon}} @icon={{fa-icon-value toggle.icon}} />
+      {{/if}}
+      {{toggle.label}}
+    </div>
+  {{/each}}
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/toggle-buttons.stories.js b/addon/components/o-s-s/smart/toggle-buttons.stories.js
new file mode 100644
index 000000000..2fa7c4189
--- /dev/null
+++ b/addon/components/o-s-s/smart/toggle-buttons.stories.js
@@ -0,0 +1,79 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/OSS::Smart::ToggleButtons',
+  component: 'smart toggle-buttons',
+  argTypes: {
+    toggles: {
+      type: { required: true },
+      description: 'An array of toggles passed to the component',
+      table: {
+        type: {
+          summary: '{value: string, label: string}[]'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
+    selectedToggle: {
+      type: { required: true },
+      description: 'Value selected',
+      table: {
+        type: {
+          summary: 'string | null'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    disabled: {
+      type: { required: false },
+      description: 'Disabled state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'boolean' }
+    },
+    onSelection: {
+      type: { required: true },
+      description: 'Action triggered when selecting a new toggle',
+      table: {
+        category: 'Actions',
+        type: {
+          summary: 'onSelection(selectedToggle: string): void'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'The smart version of the toggle-buttons item component'
+      },
+      iframeHeight: 200
+    }
+  }
+};
+
+const defaultArgs = {
+  toggles: [
+    { value: 'categories', label: 'Categories' },
+    { value: 'products', label: 'Products' }
+  ],
+  selectedToggle: 'categories',
+  onSelection: action('onSelection'),
+  disabled: false
+};
+const DefaultUsageTemplate = (args) => ({
+  template: hbs`
+    <div style="width: 250px">
+      <OSS::Smart::ToggleButtons @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}} @onSelection={{this.onSelection}} @disabled={{this.disabled}} />
+    </div>
+  `,
+  context: args
+});
+
+export const Default = DefaultUsageTemplate.bind({});
+Default.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/toggle-buttons.ts b/addon/components/o-s-s/smart/toggle-buttons.ts
new file mode 100644
index 000000000..2dc5abf76
--- /dev/null
+++ b/addon/components/o-s-s/smart/toggle-buttons.ts
@@ -0,0 +1,30 @@
+import { assert } from '@ember/debug';
+import OSSToggleButtons, { type OSSToggleButtonsArgs } from '../toggle-buttons';
+
+interface OSSSmartToggleButtonsArgs extends OSSToggleButtonsArgs {}
+
+export default class OSSSmartToggleButtons extends OSSToggleButtons<OSSSmartToggleButtonsArgs> {
+  constructor(owner: unknown, args: OSSSmartToggleButtonsArgs) {
+    super(owner, args, true);
+
+    assert(
+      '[component][OSS::Smart::ToggleButtons] The @toggles parameter of type Toggle[] is mandatory',
+      this.args.toggles instanceof Array
+    );
+
+    assert(
+      '[component][OSS::Smart::ToggleButtons] The @onSelection parameter of type function is mandatory',
+      typeof args.onSelection === 'function'
+    );
+
+    assert(
+      '[component][OSS::Smart::ToggleButtons] The @selectedToggle parameter of type string or null is mandatory',
+      args.selectedToggle === null || typeof args.selectedToggle === 'string'
+    );
+
+    assert(
+      '[component][OSS::Smart::ToggleButtons] The @selectedToggle parameter should be null or a value of toggles',
+      args.selectedToggle === null || args.toggles.map((item) => item.value).includes(args.selectedToggle)
+    );
+  }
+}
diff --git a/addon/components/o-s-s/text-area.ts b/addon/components/o-s-s/text-area.ts
index 04b38001b..d0efda609 100644
--- a/addon/components/o-s-s/text-area.ts
+++ b/addon/components/o-s-s/text-area.ts
@@ -2,9 +2,11 @@ import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
-interface OSSTextAreaArgs {
+export type textAreaResizeOptions = 'vertical' | 'horizontal' | 'none';
+
+export interface OSSTextAreaArgs {
   rows?: number;
-  resize?: 'vertical' | 'horizontal' | 'none';
+  resize?: textAreaResizeOptions;
   value?: string;
   disabled?: boolean;
   errorMessage?: string;
@@ -12,7 +14,7 @@ interface OSSTextAreaArgs {
   onChange?(value: string): void;
 }
 
-export default class OSSTextArea extends Component<OSSTextAreaArgs> {
+export default class OSSTextArea<T extends OSSTextAreaArgs> extends Component<T> {
   constructor(owner: unknown, args: OSSTextAreaArgs) {
     super(owner, args);
 
@@ -28,11 +30,15 @@ export default class OSSTextArea extends Component<OSSTextAreaArgs> {
     return this.args.rows || 2;
   }
 
+  get resize(): textAreaResizeOptions | undefined {
+    return this.args.resize;
+  }
+
   get computedClass(): string {
     const classes: string[] = [];
-    if (this.args.resize === 'vertical') classes.push('oss-textarea--resize-v');
-    else if (this.args.resize === 'horizontal') classes.push('oss-textarea--resize-h');
-    else if (this.args.resize === 'none') classes.push('oss-textarea--resize-none');
+    if (this.resize === 'vertical') classes.push('oss-textarea--resize-v');
+    else if (this.resize === 'horizontal') classes.push('oss-textarea--resize-h');
+    else if (this.resize === 'none') classes.push('oss-textarea--resize-none');
 
     return classes.join(' ');
   }
diff --git a/addon/components/o-s-s/toggle-buttons.ts b/addon/components/o-s-s/toggle-buttons.ts
index f496e084c..03db57f6e 100644
--- a/addon/components/o-s-s/toggle-buttons.ts
+++ b/addon/components/o-s-s/toggle-buttons.ts
@@ -8,17 +8,19 @@ export type Toggle = {
   icon?: string;
 };
 
-interface OSSToggleButtonsArgs {
+export interface OSSToggleButtonsArgs {
   toggles: Toggle[];
   selectedToggle: string | null;
   disabled?: boolean;
   onSelection(selectedToggle: string): void;
 }
 
-export default class OSSToggleButtons extends Component<OSSToggleButtonsArgs> {
-  constructor(owner: unknown, args: OSSToggleButtonsArgs) {
+export default class OSSToggleButtons<T extends OSSToggleButtonsArgs> extends Component<T> {
+  constructor(owner: unknown, args: OSSToggleButtonsArgs, preventDefaultAssertions?: boolean) {
     super(owner, args);
 
+    if (preventDefaultAssertions) return;
+
     assert(
       '[component][OSS::ToggleButtons] The @toggles parameter of type Toggle[] is mandatory',
       this.args.toggles instanceof Array
diff --git a/addon/components/wizard/base-step.ts b/addon/components/wizard/base-step.ts
index 165f0cb80..149aa50ee 100644
--- a/addon/components/wizard/base-step.ts
+++ b/addon/components/wizard/base-step.ts
@@ -9,7 +9,7 @@ export interface WizardBaseStepSignature {
 export abstract class WizardBaseStep<T extends WizardBaseStepSignature> extends Component<T> {
   constructor(owner: unknown, args: T) {
     super(owner, args);
-    if (!args.step.validateStep) set(args.step, 'validateStep', this.onStepSubmission.bind(this));
+    set(args.step, 'validateStep', this.onStepSubmission?.bind(this));
   }
 
   abstract onStepSubmission(): Promise<boolean>;
diff --git a/addon/components/wizard/step-wrapper.hbs b/addon/components/wizard/step-wrapper.hbs
index 78ea9cda4..f3173e62f 100644
--- a/addon/components/wizard/step-wrapper.hbs
+++ b/addon/components/wizard/step-wrapper.hbs
@@ -3,13 +3,12 @@
   class={{this.computedClasses}}
   data-wheel-listener={{this.wheelListenerEnabled}}
   data-wheel-handled={{this.wheelHandled}}
-  {{did-insert this.initStepView}}
   {{did-update this.onDisplayStateUpdate @step.displayState}}
-  {{on "scroll" this.handleScrollEvent}}
+  {{did-insert this.initStepView}}
   {{on "wheel" this.handleWheelEvent}}
   ...attributes
 >
   {{#if this.isVisible}}
-    <this.componentToDisplay @step={{@step}} />
+    <this.componentToDisplay @step={{@step}} {{on "scroll" this.handleScrollEvent}} {{did-insert this.initStepView}} />
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/addon/components/wizard/step-wrapper.ts b/addon/components/wizard/step-wrapper.ts
index c55a7be4b..acd656ebc 100644
--- a/addon/components/wizard/step-wrapper.ts
+++ b/addon/components/wizard/step-wrapper.ts
@@ -10,6 +10,7 @@ import type { Step } from '@upfluence/oss-components/services/wizard-manager';
 
 const SCROLL_EVENTS_DELAY = 1500;
 const DEFAULT_BASE_CLASS = 'step-wrapper';
+const DEFAULT_CLASS_TO_SKIP_SCROLL_LISTENER = 'prevent-wizard-scroll-events';
 
 interface WizardStepWrapperComponentSignature {
   step: Step;
@@ -30,7 +31,7 @@ export default class WizardStepWrapperComponent extends Component<WizardStepWrap
     return this.args.step.displayState !== 'none';
   }
 
-  @computed('args.step.displayState')
+  @computed('args.step.{displayState,hidden}')
   get computedClasses(): string {
     const classArray = [this.baseClass];
     if (this.args.step.displayState === 'previous') {
@@ -66,7 +67,20 @@ export default class WizardStepWrapperComponent extends Component<WizardStepWrap
 
   @action
   handleWheelEvent(event: WheelEvent): void {
-    if (!this.wheelListenerEnabled || this.wheelHandled) return;
+    let target = event.target as HTMLElement | null;
+    while (target) {
+      if (
+        target.classList &&
+        target.classList.contains(
+          this.wizardManager.configOptions.skipScrollEventsClass ?? DEFAULT_CLASS_TO_SKIP_SCROLL_LISTENER
+        )
+      ) {
+        return;
+      }
+      target = target.parentElement;
+    }
+
+    if (!this.wizardManager.wheelEnabled || !this.wheelListenerEnabled || this.wheelHandled) return;
     if (!this.scrollPosition && !this.wheelListenerEnabled) return;
     if (this.scrollPosition === 'middle') return;
     this.wheelHandled = true;
@@ -86,7 +100,9 @@ export default class WizardStepWrapperComponent extends Component<WizardStepWrap
   @action
   handleScrollEvent(event: Event): void {
     const target = event.target as HTMLElement;
-    if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
+    const Tolerance = 1;
+
+    if (target.scrollHeight - target.scrollTop - target.clientHeight <= Tolerance) {
       this.scrollPosition = 'bottom';
       this.enableWheelListenerAfterDelay(SCROLL_EVENTS_DELAY);
     } else if (target.scrollTop === 0) {
diff --git a/addon/services/wizard-manager.ts b/addon/services/wizard-manager.ts
index 14ff72556..ec01ecc3c 100644
--- a/addon/services/wizard-manager.ts
+++ b/addon/services/wizard-manager.ts
@@ -30,6 +30,7 @@ export type ConfigurationOptions = {
   centerStepsInContainer?: boolean;
   stepWrapperBaseClass?: string;
   containerClass?: string;
+  skipScrollEventsClass?: string;
 };
 
 export type WizardConfiguration = {
@@ -52,6 +53,7 @@ export default class WizardManager extends Service {
   @tracked sections: Section[] = [];
   @tracked declare focusedStepId: string;
   @tracked declare configOptions: ConfigurationOptions;
+  @tracked wheelEnabled: boolean = true;
 
   get allSteps(): Step[] {
     return this.sections.flatMap((section: Section) => section.steps);
@@ -77,7 +79,10 @@ export default class WizardManager extends Service {
     const firstFocusableStep = this.sections[0]?.steps.find((step: Step) => step.displayState !== 'empty');
     if (firstFocusableStep) {
       this.focusedStepId = firstFocusableStep.id;
-      this.selectStep(firstFocusableStep.id);
+      this.setDisplayStates();
+      next(this, () => {
+        document.getElementById(firstFocusableStep.id)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      });
     }
   }
 
@@ -88,7 +93,7 @@ export default class WizardManager extends Service {
     }
   }
 
-  selectStep(stepId: string, bypassValidations?: boolean): void {
+  async selectStep(stepId: string, bypassValidations?: boolean): Promise<void> {
     if (bypassValidations) {
       this.focusStep(stepId);
       return;
@@ -101,22 +106,37 @@ export default class WizardManager extends Service {
     const currentStepIndex = this.focusedStepId ? this.findIndexOfStep(this.focusedStepId) : -1;
     if (currentStepIndex !== -1) {
       const stepsToValidate = this.allSteps.slice(currentStepIndex, targetStepIndex);
-      const validationPromises = stepsToValidate.map((step: Step) => {
-        if (step.completed) return Promise.resolve(true);
-        return step.validateStep ? step.validateStep() : Promise.resolve(true);
-      });
 
-      Promise.all(validationPromises).then((results: boolean[]) => {
-        if (results.every((result: boolean) => result)) {
-          this.focusStep(stepId);
-        } else {
-          const firstInvalidIndex = results.findIndex((result: boolean) => !result);
-          if (firstInvalidIndex !== -1) {
-            this.focusStep(this.allSteps[currentStepIndex + firstInvalidIndex]?.id ?? '');
-          }
+      const stepIdToFocus = await this.runValidationsSequentiallyAndReturnFirstFailingStep(
+        stepsToValidate,
+        currentStepIndex,
+        stepId
+      );
+      if (stepIdToFocus) {
+        this.focusStep(stepIdToFocus);
+      }
+    }
+  }
+
+  private async runValidationsSequentiallyAndReturnFirstFailingStep(
+    stepsToValidate: Step[],
+    currentStepIndex: number,
+    targetStepId: string
+  ): Promise<string | null> {
+    for (let i = 0; i < stepsToValidate.length; i++) {
+      const step = stepsToValidate[i];
+      if (step?.completed || step?.hidden) continue;
+
+      const isValid = step!.validateStep ? await step!.validateStep() : true;
+      if (!isValid) {
+        const failingStepIndex = currentStepIndex + i;
+        if (failingStepIndex !== currentStepIndex) {
+          return this.allSteps[failingStepIndex]?.id ?? null;
         }
-      });
+        return null;
+      }
     }
+    return targetStepId;
   }
 
   selectNextStep(): void {
@@ -146,12 +166,12 @@ export default class WizardManager extends Service {
     this.configOptions = {};
   }
 
+  markStepAsIncomplete(stepId: string): void {
+    this.markCompletionOnStep(stepId, false);
+  }
+
   markStepAsCompleted(stepId: string): void {
-    const step = this.findStepById(stepId);
-    if (step) {
-      set(step, 'completed', true);
-    }
-    this.notifySectionChange();
+    this.markCompletionOnStep(stepId, true);
   }
 
   toggleStepVisibility(stepId: string, hidden: boolean): void {
@@ -163,6 +183,14 @@ export default class WizardManager extends Service {
     }
   }
 
+  enableWheelScroll(): void {
+    this.wheelEnabled = true;
+  }
+
+  disableWheelScroll(): void {
+    this.wheelEnabled = false;
+  }
+
   private get currentSection(): Section | undefined {
     return this.sections.find((section: Section) => section.steps.some((step: Step) => step.id === this.focusedStepId));
   }
@@ -182,18 +210,29 @@ export default class WizardManager extends Service {
   private findFirstFocusableStepInSection(sectionId: string): Step | undefined {
     const section = this.sections.find((section: Section) => section.id === sectionId);
     if (section) {
-      return section.steps.find((step: Step) => step.displayState !== 'empty');
+      return section.steps.find((step: Step) => step.displayState !== 'empty' && !step.hidden);
     }
     return undefined;
   }
 
   private focusStep(stepId: string): void {
-    const stepExists = this.sections.some((section: Section) => section.steps.some((step: Step) => step.id === stepId));
-    if (stepExists) {
-      set(this, 'focusedStepId', stepId);
+    const stepPosition: 'before' | 'after' =
+      this.findIndexOfStep(stepId) > this.findIndexOfStep(this.focusedStepId) ? 'after' : 'before';
+
+    let targetStep = stepPosition === 'after' ? this.nextStep : this.previousStep;
+    if (!targetStep) {
+      targetStep = this.findStepById(stepId);
+    }
+    if (targetStep) {
+      set(this, 'focusedStepId', targetStep.id);
       this.setDisplayStates();
       next(this, () => {
         document.getElementById(stepId)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        if (stepId !== this.focusedStepId) {
+          next(this, () => {
+            this.focusStep(stepId);
+          });
+        }
       });
     }
   }
@@ -268,6 +307,14 @@ export default class WizardManager extends Service {
       });
     }
   }
+
+  private markCompletionOnStep(stepId: string, value: boolean): void {
+    const step = this.findStepById(stepId);
+    if (step) {
+      set(step, 'completed', value);
+    }
+    this.notifySectionChange();
+  }
 }
 
 declare module '@ember/service' {
diff --git a/addon/utils/attach-dropdown.ts b/addon/utils/attach-dropdown.ts
index 337d1fbf1..a24bf1e16 100644
--- a/addon/utils/attach-dropdown.ts
+++ b/addon/utils/attach-dropdown.ts
@@ -16,6 +16,7 @@ export type AttachmentOptions = {
   offset?: number;
   width?: number;
   maxHeight?: number;
+  maxWidth?: number;
   placement?: Placement;
   enableArrow?: boolean;
   placementStrategy?: 'auto' | 'flip';
@@ -55,6 +56,11 @@ export default function attachDropdown(
           width: `${desiredWidth}px`
         };
 
+        if (mergedOptions.maxWidth) {
+          floatingStyle.width = `fit-content`;
+          floatingStyle.maxWidth = `${mergedOptions.maxWidth}px`;
+        }
+
         if (mergedOptions.maxHeight) {
           floatingStyle.maxHeight = `${floatingStyle.maxHeight}px`;
           elements.floating.style.setProperty('--floating-max-height', `${mergedOptions.maxHeight}px`);
diff --git a/app/components/o-s-s/smart/button.js b/app/components/o-s-s/smart/button.js
new file mode 100644
index 000000000..cd9027367
--- /dev/null
+++ b/app/components/o-s-s/smart/button.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/button';
diff --git a/app/components/o-s-s/smart/feedback.js b/app/components/o-s-s/smart/feedback.js
new file mode 100644
index 000000000..97e7066fa
--- /dev/null
+++ b/app/components/o-s-s/smart/feedback.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/feedback';
diff --git a/app/components/o-s-s/smart/immersive/currency-input.js b/app/components/o-s-s/smart/immersive/currency-input.js
new file mode 100644
index 000000000..a4859856d
--- /dev/null
+++ b/app/components/o-s-s/smart/immersive/currency-input.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/immersive/currency-input';
diff --git a/app/components/o-s-s/smart/immersive/input.js b/app/components/o-s-s/smart/immersive/input.js
new file mode 100644
index 000000000..24cf5582a
--- /dev/null
+++ b/app/components/o-s-s/smart/immersive/input.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/immersive/input';
diff --git a/app/components/o-s-s/smart/immersive/logo.js b/app/components/o-s-s/smart/immersive/logo.js
new file mode 100644
index 000000000..ceebc0e6f
--- /dev/null
+++ b/app/components/o-s-s/smart/immersive/logo.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/immersive/logo';
diff --git a/app/components/o-s-s/smart/immersive/select.js b/app/components/o-s-s/smart/immersive/select.js
new file mode 100644
index 000000000..348910c5d
--- /dev/null
+++ b/app/components/o-s-s/smart/immersive/select.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/immersive/select';
diff --git a/app/components/o-s-s/smart/input.js b/app/components/o-s-s/smart/input.js
new file mode 100644
index 000000000..8c0aef15a
--- /dev/null
+++ b/app/components/o-s-s/smart/input.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/input';
diff --git a/app/components/o-s-s/smart/number-input.js b/app/components/o-s-s/smart/number-input.js
new file mode 100644
index 000000000..eae3065ba
--- /dev/null
+++ b/app/components/o-s-s/smart/number-input.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/number-input';
diff --git a/app/components/o-s-s/smart/skeleton.js b/app/components/o-s-s/smart/skeleton.js
new file mode 100644
index 000000000..8d2ddefb6
--- /dev/null
+++ b/app/components/o-s-s/smart/skeleton.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/skeleton';
diff --git a/app/components/o-s-s/smart/tag-input.js b/app/components/o-s-s/smart/tag-input.js
new file mode 100644
index 000000000..eaccfeba3
--- /dev/null
+++ b/app/components/o-s-s/smart/tag-input.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/tag-input';
diff --git a/app/components/o-s-s/smart/tag.js b/app/components/o-s-s/smart/tag.js
new file mode 100644
index 000000000..eb46e3faf
--- /dev/null
+++ b/app/components/o-s-s/smart/tag.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/tag';
diff --git a/app/components/o-s-s/smart/text-area.js b/app/components/o-s-s/smart/text-area.js
new file mode 100644
index 000000000..cae83d991
--- /dev/null
+++ b/app/components/o-s-s/smart/text-area.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/text-area';
diff --git a/app/components/o-s-s/smart/toggle-buttons.js b/app/components/o-s-s/smart/toggle-buttons.js
new file mode 100644
index 000000000..7418a161b
--- /dev/null
+++ b/app/components/o-s-s/smart/toggle-buttons.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/toggle-buttons';
diff --git a/app/styles/animations/smart-rotating-gradient.less b/app/styles/animations/smart-rotating-gradient.less
index 901a18a53..366c049a7 100644
--- a/app/styles/animations/smart-rotating-gradient.less
+++ b/app/styles/animations/smart-rotating-gradient.less
@@ -1,6 +1,7 @@
 .smart-rotating-gradient {
   position: relative;
   z-index: 0;
+  pointer-events: none;
 
   &::after {
     content: '';
diff --git a/app/styles/atoms/button.less b/app/styles/atoms/button.less
index f3100c507..75aa59746 100644
--- a/app/styles/atoms/button.less
+++ b/app/styles/atoms/button.less
@@ -337,12 +337,174 @@
   .generate-extended-palette-btn(violet);
 }
 
+.upf-smart-btn-container {
+  position: relative;
+  pointer-events: none;
+  height: fit-content;
+  width: fit-content;
+
+  button {
+    pointer-events: all;
+  }
+
+  &:has(> .upf-smart-btn--primary:not(:disabled)) {
+    &::before {
+      content: '';
+      width: calc(100% + 4px);
+      height: calc(100% + 4px);
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 0;
+      border-radius: var(--border-radius-xl);
+      background: var(--color-smart-gradient-400);
+      opacity: 0;
+      transition: opacity 0.25s ease-in-out;
+    }
+
+    &:hover,
+    &:active {
+      &::before {
+        opacity: 0.4;
+      }
+    }
+  }
+
+  .upf-smart-btn {
+    .upf-btn;
+    flex: 1;
+    border-radius: var(--border-radius-xl);
+
+    &:disabled {
+      .disabled-button;
+    }
+
+    &--xs,
+    &--sm {
+      height: var(--spacing-px-24);
+      padding: var(--spacing-px-3) var(--spacing-px-12);
+
+      a& {
+        line-height: 2rem;
+      }
+    }
+
+    &--md {
+      height: var(--spacing-px-36);
+    }
+
+    &--lg {
+      height: var(--spacing-px-48);
+    }
+
+    img {
+      max-width: 12px;
+      max-height: 12px;
+    }
+  }
+
+  .upf-smart-btn--primary {
+    position: relative;
+    overflow: hidden;
+    z-index: 0;
+    background: var(--color-smart-gradient-500);
+    border: 1px solid var(--color-smart-gradient-500);
+    color: var(--color-white);
+
+    a& {
+      line-height: 2.4rem;
+    }
+
+    &:not(:disabled)::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      background: var(--color-smart-gradient-600);
+      border: 1px solid var(--color-smart-gradient-600);
+      opacity: 0;
+      transition: opacity 0.25s ease-in-out;
+    }
+
+    &:not(:disabled):hover::after {
+      opacity: 1;
+    }
+
+    &:not(:disabled):active::after {
+      background: var(--color-smart-gradient-400);
+      border: 1px solid var(--color-smart-gradient-400);
+    }
+
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    &:disabled {
+      background: none;
+      .disabled-button;
+
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  .upf-smart-btn--secondary {
+    background-color: var(--color-violet-50);
+    border: 1px solid var(--color-violet-500);
+    color: var(--color-violet-500);
+
+    a& {
+      line-height: 2.4rem;
+    }
+
+    &:hover,
+    &:active {
+      position: relative;
+      color: var(--color-white);
+      box-shadow: 0px 0px 0px 2px var(--color-violet-100), var(--box-shadow-xs);
+    }
+
+    &:hover {
+      background-color: var(--color-violet-600);
+      border: 1px solid var(--color-violet-600);
+    }
+
+    &:active {
+      background-color: var(--color-violet-400);
+      border: 1px solid var(--color-violet-400);
+    }
+
+    &:disabled {
+      &:hover,
+      &:active {
+        .disabled-button;
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.upf-smart-square-btn {
+  .upf-square-btn;
+  height: var(--spacing-px-36);
+  width: var(--spacing-px-36);
+  border-radius: var(--border-radius-xl);
+
+  img {
+    max-width: 12px;
+    max-height: 12px;
+  }
+}
+
 // Button Sizes
 // --------------------------------------------------
 
 .upf-btn--small,
 .upf-btn--sm {
-  height: 24px;
+  height: var(--spacing-px-24);
   padding: var(--spacing-px-3) var(--spacing-px-12);
 
   a& {
diff --git a/app/styles/atoms/smart-feedback.less b/app/styles/atoms/smart-feedback.less
new file mode 100644
index 000000000..f39badcf5
--- /dev/null
+++ b/app/styles/atoms/smart-feedback.less
@@ -0,0 +1,30 @@
+.oss-smart__feedback {
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: var(--spacing-px-12) var(--spacing-px-18);
+  border-radius: var(--spacing-px-12);
+  min-height: 56px;
+  transition: height 0.5s ease;
+
+  border: 1px solid transparent;
+  background: linear-gradient(45deg, var(--color-white) 0%, var(--color-primary-50) 100%) padding-box,
+    linear-gradient(90deg, var(--color-primary-100) 0%, var(--color-white) 72.5%) border-box;
+  transition: background 0.3s ease;
+
+  &__generated,
+  &__loading,
+  .oss-smart__feedback__content {
+    width: 100%;
+  }
+
+  &__content {
+    color: var(--color-primary-400);
+    font-size: var(--font-size-md);
+    font-family: 'Reddit Sans', sans-serif;
+
+    &__text {
+      display: inline-block;
+    }
+  }
+}
diff --git a/app/styles/atoms/smart-input.less b/app/styles/atoms/smart-input.less
new file mode 100644
index 000000000..2a74ed716
--- /dev/null
+++ b/app/styles/atoms/smart-input.less
@@ -0,0 +1,43 @@
+.oss-smart-input-container {
+  width: 100%;
+
+  .oss-input-container {
+    width: 100%;
+    position: relative;
+    display: flex;
+
+    .loading-placeholder {
+      pointer-events: none;
+      display: flex;
+      flex: 1;
+      align-items: center;
+      width: fit-content;
+      position: relative;
+    }
+
+    .upf-input.loading-placeholder {
+      padding: 0px;
+    }
+
+    .smart_text_animated {
+      background: var(--color-gray-400);
+      background: linear-gradient(
+        130deg,
+        var(--color-gray-400) 18%,
+        var(--color-gray-300) 25%,
+        rgba(250, 198, 255, 1) 56%,
+        var(--color-primary-100) 62%,
+        var(--color-white) 66%,
+        rgba(250, 198, 255, 0.58) 68%,
+        var(--color-gray-300) 73%,
+        var(--color-gray-400) 85%
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      animation: smart_loading_text_animation 3.5s ease-in-out infinite;
+      background-size: 600% 100%;
+      padding: 6px 12px;
+    }
+  }
+}
diff --git a/app/styles/atoms/smart-textarea.less b/app/styles/atoms/smart-textarea.less
new file mode 100644
index 000000000..88f75032e
--- /dev/null
+++ b/app/styles/atoms/smart-textarea.less
@@ -0,0 +1,51 @@
+.oss-smart-text-area-container {
+  .oss-textarea-container;
+  flex: 1;
+
+  > div {
+    position: relative;
+  }
+
+  .loading-placeholder {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .smart_text_animated {
+    background: var(--color-gray-400);
+    background: linear-gradient(
+      130deg,
+      var(--color-gray-400) 18%,
+      var(--color-gray-300) 25%,
+      rgba(250, 198, 255, 1) 56%,
+      var(--color-primary-100) 62%,
+      var(--color-white) 66%,
+      rgba(250, 198, 255, 0.58) 68%,
+      var(--color-gray-300) 73%,
+      var(--color-gray-400) 85%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: smart_loading_text_animation 3.5s ease-in-out infinite;
+    background-size: 600% 100%;
+    padding: var(--spacing-px-6) 0px;
+
+    border: 0;
+    font-family: var(--font-family-stack);
+    .font-size-sm;
+  }
+
+  .oss-textarea {
+    transition: all 0s;
+  }
+
+  .oss-textarea--loading {
+    visibility: hidden;
+  }
+}
diff --git a/app/styles/atoms/smart/immersive-currency-input.less b/app/styles/atoms/smart/immersive-currency-input.less
new file mode 100644
index 000000000..f5c3ef610
--- /dev/null
+++ b/app/styles/atoms/smart/immersive-currency-input.less
@@ -0,0 +1,159 @@
+.smart-immersive-currency-input-container {
+  .currency-input-container;
+  width: fit-content;
+  flex: none;
+
+  &.smart-rotating-gradient {
+    .smart-immersive-currency-input {
+      border: 1px dashed transparent;
+    }
+  }
+
+  & * {
+    .font-weight-semibold;
+  }
+
+  .smart-immersive-currency-input {
+    .currency-input;
+    width: fit-content;
+    height: 32px;
+    border: 1px dashed var(--color-gray-400);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-white);
+
+    &:not(.disabled, :disabled) {
+
+      &:hover,
+      &:focus-within {
+        border: 1px dashed var(--color-gray-500);
+        background-color: transparent;
+        box-shadow: none;
+      }
+    }
+
+    .currency-selector {
+      gap: var(--spacing-px-6);
+      padding: 10px;
+      width: 50px;
+      height: 100%;
+      border-right: none;
+      color: var(--color-gray-500);
+    }
+
+    .input-container {
+      min-width: 50px;
+      width: min-content;
+
+      .hidden-span {
+        height: 0px;
+        display: block;
+        padding: 0 6px;
+        visibility: hidden;
+        width: fit-content;
+        white-space: pre;
+      }
+
+      .displayed-input {
+        width: 100%;
+        padding: 5px 6px;
+        color: var(--color-gray-400);
+
+        &::placeholder {
+          color: var(--color-gray-400);
+        }
+      }
+    }
+
+    .displayed-input,
+    .loading-placeholder {
+      height: 32px;
+      min-width: 50px;
+      border: 1px transparent;
+    }
+
+    .loading-placeholder {
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      width: fit-content;
+      position: relative;
+      padding: 0;
+
+      .rainbow-text-animated {
+        .font-weight-semibold;
+        background: linear-gradient(130deg,
+            var(--color-gray-400) 18%,
+            var(--color-gray-300) 25%,
+            rgba(250, 198, 255, 1) 56%,
+            var(--color-primary-100) 62%,
+            var(--color-white) 66%,
+            rgba(250, 198, 255, 0.58) 68%,
+            var(--color-gray-300) 73%,
+            var(--color-gray-400) 85%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        animation: smart_loading_text_animation 3.5s ease-in-out infinite;
+        background-size: 600% 100%;
+        padding: 5px 6px;
+      }
+    }
+  }
+
+  &--filled {
+    .smart-immersive-currency-input {
+      border-color: var(--color-primary-400);
+
+      .currency-selector,
+      .input-container .displayed-input {
+        transition: all 250ms ease-in-out;
+        color: var(--color-primary-400);
+      }
+
+      .currency-selector {
+        background-color: var(--color-primary-50);
+      }
+
+      &:not(.disabled, :disabled) {
+
+        &:focus-within,
+        &:active {
+          border-color: var(--color-primary-400);
+        }
+      }
+
+      &:hover:not(:focus, :active) {
+        border: 1px dashed var(--color-primary-300);
+
+        .currency-selector,
+        .displayed-input {
+          color: var(--color-primary-300);
+        }
+      }
+    }
+  }
+
+  &--errored {
+    .smart-immersive-currency-input {
+      .border-color-error;
+
+      &:not(.disabled, :disabled) {
+
+        &:focus-within,
+        &:hover {
+          .border-color-error;
+        }
+      }
+    }
+  }
+}
+
+@keyframes smart_loading_text_animation {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: 0 0%;
+  }
+}
\ No newline at end of file
diff --git a/app/styles/atoms/smart/immersive-input.less b/app/styles/atoms/smart/immersive-input.less
new file mode 100644
index 000000000..4f1c22ad4
--- /dev/null
+++ b/app/styles/atoms/smart/immersive-input.less
@@ -0,0 +1,206 @@
+.smart-immersive-input-container {
+  width: fit-content;
+
+  .smart-immersive-input-sizer {
+    width: min-content;
+  }
+
+  .smart-immersive-span-placeholder {
+    height: 0px;
+    display: block;
+    padding: 0 calc(var(--spacing-px-12) + 1px);
+    visibility: hidden;
+    width: fit-content;
+    white-space: pre;
+
+    &:has(+ input[type='number']) {
+      padding: 0 calc(var(--spacing-px-24) + 1px);
+    }
+  }
+
+  .smart-immersive--input-container {
+    display: flex;
+    border: 1px dashed var(--color-gray-400);
+    border-radius: var(--border-radius-sm);
+    height: 32px;
+    overflow: hidden;
+
+    .prefix,
+    .suffix {
+      display: flex;
+      position: relative;
+      background-color: var(--color-gray-100);
+      color: var(--color-gray-500);
+    }
+
+    &:focus,
+    &:active,
+    &:hover {
+      border: 1px dashed var(--color-gray-600);
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  &.oss-input-container {
+    .smart-immersive--input,
+    .loading-placeholder {
+      height: 100%;
+      min-width: 50px;
+      border: 0;
+      border-radius: 0;
+
+      &:focus,
+      &:active,
+      &:hover {
+        border: 0;
+        background-color: transparent;
+        box-shadow: none;
+      }
+    }
+
+    .upf-input.loading-placeholder {
+      padding: 0px;
+    }
+
+    .loading-placeholder {
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      width: fit-content;
+      position: relative;
+    }
+
+    .smart_text_animated {
+      background: var(--color-gray-400);
+      background: linear-gradient(
+        130deg,
+        var(--color-gray-400) 18%,
+        var(--color-gray-300) 25%,
+        rgba(250, 198, 255, 1) 56%,
+        var(--color-primary-100) 62%,
+        var(--color-white) 66%,
+        rgba(250, 198, 255, 0.58) 68%,
+        var(--color-gray-300) 73%,
+        var(--color-gray-400) 85%
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      animation: smart_loading_text_animation 3.5s ease-in-out infinite;
+      background-size: 600% 100%;
+      padding: 6px 12px;
+    }
+  }
+
+  &.oss-input-container.smart-rotating-gradient {
+    .smart-immersive--input-container {
+      border: 1px dashed transparent;
+    }
+  }
+
+  &--filled {
+    &.oss-input-container {
+      .smart-immersive--input-container {
+        border-color: var(--color-primary-400);
+
+        .smart-immersive--input {
+          color: var(--color-primary-400);
+        }
+
+        &:focus,
+        &:active {
+          border: 1px dashed var(--color-primary-400);
+        }
+
+        &:hover:not(:focus, :active) {
+          border: 1px dashed var(--color-primary-300);
+
+          .smart-immersive--input {
+            color: var(--color-primary-300);
+          }
+
+          .prefix,
+          .suffix {
+            color: var(--color-primary-300);
+          }
+        }
+
+        .prefix,
+        .suffix {
+          background-color: var(--color-primary-50);
+          color: var(--color-primary-400);
+        }
+      }
+    }
+  }
+
+  &--warning {
+    &.oss-input-container {
+      .smart-immersive--input-container {
+        border-color: var(--color-warning-500);
+
+        &:hover:not(:focus, :active),
+        &:focus,
+        &:active {
+          border: 1px dashed var(--color-warning-500);
+        }
+      }
+    }
+  }
+
+  &--success {
+    &.oss-input-container {
+      .smart-immersive--input-container {
+        border-color: var(--color-success-500);
+
+        &:hover:not(:focus, :active),
+        &:focus,
+        &:active {
+          border: 1px dashed var(--color-success-500);
+        }
+      }
+    }
+  }
+
+  &--errored,
+  &--error {
+    &.oss-input-container {
+      .smart-immersive--input-container {
+        border-color: var(--color-error-500);
+
+        &:hover:not(:focus, :active),
+        &:focus,
+        &:active {
+          border: 1px dashed var(--color-error-500);
+        }
+      }
+    }
+  }
+
+  &.oss-input-container {
+    &--errored .yielded-input input:not(:disabled, .disabled):focus,
+    &--error .yielded-input input:not(:disabled, .disabled):focus,
+    &--warning .yielded-input input:not(:disabled, .disabled):focus,
+    &--success .yielded-input input:not(:disabled, .disabled):focus {
+      box-shadow: none;
+    }
+
+    &--errored .yielded-input input:not(:disabled, .disabled):hover,
+    &--error .yielded-input input:not(:disabled, .disabled):hover,
+    &--warning .yielded-input input:not(:disabled, .disabled):hover,
+    &--success .yielded-input input:not(:disabled, .disabled):hover {
+      background: transparent;
+    }
+  }
+}
+
+@keyframes smart_loading_text_animation {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: 0 0%;
+  }
+}
diff --git a/app/styles/atoms/smart/immersive-select.less b/app/styles/atoms/smart/immersive-select.less
new file mode 100644
index 000000000..17bf8dd0f
--- /dev/null
+++ b/app/styles/atoms/smart/immersive-select.less
@@ -0,0 +1,102 @@
+.smart-immersive-select-container {
+  width: fit-content;
+  position: relative;
+
+  .upf-input {
+    height: fit-content;
+    padding: 4px var(--spacing-px-6);
+    min-width: 50px;
+
+    border: 1px dashed var(--color-gray-400);
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    align-items: center;
+
+    &.loading-placeholder {
+      height: 32px;
+      min-width: 50px;
+      padding: 0;
+      pointer-events: none;
+      border: 1px dashed var(--color-gray-400);
+    }
+
+    &:focus,
+    &.active,
+    &:hover {
+      border: 1px dashed var(--color-gray-600);
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  &.smart-rotating-gradient {
+    .upf-input {
+      border: 1px dashed transparent;
+    }
+  }
+
+  &--filled {
+    .upf-input {
+      color: var(--color-primary-400);
+      border-color: var(--color-primary-400);
+
+      &:focus,
+      &.active {
+        border: 1px dashed var(--color-primary-400);
+      }
+
+      &:hover:not(:focus, .active) {
+        border: 1px dashed var(--color-primary-300);
+
+        .select-smart-item {
+          color: var(--color-primary-300);
+        }
+      }
+    }
+  }
+
+  &--errored,
+  &--error {
+    .upf-input {
+      border-color: var(--color-error-500);
+
+      &:hover:not(:focus, .active),
+      &:focus,
+      &.active {
+        border: 1px dashed var(--color-error-500);
+      }
+    }
+  }
+
+  .select-smart-item {
+    .font-weight-semibold;
+    .text-ellipsis;
+    background: var(--color-primary-50);
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--color-white);
+    padding: 0 var(--spacing-px-6);
+    color: var(--color-primary-400);
+  }
+
+  .smart_text_animated {
+    background: var(--color-gray-400);
+    background: linear-gradient(
+      130deg,
+      var(--color-gray-400) 18%,
+      var(--color-gray-300) 25%,
+      rgba(250, 198, 255, 1) 56%,
+      var(--color-primary-100) 62%,
+      var(--color-white) 66%,
+      rgba(250, 198, 255, 0.58) 68%,
+      var(--color-gray-300) 73%,
+      var(--color-gray-400) 85%
+    );
+    font-size: var(--font-size-md);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: smart_loading_text_animation 3.5s ease-in-out infinite;
+    background-size: 600% 100%;
+    padding: var(--spacing-px-6);
+  }
+}
diff --git a/app/styles/atoms/smart/logo.less b/app/styles/atoms/smart/logo.less
new file mode 100644
index 000000000..b3d21f9a2
--- /dev/null
+++ b/app/styles/atoms/smart/logo.less
@@ -0,0 +1,242 @@
+.smart-logo-icon-color {
+  &_stone {
+    background-color: #f5f5f4;
+    color: #78716c;
+  }
+
+  &_rose {
+    background-color: #ffe4e6;
+    color: #f43f5e;
+  }
+
+  &_orange {
+    background-color: var(--color-orange-100);
+    color: var(--color-orange-500);
+  }
+
+  &_yellow {
+    background-color: var(--color-yellow-100);
+    color: var(--color-yellow-500);
+  }
+
+  &_lime {
+    background-color: var(--color-lime-100);
+    color: var(--color-lime-500);
+  }
+
+  &_emerald {
+    background-color: var(--color-success-100);
+    color: var(--color-success-500);
+  }
+
+  &_teal {
+    background-color: var(--color-info-100);
+    color: var(--color-info-500);
+  }
+
+  &_cyan {
+    background-color: var(--color-cyan-100);
+    color: var(--color-cyan-500);
+  }
+
+  &_sky {
+    background-color: #e0f2fe;
+    color: #0ea5e9;
+  }
+
+  &_blue {
+    background-color: var(--color-blue-100);
+    color: var(--color-blue-500);
+  }
+
+  &_indigo {
+    background-color: #e0e7ff;
+    color: #6366f1;
+  }
+
+  &_violet {
+    background-color: var(--color-violet-100);
+    color: var(--color-violet-500);
+  }
+
+  &_purple {
+    background-color: #f3e8ff;
+    color: #a855f7;
+  }
+
+  &_fuschia {
+    background-color: #fae8ff;
+    color: #d946ef;
+  }
+
+  &_pink {
+    background-color: #fce7f3;
+    color: #ec4899;
+  }
+
+  &_slate {
+    background-color: #f1f5f9;
+    color: #64748b;
+  }
+}
+
+.oss-smart__immersive-icon-container {
+  display: flex;
+  position: relative;
+  height: var(--spacing-px-36);
+  width: var(--spacing-px-36);
+  transition: all 250ms ease-in-out;
+
+  &--errored .smart-logo-icon,
+  &--errored .smart-logo-image {
+    border: 1px solid var(--color-error-500);
+  }
+
+  &.smart-rotating-gradient {
+    &::after {
+      border-radius: var(--border-radius-md);
+    }
+  }
+
+  .smart-logo-icon,
+  .smart-logo-image {
+    height: var(--spacing-px-36);
+    width: var(--spacing-px-36);
+    object-fit: cover;
+    background-size: cover;
+    background-position: center;
+    border-radius: var(--border-radius-md);
+    background-color: var(--color-gray-200);
+  }
+
+  .edit-overlay {
+    position: absolute;
+    opacity: 0;
+    transition: all 250ms ease-in-out;
+    height: var(--spacing-px-36);
+    width: var(--spacing-px-36);
+    border-radius: var(--border-radius-md);
+
+    &:active {
+      display: flex;
+      background-color: var(--color-gray-900);
+      opacity: 60%;
+      color: var(--color-white);
+      z-index: 1;
+      cursor: pointer;
+    }
+  }
+
+  &:hover {
+    .edit-overlay {
+      display: flex;
+      background-color: var(--color-gray-600);
+      opacity: 60%;
+      color: var(--color-white);
+      z-index: 1;
+      cursor: pointer;
+    }
+  }
+
+  &--size {
+    &-sm {
+      height: 12px;
+      width: 12px;
+      border-radius: calc(8px / 3);
+
+      .edit-overlay,
+      .smart-logo-icon,
+      .smart-logo-image {
+        font-size: 6px;
+        height: 12px;
+        width: 12px;
+        border-radius: calc(8px / 3);
+      }
+    }
+
+    &-md {
+      height: 36px;
+      width: 36px;
+
+      .edit-overlay,
+      .smart-logo-icon,
+      .smart-logo-image {
+        height: 36px;
+        width: 36px;
+      }
+    }
+
+    &-lg {
+      height: 60px;
+      width: 60px;
+
+      .edit-overlay,
+      .smart-logo-icon,
+      .smart-logo-image {
+        height: 60px;
+        width: 60px;
+      }
+    }
+  }
+
+  &--generating {
+    .smart-logo-icon::before,
+    .smart-logo-image::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      pointer-events: none;
+
+      background: linear-gradient(
+        270deg,
+        rgba(245, 245, 244, 0) 65%,
+        rgba(250, 198, 255, 0.7) 73.75%,
+        rgba(208, 217, 255, 0.8) 76.81%,
+        rgba(255, 255, 255, 0.3) 81.54%,
+        #fac6ff 85.82%,
+        #d0d9ff 92.59%,
+        rgba(245, 245, 244, 0) 100%
+      );
+      background-size: 300% 100%;
+      background-repeat: no-repeat;
+      background-blend-mode: normal;
+      animation: stripeGlow 2s ease-in-out infinite;
+      opacity: 0.6;
+    }
+
+    .smart-logo-icon,
+    .smart-logo-image {
+      position: relative;
+      overflow: hidden;
+      z-index: 1;
+    }
+  }
+}
+
+@keyframes stripeGlow {
+  0% {
+    background-position: 100% 0%;
+    transform: scaleX(1);
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  50% {
+    background-position: 50% 0%;
+    transform: scaleX(1);
+  }
+
+  90% {
+    opacity: 1;
+  }
+
+  100% {
+    background-position: -100% 0%;
+    transform: scaleX(1.2);
+    opacity: 0;
+  }
+}
diff --git a/app/styles/atoms/smart/number-input.less b/app/styles/atoms/smart/number-input.less
new file mode 100644
index 000000000..f2db2b973
--- /dev/null
+++ b/app/styles/atoms/smart/number-input.less
@@ -0,0 +1,141 @@
+.oss-smart-number-input-container {
+  .smart-number-input {
+    .number-input;
+
+    &:active,
+    &:focus-within {
+      .input-state-active;
+      border: 1px dashed var(--color-primary-400);
+      box-shadow: none;
+    }
+
+    border: 1px dashed var(--color-primary-400);
+    background-color: var(--color-white);
+    transition: all 0.2s ease;
+
+    .upf-square-btn {
+      background-color: var(--color-primary-50);
+      color: var(--color-primary-400);
+      border: none;
+      transition: all 0.2s ease;
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    i,
+    input {
+      color: var(--color-primary-400);
+    }
+
+    .oss-input-container {
+      border: none;
+      background: transparent;
+
+      .upf-input {
+        border: none;
+        background: transparent;
+        color: var(--color-primary-400);
+
+        i,
+        input {
+          color: var(--color-gray-500);
+        }
+
+        &:focus {
+          border: none;
+          box-shadow: none;
+          background: transparent;
+        }
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    &:hover:not(.smart-number-input--filled):not(.smart-number-input--errored):not(.smart-number-input--loading) {
+      .upf-square-btn {
+        background-color: var(--color-gray-100);
+        color: var(--color-gray-500);
+      }
+
+      i,
+      input {
+        color: var(--color-gray-500);
+      }
+    }
+
+    &:focus-within:not(.smart-number-input--filled):not(.smart-number-input--errored):not(
+        .smart-number-input--loading
+      ) {
+      border: 1px dashed var(--color-gray-500);
+
+      .upf-square-btn {
+        color: var(--color-gray-500);
+      }
+
+      i,
+      input {
+        color: var(--color-gray-500);
+      }
+
+      .upf-input {
+        cursor: text;
+      }
+    }
+
+    &--filled {
+      border-color: var(--color-primary-400);
+      background-color: var(--color-white);
+
+      .upf-square-btn {
+        background-color: var(--color-primary-50);
+        color: var(--color-primary-400);
+      }
+
+      i,
+      input {
+        color: var(--color-primary-400);
+      }
+
+      &:hover {
+        border-color: var(--color-primary-300);
+
+        i,
+        input {
+          color: var(--color-primary-300);
+        }
+      }
+    }
+
+    &--errored {
+      border: 1px dashed var(--color-error-500);
+      background-color: var(--color-white);
+
+      .upf-square-btn {
+        background-color: var(--color-gray-100);
+        color: var(--color-gray-500);
+      }
+
+      .oss-input-container .upf-input {
+        color: var(--color-gray-500);
+      }
+
+      i {
+        color: var(--color-gray-500);
+      }
+
+      &:hover {
+        border-color: var(--color-error-600);
+      }
+
+      &:focus-within {
+        border: 1px dashed var(--color-error-600);
+        box-shadow: none;
+      }
+    }
+  }
+}
diff --git a/app/styles/atoms/smart/tag-input.less b/app/styles/atoms/smart/tag-input.less
new file mode 100644
index 000000000..f4a49bcc0
--- /dev/null
+++ b/app/styles/atoms/smart/tag-input.less
@@ -0,0 +1,103 @@
+.tag-input-container {
+  display: flex;
+  align-items: center;
+  width: auto;
+  height: 30px;
+  border: 1px dashed var(--color-gray-400);
+  border-radius: var(--border-radius-xl);
+  padding: 0 var(--spacing-px-12);
+  color: var(--color-gray-400);
+  background-color: var(--color-white);
+
+  .tag-input {
+    width: min-content;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-px-6);
+    overflow: hidden;
+    position: relative;
+
+    .hidden-span {
+      height: 0px;
+      display: block;
+      visibility: hidden;
+      width: fit-content;
+      white-space: pre;
+      transition: all 250ms ease-in-out;
+      font-weight: var(--font-weight-semibold);
+    }
+
+    .displayed-input {
+      width: 100%;
+      min-width: 4px;
+      outline: none;
+      border: none;
+      padding: 0;
+      font-weight: var(--font-weight-semibold);
+    }
+
+    .tag-input-empty-state {
+      display: inline;
+      overflow: hidden;
+      white-space: nowrap;
+      pointer-events: none;
+      position: absolute;
+      transition: all 250ms ease-in-out;
+      font-weight: var(--font-weight-semibold);
+    }
+
+    .animated-overlay {
+      font-weight: var(--font-weight-semibold);
+      background: linear-gradient(
+        130deg,
+        var(--color-gray-400) 18%,
+        var(--color-gray-300) 25%,
+        rgba(250, 198, 255, 1) 56%,
+        var(--color-primary-100) 62%,
+        var(--color-white) 66%,
+        rgba(250, 198, 255, 0.58) 68%,
+        var(--color-gray-300) 73%,
+        var(--color-gray-400) 85%
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      animation: smart_loading_text_animation 3.5s ease-in-out infinite;
+      background-size: 600% 100%;
+      width: fit-content;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    &:focus-within {
+      transition: all 250ms ease-in-out;
+
+      .tag-input-empty-state {
+        display: none;
+        max-width: 0;
+        transition: all 250ms ease-in-out;
+      }
+    }
+  }
+
+  &--active {
+    .tag-input-empty-state {
+      display: none;
+      max-width: 0;
+      transition: all 250ms ease-in-out;
+    }
+  }
+
+  &:has(.tag-input--error) {
+    border-color: var(--color-error-500);
+  }
+}
+
+@keyframes smart_loading_text_animation-text {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
diff --git a/app/styles/atoms/smart/tag.less b/app/styles/atoms/smart/tag.less
new file mode 100644
index 000000000..5b40eb2ca
--- /dev/null
+++ b/app/styles/atoms/smart/tag.less
@@ -0,0 +1,78 @@
+.smart-tag {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-px-6);
+  padding: 0 var(--spacing-px-12);
+  border-radius: var(--border-radius-xl);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  background-color: var(--color-white);
+  transition: 250ms ease-in-out;
+
+  &--color-yellow {
+    border: 1px solid var(--color-yellow-500);
+    color: var(--color-yellow-500);
+
+    &:hover {
+      border: 1px solid var(--color-yellow-600);
+      color: var(--color-yellow-600);
+    }
+
+    &:active {
+      border: 1px solid var(--color-yellow-400);
+      color: var(--color-yellow-400);
+    }
+  }
+
+  &--color-cyan {
+    border: 1px solid var(--color-cyan-500);
+    color: var(--color-cyan-500);
+
+    &:hover {
+      border: 1px solid var(--color-cyan-600);
+      color: var(--color-cyan-600);
+    }
+
+    &:active {
+      border: 1px solid var(--color-cyan-400);
+      color: var(--color-cyan-400);
+    }
+  }
+
+  &--color-violet {
+    border: 1px solid var(--color-violet-500);
+    color: var(--color-violet-500);
+
+    &:hover {
+      border: 1px solid var(--color-violet-600);
+      color: var(--color-violet-600);
+    }
+
+    &:active {
+      border: 1px solid var(--color-violet-400);
+      color: var(--color-violet-400);
+    }
+  }
+}
+
+.smart-tag-container.smart-rotating-gradient {
+  &::after {
+    border-radius: var(--border-radius-xl);
+  }
+
+  .smart-tag {
+    border: 1px solid transparent;
+  }
+}
+
+.smart-tag-container--md {
+  .smart-tag {
+    height: 30px;
+  }
+}
+
+.smart-tag-container--lg {
+  .smart-tag {
+    height: 36px;
+  }
+}
diff --git a/app/styles/base/_infinite-select.less b/app/styles/base/_infinite-select.less
index 0a5156f2b..f7392c7e4 100644
--- a/app/styles/base/_infinite-select.less
+++ b/app/styles/base/_infinite-select.less
@@ -48,3 +48,63 @@
     background-color: var(--color-white);
   }
 }
+
+.upf-infinite-select--smart {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--box-shadow-md);
+  padding: var(--spacing-px-6);
+  gap: var(--spacing-px-6);
+
+  &.upf-power-select__dropdown  {
+    overflow: auto;
+  }
+
+  .upf-infinite-select__items-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-px-3);
+  }
+
+  .upf-infinite-select--search {
+    margin: var(--spacing-px-6);
+    margin-bottom: var(--spacing-px-3);
+  }
+
+  .upf-infinite-select__item {
+    display: flex;
+    align-items: center;
+    color: var(--color-gray-600);
+    padding: var(--spacing-px-3) var(--spacing-px-12);
+    min-height: var(--spacing-px-36);
+    max-height: var(--spacing-px-36);
+    gap: var(--spacing-px-6);
+
+    &:has(> .selected),
+    &:hover,
+    &:focus {
+      background-color: var(--color-primary-50);
+      color: var(--color-gray-900);
+    }
+
+    &:not(:first-child)  {
+      margin-top: 0;
+    }
+
+    .item-wrapper {
+      flex: 1;
+    }
+
+    .upf-checkbox {
+      min-width: 16px;
+      width: 16px;
+      min-height: 16px;
+      height: 16px;
+
+      &__input:checked + .upf-checkbox__fake-checkbox {
+        background-color: var(--color-primary-400);
+        border-color: var(--color-primary-400);
+      }
+    }
+  }
+}
diff --git a/app/styles/currency-input.less b/app/styles/currency-input.less
index 6a96ece6a..455db0ce9 100644
--- a/app/styles/currency-input.less
+++ b/app/styles/currency-input.less
@@ -19,9 +19,8 @@
     input {
       border: none;
       outline: none;
-
       padding: var(--spacing-px-3) var(--spacing-px-12);
-      background-color: transparent;
+      background-color: var(--color-white);
     }
 
     &:not(.disabled, :disabled) {
@@ -46,7 +45,6 @@
       border-right: none;
       margin-right: 0;
       width: 100%;
-
       background-color: transparent;
     }
 
@@ -151,12 +149,10 @@
 
   .currency-selector {
     display: flex;
-
     gap: var(--spacing-px-9);
     padding: var(--spacing-px-3) var(--spacing-px-12);
     background-color: var(--color-gray-50);
     color: var(--color-gray-500);
-
     border-right: 1px solid var(--color-border-default);
   }
 
@@ -167,9 +163,7 @@
     padding: var(--spacing-px-12);
 
     .upf-infinite-select__item {
-      padding: 0;
-      padding-top: var(--spacing-px-6);
-      padding-bottom: var(--spacing-px-6);
+      padding: var(--spacing-px-6) 0;
     }
 
     .row-selected span {
diff --git a/app/styles/deprecated/_fonts.less b/app/styles/deprecated/_fonts.less
index 544cb4580..2442e984e 100644
--- a/app/styles/deprecated/_fonts.less
+++ b/app/styles/deprecated/_fonts.less
@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
+@import url('https://fonts.googleapis.com/css?family=Reddit+Sans:wght@400&family=Open+Sans:400,400i,600,600i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
diff --git a/app/styles/molecules/toggle-buttons.less b/app/styles/molecules/toggle-buttons.less
index 1bce1f2e1..c95c801c8 100644
--- a/app/styles/molecules/toggle-buttons.less
+++ b/app/styles/molecules/toggle-buttons.less
@@ -35,3 +35,49 @@
     }
   }
 }
+
+.oss-smart-toggle-buttons-container {
+  .border-radius-lg;
+  .background-color-primary-50;
+
+  display: flex;
+  flex: 1;
+  height: 30px;
+  padding: 2px;
+  color: var(--color-primary-300);
+  gap: var(--spacing-px-3);
+
+  .oss-smart-toggle-buttons-btn {
+    .border-radius-lg;
+
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    padding: var(--spacing-px-6) var(--spacing-px-12);
+    transition: background-color 300ms ease-in-out;
+
+    &--selected {
+      background-color: var(--color-primary-400);
+      color: var(--color-white);
+      box-shadow: var(--box-shadow-xs);
+    }
+  }
+
+  &--disabled {
+    .oss-smart-toggle-buttons-btn {
+      &--selected {
+        background-color: var(--color-primary-400);
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &:not(&--disabled) {
+    .oss-smart-toggle-buttons-btn {
+      &:not(&--selected):hover {
+        background-color: var(--color-white);
+      }
+    }
+  }
+}
diff --git a/app/styles/organisms/wizard-container.less b/app/styles/organisms/wizard-container.less
index bc41b86cc..985ab46d4 100644
--- a/app/styles/organisms/wizard-container.less
+++ b/app/styles/organisms/wizard-container.less
@@ -1,22 +1,46 @@
 .wizard-container {
-  display: flex;
-  flex-direction: column;
   flex: 1;
   gap: var(--spacing-px-12);
   position: relative;
   overflow: hidden;
   height: 100vh;
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-px-12);
+
   padding: var(--spacing-px-30);
   animation: all 0.5s ease-in-out;
   scrollbar-width: none;
 
   .step-wrapper {
+    &:first-of-type,
+    &:last-of-type {
+      min-height: 60vh;
+    }
+
     position: relative;
     width: 100%;
-    min-height: 60vh;
-    overflow: auto;
     border-radius: var(--border-radius-xs);
     padding: var(--spacing-px-12);
+
+    min-height: 60vh;
+    max-height: 70vh;
+    display: flex;
+
+    > div {
+      overflow: auto;
+      flex: 1;
+      max-height: inherit;
+    }
+
+    &__previous,
+    &__next {
+      > div {
+        overflow: hidden;
+      }
+    }
   }
 
   .step-wrapper__hidden {
diff --git a/app/styles/oss-components.less b/app/styles/oss-components.less
index 8f5d1b89e..87dbc3cdf 100644
--- a/app/styles/oss-components.less
+++ b/app/styles/oss-components.less
@@ -1,6 +1,7 @@
 @import 'shims/bootstrap';
 
 @import (inline) '@fortawesome/fontawesome-pro/css/all.min.css';
+@import (inline) '@fortawesome/fontawesome-pro/css/duotone-regular.min.css';
 @import (inline) '@fortawesome/fontawesome-pro/css/v4-shims.min.css';
 @import (inline) '@fortawesome/fontawesome-pro/css/duotone-regular.min.css';
 
@@ -46,7 +47,17 @@
 @import 'atoms/social-post-badge';
 @import 'atoms/pulsating-dot';
 @import 'atoms/pill';
+@import 'atoms/smart-input';
+@import 'atoms/smart-feedback';
+@import 'atoms/smart/immersive-input';
+@import 'atoms/smart/immersive-currency-input';
+@import 'atoms/smart/immersive-select';
 @import 'atoms/smart/pill';
+@import 'atoms/smart/logo';
+@import 'atoms/smart/tag';
+@import 'atoms/smart/tag-input';
+@import 'atoms/smart-textarea';
+@import 'atoms/smart/number-input';
 @import 'molecules/progress-bar';
 @import 'molecules/select';
 @import 'molecules/nav-tab';
diff --git a/app/styles/utilities/_loading.less b/app/styles/utilities/_loading.less
index adbb39cc8..cafb9ac78 100644
--- a/app/styles/utilities/_loading.less
+++ b/app/styles/utilities/_loading.less
@@ -18,3 +18,31 @@
   display: inline-block;
   line-height: 1;
 }
+
+@keyframes upf-smart-skeleton-content {
+  0% {
+    background-position: -136 0;
+  }
+
+  100% {
+    background-position: calc(136px + 100%) 0;
+  }
+}
+
+.upf-smart-skeleton-effect {
+  animation: upf-skeleton-content 1.5s ease-in-out alternate infinite;
+  background-color: var(--color-white);
+  background-image: linear-gradient(
+    150deg,
+    rgba(255, 255, 255, 0.15) 8.2%,
+    rgba(247, 213, 250, 0.15) 23.6%,
+    rgba(83, 94, 252, 0.15) 38.3%,
+    rgba(237, 33, 255, 0.15) 53.2%,
+    rgba(255, 255, 255, 0.15) 91.7%
+  );
+  background-size: 136px 100%;
+  background-repeat: no-repeat;
+  border-radius: var(--border-radius-xs);
+  display: inline-block;
+  line-height: 1;
+}
diff --git a/app/utils/logo-config.ts b/app/utils/logo-config.ts
new file mode 100644
index 000000000..84e4d8fe0
--- /dev/null
+++ b/app/utils/logo-config.ts
@@ -0,0 +1,60 @@
+export const LOGO_ICONS = [
+  'rabbit',
+  'star',
+  'heart',
+  'rocket-launch',
+  'money-bill',
+  'glass-whiskey-rocks',
+  'joystick',
+  'scroll',
+  'carrot',
+  'volleyball-ball',
+  'crown',
+  'chart-bar',
+  'users',
+  'saxophone',
+  'duck',
+  'university',
+  'tree-palm',
+  'trophy',
+  'pizza-slice',
+  'popcorn',
+  'chart-line',
+  'analytics',
+  'hat-wizard',
+  'chart-network',
+  'leaf',
+  'utensils',
+  'ufo',
+  'hat-winter',
+  'guitar',
+  'parachute-box',
+  'sheep',
+  'boot',
+  'shopping-basket',
+  'shopping-cart',
+  'shopping-bag',
+  'tags',
+  'meteor',
+  'globe-americas',
+  'globe-snow'
+];
+
+export const LOGO_COLORS = [
+  'stone',
+  'rose',
+  'orange',
+  'yellow',
+  'lime',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuschia',
+  'pink',
+  'slate'
+];
diff --git a/public/assets/images/picture-frame.svg b/public/assets/images/picture-frame.svg
new file mode 100644
index 000000000..73e2bdef2
--- /dev/null
+++ b/public/assets/images/picture-frame.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="36" height="36" rx="8" fill="#F5F5F4"/>
+<path d="M12 15.25C12 14.4297 12.6562 13.75 13.5 13.75H22.5C23.3203 13.75 24 14.4297 24 15.25V22.75C24 23.5938 23.3203 24.25 22.5 24.25H13.5C12.6562 24.25 12 23.5938 12 22.75V15.25ZM19.5703 17.7578C19.4766 17.5938 19.2891 17.5 19.125 17.5C18.9375 17.5 18.75 17.5938 18.6562 17.7578L16.6172 20.7578L15.9844 19.9609C15.8906 19.8438 15.7266 19.75 15.5625 19.75C15.375 19.75 15.2109 19.8438 15.1172 19.9609L13.6172 21.8359C13.4766 22.0234 13.4531 22.2578 13.5469 22.4453C13.6406 22.6328 13.8281 22.75 14.0625 22.75H16.3125H17.0625H21.9375C22.125 22.75 22.3359 22.6562 22.4297 22.4688C22.5234 22.2812 22.5 22.0469 22.3828 21.8828L19.5703 17.7578ZM14.625 17.5C15.0234 17.5 15.375 17.2891 15.5859 16.9375C15.7969 16.6094 15.7969 16.1641 15.5859 15.8125C15.375 15.4844 15.0234 15.25 14.625 15.25C14.2031 15.25 13.8516 15.4844 13.6406 15.8125C13.4297 16.1641 13.4297 16.6094 13.6406 16.9375C13.8516 17.2891 14.2031 17.5 14.625 17.5Z" fill="#9CA3AF"/>
+</svg>
diff --git a/tests/dummy/app/components/wizard/example-step-with-scroll.hbs b/tests/dummy/app/components/wizard/example-step-with-scroll.hbs
index 46f255224..0b51ecd23 100644
--- a/tests/dummy/app/components/wizard/example-step-with-scroll.hbs
+++ b/tests/dummy/app/components/wizard/example-step-with-scroll.hbs
@@ -1,4 +1,4 @@
-<div class="fx-col fx-gap-px-12" {{did-update this.onVisibleState @step.displayState}}>
+<div class="fx-col fx-gap-px-12" {{did-update this.onVisibleState @step.displayState}} ...attributes>
   <span>Example step with overflowing contents</span>
   <span>First name:</span>
   <OSS::InputContainer />
diff --git a/tests/dummy/app/components/wizard/example-step.hbs b/tests/dummy/app/components/wizard/example-step.hbs
index 02771022b..6b2bf62bd 100644
--- a/tests/dummy/app/components/wizard/example-step.hbs
+++ b/tests/dummy/app/components/wizard/example-step.hbs
@@ -1,4 +1,4 @@
-<div class="fx-col fx-gap-px-12" {{did-update this.onVisibleState @step.displayState}}>
+<div class="fx-col fx-gap-px-12" {{did-update this.onVisibleState @step.displayState}} ...attributes>
   <span>Example step #{{@step.id}}</span>
   <OSS::InputContainer />
 </div>
\ No newline at end of file
diff --git a/tests/dummy/app/controllers/smart.ts b/tests/dummy/app/controllers/smart.ts
new file mode 100644
index 000000000..ddbf2ffd9
--- /dev/null
+++ b/tests/dummy/app/controllers/smart.ts
@@ -0,0 +1,229 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
+import type { TagType } from '@upfluence/oss-components/components/o-s-s/smart/tag';
+import type { Keyword } from '@upfluence/oss-components/components/o-s-s/smart/tag-input';
+
+export default class Smart extends Controller {
+  @tracked selectedToggle: string = 'first';
+  @tracked selectedToggleTwo: string = 'second';
+  @tracked toggleInputLoadingValue: boolean = false;
+  @tracked smartFeedback: boolean = false;
+  @tracked smartFeedbackLoading: boolean = false;
+  @tracked contentArray: string[] = [
+    'This is the first content',
+    'This is the second content',
+    'This is the third content'
+  ];
+  @tracked logoLoading: boolean = false;
+  @tracked toggles: { value: string; label: string }[] = [
+    { value: 'first', label: 'First' },
+    { value: 'second', label: 'Second' }
+  ];
+  @tracked declare value: string;
+  @tracked loading: boolean = false;
+  @tracked currency: string = 'USD';
+  @tracked declare currencyValue: number;
+  @tracked declare currencyValueTwo: number;
+  @tracked currencyOnly: string = '';
+  allowedCurrencies: { code: string; symbol: string }[] = [
+    { code: 'USD', symbol: '$' },
+    { code: 'EUR', symbol: '€' }
+  ];
+  @tracked hasError: boolean = true;
+  @tracked currencyInputLoading: boolean = true;
+  @tracked pillLoading: boolean = true;
+  @tracked selectedPill: boolean = false;
+  @tracked selectedPillTwo: boolean = false;
+  intervalId?: number;
+
+  @tracked values = [{ value: 'content' }];
+  @tracked items = [
+    { value: 'content', label: 'Jace generated content' },
+    { value: '1', label: 'Item 1' },
+    { value: '2', label: 'Item 2' },
+    { value: '3', label: 'Item 3' },
+    { value: '4', label: 'Item 4' },
+    { value: '5', label: 'Item 5' },
+    { value: '6', label: 'Item 6' },
+    { value: '7', label: 'Item 7' },
+    { value: '8', label: 'Item 8' },
+    { value: '9', label: 'Item 9' }
+  ];
+  @tracked tagLoading: boolean = false;
+  @tracked tags: { value: string; type: TagType }[] = [
+    { value: 'keyword', type: 'keyword' },
+    { value: 'mention', type: 'mention' },
+    { value: 'hashtag', type: 'hashtag' }
+  ];
+  @tracked smartTags: { value: string; type: TagType }[] = [];
+  @tracked inputValue: string = '';
+  @tracked textAreaValue: string = '';
+  @tracked multilinePlaceholder: string = 'Small placeholder\nwith multiple\nlines';
+  @tracked numberValue: number = 42;
+
+  constructor() {
+    super(...arguments);
+    this.addContentToFeedbackComponent();
+  }
+
+  get fakeSelectedItems(): { value: string; label: string }[] {
+    const mapped = this.items.map((item) => {
+      return { value: item.value, label: item.label };
+    });
+    return [...mapped, ...mapped, ...mapped];
+  }
+
+  @action
+  triggerSelection(value: string): void {
+    console.log('selected toggle value : ', value);
+    this.selectedToggle = value;
+  }
+
+  @action
+  toggleLogoLoading(): void {
+    this.logoLoading = !this.logoLoading;
+  }
+
+  @action
+  toggleLoading(): void {
+    this.loading = !this.loading;
+
+    if (this.loading === false) {
+      this.value = 'Data loaded from a very smart backend';
+    }
+  }
+
+  @action
+  onCurrencyInputChange(currency: string, value: number): void {
+    console.log(currency, value);
+    this.currency = currency;
+    this.currencyValue = value;
+    this.hasError = !this.hasError;
+  }
+
+  @action
+  toggleInputLoading(): void {
+    this.toggleInputLoadingValue = !this.toggleInputLoadingValue;
+  }
+
+  @action
+  toggleCurrencyInputLoading(): void {
+    this.currencyInputLoading = !this.currencyInputLoading;
+
+    if (this.currencyInputLoading === false) {
+      this.currencyValue = 77777777777;
+    }
+  }
+  @action
+  toggleSmartFeedbackLoading(): void {
+    this.smartFeedbackLoading = !this.smartFeedbackLoading;
+  }
+
+  addContentToFeedbackComponent(): void {
+    const wordsToAdd = ['Dynamic word 1', 'Dynamic word 2', 'Dynamic word 3', 'Dynamic word 4', 'Dynamic word 5'];
+
+    let index = 0;
+
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+
+    this.intervalId = window.setInterval(() => {
+      if (index >= wordsToAdd.length) {
+        clearInterval(this.intervalId);
+        return;
+      }
+
+      const wordToAdd = wordsToAdd[index];
+      if (typeof wordToAdd === 'string') {
+        this.contentArray = [...this.contentArray, wordToAdd];
+      }
+      index++;
+    }, 1000);
+  }
+
+  @action
+  onPillChange(): void {
+    this.selectedPill = !this.selectedPill;
+  }
+
+  @action
+  togglePillLoading(): void {
+    this.pillLoading = !this.pillLoading;
+    this.selectedPillTwo = !this.pillLoading;
+  }
+
+  @action
+  onLogoClick(): void {
+    console.log('logo icon clicked');
+  }
+
+  @action
+  onSearch(keyword: string): void {
+    console.log('Search keyword:', keyword);
+  }
+
+  @action
+  onChange(item: { value: any }): void {
+    console.log('Selected item:', item);
+
+    if (this.values.some((value) => value.value === item.value)) {
+      this.values = this.values.filter((value) => value.value !== item.value);
+    } else {
+      this.values = [...this.values, { value: item.value }];
+    }
+
+    this.value = item.value;
+  }
+
+  @action
+  onTagRemove(): void {
+    console.log('removing tag');
+  }
+
+  @action
+  toggleTagAnimation(): void {
+    this.tagLoading = !this.tagLoading;
+  }
+
+  @action
+  handleTagInput({ value, type }: Keyword): string {
+    this.tags = [...this.tags, { value, type }];
+    return '';
+  }
+
+  @action
+  handleSmartTagInput({ value, type }: Keyword): string {
+    this.smartTags = [...this.smartTags, { value, type }];
+    return '';
+  }
+
+  @action
+  onTextAreaChange(value: string): void {
+    console.log('Text area value changed:', value);
+    this.textAreaValue = value;
+  }
+
+  @action
+  onNumberChange(value: number): void {
+    console.log('Number value changed:', value);
+    this.numberValue = value;
+  }
+
+  @action
+  fakeLoadData(): void {
+    this.loading = true;
+    setTimeout(() => {
+      this.smartTags = [
+        { value: 'example', type: 'keyword' },
+        { value: 'test', type: 'mention' },
+        { value: 'sample', type: 'hashtag' }
+      ];
+      next(() => {
+        this.loading = false;
+      });
+    }, 3000);
+  }
+}
diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js
index 19f31e147..f48971b53 100644
--- a/tests/dummy/app/router.js
+++ b/tests/dummy/app/router.js
@@ -13,4 +13,5 @@ Router.map(function () {
   this.route('overlay');
   this.route('extra');
   this.route('wizard');
+  this.route('smart');
 });
diff --git a/tests/dummy/app/routes/smart.ts b/tests/dummy/app/routes/smart.ts
new file mode 100644
index 000000000..52f7fd8e7
--- /dev/null
+++ b/tests/dummy/app/routes/smart.ts
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class Smart extends Route {}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index e9690c04c..77b68a647 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -50,6 +50,11 @@
         class={{if (eq this.router.currentRouteName "wizard") "active"}}
         @link="wizard"
       />
+      <OSS::Layout::Sidebar::Item
+        @icon="far fa-brain-circuit"
+        class={{if (eq this.router.currentRouteName "smart") "active"}}
+        @link="smart"
+      />
       <OSS::Layout::Sidebar::Item
         @icon="far fa-lock"
         @locked={{true}}
diff --git a/tests/dummy/app/templates/smart.hbs b/tests/dummy/app/templates/smart.hbs
new file mode 100644
index 000000000..ef63fee5b
--- /dev/null
+++ b/tests/dummy/app/templates/smart.hbs
@@ -0,0 +1,526 @@
+<div class="fx-col fx-gap-px-12 padding-px-18">
+  <div class="page-title-container">
+    <span class="font-size-h2 font-weight-semibold">Smart</span>
+    <span class="font-color-gray-500">Components that look like another component and act like another component but
+      aren't said component</span>
+    <span class="font-color-gray-500 font-size-xs text-style-italic">(also they might be smarter than you who knows)</span>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Text-area
+    </div>
+    <div class="fx-col fx-gap-px-24">
+      <div class="fx-row fx-gap-px-24 fx-xalign-center">
+        <OSS::Button @label="Toggle loading" {{on "click" this.toggleLoading}} />
+        <OSS::Smart::TextArea
+          @value={{this.textAreaValue}}
+          @onChange={{this.onTextAreaChange}}
+          @rows={{7}}
+          @placeholder={{this.multilinePlaceholder}}
+          @loading={{this.loading}}
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Number input
+    </div>
+    <div class="fx-col fx-gap-px-24">
+      <div class="fx-row fx-gap-px-24 fx-xalign-center">
+        <OSS::Smart::NumberInput @value={{this.numberValue}} @onChange={{this.onNumberChange}} @hasError={{true}} />
+        <OSS::Smart::NumberInput @value={{this.numberValue}} @onChange={{this.onNumberChange}} />
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Smart tag & Smart tag input
+    </div>
+    <div class="fx-col fx-gap-px-24">
+      <div class="fx-row fx-gap-px-24 fx-xalign-center">
+        <OSS::Button @label="Toggle animation" {{on "click" this.toggleTagAnimation}} />
+        <OSS::Smart::Tag @label="Default" />
+        {{#each this.tags as |tag|}}
+          <OSS::Smart::Tag
+            @label={{tag.value}}
+            @type={{tag.type}}
+            @onRemove={{this.onTagRemove}}
+            @successAnimationOnInsertion={{this.tagLoading}}
+          />
+        {{/each}}
+        {{#each this.tags as |tag|}}
+          <OSS::Smart::Tag
+            @label={{tag.value}}
+            @type={{tag.type}}
+            @onRemove={{this.onTagRemove}}
+            @successAnimationOnInsertion={{this.tagLoading}}
+            @size="lg"
+          />
+        {{/each}}
+      </div>
+      <div class="fx-row fx-gap-px-24 fx-xalign-start">
+        {{#each this.smartTags as |smartTag|}}
+          <OSS::Smart::Tag @label={{smartTag.value}} @type={{smartTag.type}} @onRemove={{this.onTagRemove}} />
+        {{/each}}
+        <OSS::Smart::TagInput @value={{this.inputValue}} @onKeydown={{this.handleTagInput}} />
+        <OSS::Smart::TagInput @value={{this.inputValue}} @onKeydown={{this.handleTagInput}} @loading={{true}} />
+        <OSS::Smart::TagInput @value={{this.inputValue}} @onKeydown={{this.handleTagInput}} @hasError={{true}} />
+      </div>
+      <div class="fx-row fx-gap-px-24 fx-xalign-start">
+        <OSS::Button @label="Fake load data" {{on "click" this.fakeLoadData}} />
+        {{#each this.smartTags as |smartTag|}}
+          <OSS::Smart::Tag
+            @label={{smartTag.value}}
+            @type={{smartTag.type}}
+            @onRemove={{this.onTagRemove}}
+            @successAnimationOnInsertion={{this.loading}}
+          />
+        {{/each}}
+        <OSS::Smart::TagInput
+          @value={{this.inputValue}}
+          @onKeydown={{this.handleSmartTagInput}}
+          @loading={{this.loading}}
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Smart Immersive select
+    </div>
+    <div class="fx-col fx-gap-px-24 fx-xalign-center">
+      <OSS::Button @label="Toggle loading" {{on "click" this.toggleLoading}} />
+      <OSS::Smart::Immersive::Select
+        @placeholder="Placeholder"
+        @values={{this.values}}
+        @loading={{this.loading}}
+        @items={{this.items}}
+        @onSearch={{this.onSearch}}
+        @onChange={{this.onChange}}
+        @multiple={{true}}
+      >
+        <:selected-item as |item|>{{item.value}}</:selected-item>
+        <:option-item as |item|>
+          <div class="text-ellipsis" {{enable-tooltip title=item.label displayOnlyOnOverflow=true}}>
+            {{item.label}}
+          </div>
+        </:option-item>
+      </OSS::Smart::Immersive::Select>
+      <OSS::Smart::Immersive::Select
+        @placeholder="Placeholder"
+        @values={{this.values}}
+        @displayCount={{true}}
+        @loading={{this.loading}}
+        @hasError={{false}}
+        @displayedItems={{1}}
+        @maxItemWidth={{100}}
+        @items={{this.items}}
+        @onSearch={{this.onSearch}}
+        @onChange={{this.onChange}}
+        @multiple={{true}}
+      >
+        <:selected-item as |item|>{{item.value}}</:selected-item>
+        <:option-item as |item|>
+          <div class="text-ellipsis" {{enable-tooltip title=item.label displayOnlyOnOverflow=true}}>
+            {{item.label}}
+          </div>
+        </:option-item>
+      </OSS::Smart::Immersive::Select>
+      <OSS::Smart::Immersive::Select
+        @placeholder="Placeholder"
+        @values={{this.fakeSelectedItems}}
+        @displayCount={{true}}
+        @loading={{this.loading}}
+        @hasError={{false}}
+        @items={{this.items}}
+        @onSearch={{this.onSearch}}
+        @onChange={{this.onChange}}
+        @multiple={{true}}
+      >
+        <:selected-item as |item|>{{item.value}}</:selected-item>
+        <:option-item as |item|>
+          <div class="text-ellipsis" {{enable-tooltip title=item.label displayOnlyOnOverflow=true}}>
+            {{item.label}}
+          </div>
+        </:option-item>
+      </OSS::Smart::Immersive::Select>
+      <OSS::Smart::Immersive::Select
+        @placeholder="Type your name or pseudo"
+        @values={{array this.value}}
+        @loading={{this.loading}}
+        @hasError={{true}}
+        @items={{this.items}}
+        @onChange={{this.onChange}}
+        @searchEnabled={{false}}
+        @multiple={{false}}
+      >
+        <:selected-item as |item|>{{item}}</:selected-item>
+        <:option-item as |item|>{{item.label}}</:option-item>
+      </OSS::Smart::Immersive::Select>
+    </div>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Smart immersive input
+    </div>
+    <div class="fx-col fx-gap-px-24 fx-xalign-center">
+      <OSS::Button @label="Toggle loading" {{on "click" this.toggleLoading}} />
+      <OSS::Smart::Immersive::Input @placeholder="Placeholder" @value={{this.value}} @loading={{this.loading}}>
+        <:suffix>
+          <i class="fas fa-user" />
+        </:suffix>
+      </OSS::Smart::Immersive::Input>
+      <OSS::Smart::Immersive::Input
+        @placeholder="Placeholder"
+        @value={{this.value}}
+        @loading={{this.loading}}
+        @hasError={{true}}
+      />
+      <OSS::Smart::Immersive::Input
+        @placeholder="Type your name or pseudo"
+        @value={{this.value}}
+        @loading={{this.loading}}
+        @type="number"
+      />
+    </div>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Smart button
+    </div>
+    <div class="fx-row fx-gap-px-24 fx-xalign-start">
+      <div class="fx-col fx-gap-px-12">
+        <OSS::Smart::Button @skin="primary" @label="Primary" @icon="fas fa-box-open" @size="lg" />
+        <OSS::Smart::Button
+          @skin="primary"
+          @label="Primary"
+          @iconUrl="/@upfluence/oss-components/assets/star-icon.svg"
+        />
+        <OSS::Smart::Button @skin="primary" @label="Primary" @icon="fas fa-box-open" @size="sm" />
+        <OSS::Smart::Button
+          @skin="primary"
+          @label="Primary"
+          @iconUrl="/@upfluence/oss-components/assets/star-icon.svg"
+          @size="sm"
+        />
+        <div class="fx-row fx-xalign-center fx-gap-px-12">
+          <OSS::Smart::Button @skin="primary" @circle="true" @icon="fas fa-box-open" @size="lg" />
+          <OSS::Smart::Button @skin="primary" @square="true" @icon="fas fa-box-open" @size="sm" />
+        </div>
+      </div>
+      <div class="fx-col fx-gap-px-12">
+        <OSS::Smart::Button
+          @skin="primary"
+          @label="Loading"
+          @loading={{true}}
+          @loadingOptions={{hash showLabel=true}}
+          @size="lg"
+        />
+        <OSS::Smart::Button @skin="primary" @label="Loading" @loading={{true}} />
+        <OSS::Smart::Button
+          @skin="primary"
+          @label="Loading"
+          @loading={{true}}
+          @loadingOptions={{hash showLabel=true}}
+          @size="sm"
+        />
+        <OSS::Smart::Button @skin="primary" @label="Loading" @loading={{true}} @size="sm" />
+        <div class="fx-row fx-xalign-center fx-gap-px-12">
+          <OSS::Smart::Button
+            @skin="primary"
+            @square="true"
+            @iconUrl="/@upfluence/oss-components/assets/star-icon.svg"
+            @size="md"
+          />
+          <OSS::Smart::Button
+            @skin="primary"
+            @square="true"
+            @iconUrl="/@upfluence/oss-components/assets/star-icon.svg"
+            @size="sm"
+          />
+        </div>
+      </div>
+      <div class="fx-col fx-gap-px-12">
+        <OSS::Smart::Button @skin="primary" @label="Disabled" @size="lg" @disabled={{true}} />
+        <OSS::Smart::Button @skin="primary" @label="Disabled" @size="md" @disabled={{true}} />
+        <OSS::Smart::Button @skin="primary" @label="Disabled" @size="sm" @disabled={{true}} />
+      </div>
+      <div class="fx-col fx-gap-px-12">
+        <OSS::Smart::Button @skin="secondary" @label="Secondary" @icon="fas fa-box-open" @size="lg" />
+        <OSS::Smart::Button
+          @skin="secondary"
+          @label="Secondary"
+          @iconUrl="/@upfluence/oss-components/assets/star-icon.svg"
+        />
+        <OSS::Smart::Button @skin="secondary" @label="Secondary" @icon="fas fa-box-open" @size="sm" />
+        <OSS::Smart::Button
+          @skin="secondary"
+          @label="Secondary"
+          @iconUrl="/@upfluence/oss-components/assets/star-icon.svg"
+          @size="sm"
+        />
+        <div class="fx-row fx-xalign-center fx-gap-px-12">
+          <OSS::Smart::Button @skin="secondary" @square="true" @icon="fas fa-box-open" @size="md" />
+          <OSS::Smart::Button @skin="secondary" @square="true" @icon="fas fa-box-open" @size="sm" />
+        </div>
+      </div>
+      <div class="fx-col fx-gap-px-12">
+        <OSS::Smart::Button
+          @skin="secondary"
+          @label="Loading"
+          @loading={{true}}
+          @loadingOptions={{hash showLabel=true}}
+          @size="lg"
+        />
+        <OSS::Smart::Button @skin="secondary" @label="Loading" @loading={{true}} />
+        <OSS::Smart::Button
+          @skin="secondary"
+          @label="Loading"
+          @loading={{true}}
+          @loadingOptions={{hash showLabel=true}}
+          @size="sm"
+        />
+        <OSS::Smart::Button @skin="secondary" @label="Loading" @loading={{true}} @size="sm" />
+        <div class="fx-row fx-xalign-center fx-gap-px-12">
+          <OSS::Smart::Button
+            @skin="secondary"
+            @square="true"
+            @iconUrl="/@upfluence/oss-components/assets/star-icon.svg"
+            @size="md"
+          />
+          <OSS::Smart::Button
+            @skin="secondary"
+            @square="true"
+            @iconUrl="/@upfluence/oss-components/assets/star-icon.svg"
+            @size="sm"
+          />
+        </div>
+      </div>
+      <div class="fx-col fx-gap-px-12">
+        <OSS::Smart::Button @skin="secondary" @label="Disabled" @size="lg" @disabled={{true}} />
+        <OSS::Smart::Button @skin="secondary" @label="Disabled" @size="md" @disabled={{true}} />
+        <OSS::Smart::Button @skin="secondary" @label="Disabled" @size="sm" @disabled={{true}} />
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Smart toggle buttons
+    </div>
+    <div class="fx-row fx-gap-px-24 fx-xalign-center">
+      <div class="fx-row fx-xalign-start fx-gap-px-10">
+        <OSS::Smart::ToggleButtons
+          @toggles={{this.toggles}}
+          @selectedToggle={{this.selectedToggle}}
+          @onSelection={{this.triggerSelection}}
+        />
+        <OSS::Smart::ToggleButtons
+          @toggles={{this.toggles}}
+          @selectedToggle={{this.selectedToggleTwo}}
+          @onSelection={{this.triggerSelection}}
+          @disabled={{true}}
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Smart skeleton
+    </div>
+    <div class="fx-col fx-gap-px-24 padding-px-12 background-color-primary-50">
+      <div class="fx-row fx-1 fx-gap-px-10">
+        <OSS::Smart::Skeleton @width="70%" />
+        <OSS::Smart::Skeleton @width={{20}} />
+      </div>
+      <div class="fx-row fx-1 fx-gap-px-10">
+        <OSS::Smart::Skeleton
+          @direction="column"
+          @width="60%"
+          @height="60"
+          @gap="12"
+          @multiple="3"
+          @randomize={{true}}
+        />
+      </div>
+      <div class="fx-row fx-1 fx-gap-px-10">
+        <OSS::Smart::Skeleton @height="40" @width="100" @multiple="3" @direction="row" @randomize="true" />
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="fx-col fx-1 fx-gap-px-10">
+      <div class="font-size-md fx-row fx-gap-px-12 fx-xalign-center font-weight-semibold">
+        <span>Smart feedback : loading {{this.smartFeedbackLoading}}</span>
+        <OSS::ToggleSwitch @value={{this.smartFeedbackLoading}} @onChange={{this.toggleSmartFeedbackLoading}} />
+      </div>
+      <OSS::Smart::Feedback @loading={{this.smartFeedbackLoading}} @contentArray={{this.contentArray}}>
+        <:icon>
+          <OSS::Avatar @initials={{concat "+" "123"}} @size={{"sm"}} />
+        </:icon>
+      </OSS::Smart::Feedback>
+    </div>
+
+    <div class="fx-row fx-gap-px-12 font-size-md font-weight-semibold">
+      Smart Inputs
+      <OSS::ToggleSwitch
+        @label="Toggle"
+        @value={{this.toggleInputLoadingValue}}
+        @onChange={{this.toggleInputLoading}}
+      />
+    </div>
+    <div class="fx-row fx-gap-px-24 fx-xalign-center">
+      <OSS::Smart::Input
+        @value={{null}}
+        @label="Label"
+        @placeholder="Placeholder"
+        @loading={{this.toggleInputLoadingValue}}
+      />
+
+      <OSS::Smart::Input
+        @value={{null}}
+        @label="Label"
+        @placeholder="Placeholder"
+        @loading={{this.toggleInputLoadingValue}}
+      />
+
+      <OSS::Smart::Input
+        @value={{"value"}}
+        @label="Label"
+        @placeholder="Placeholder"
+        @loading={{this.toggleInputLoadingValue}}
+      />
+    </div>
+    <div
+      class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+    >
+      <div class="font-size-md font-weight-semibold">
+        Smart immersive currency input
+      </div>
+      <div class="fx-row fx-gap-px-24 fx-xalign-center">
+        <OSS::Smart::Immersive::CurrencyInput
+          @currency={{this.currency}}
+          @value={{this.currencyValue}}
+          @onChange={{this.onCurrencyInputChange}}
+          @allowCurrencyUpdate={{true}}
+          @placeholder="Placeholder"
+          @loading={{this.currencyInputLoading}}
+        />
+        <OSS::Smart::Immersive::CurrencyInput
+          @currency={{this.currency}}
+          @value={{this.currencyValueTwo}}
+          @onChange={{this.onCurrencyInputChange}}
+          @allowCurrencyUpdate={{true}}
+          @placeholder="Placeholder"
+          @loading={{this.currencyInputLoading}}
+          @hasError={{this.hasError}}
+        />
+      </div>
+      <span>Loading = {{this.currencyInputLoading}}</span>
+      <span class="fx-row fx-gap-px-6">Toggle the @loading argument =>
+        <OSS::Button @label="Toggle loading" {{on "click" this.toggleCurrencyInputLoading}} />
+      </span>
+
+    </div>
+
+    <div
+      class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+    >
+      <div class="font-size-md font-weight-semibold">
+        Smart pill
+      </div>
+      <div class="fx-col fx-gap-px-24 fx-xalign-start">
+        <div class="fx-row fx-xalign-start fx-gap-px-10">
+          <OSS::Smart::Pill
+            @label="Text"
+            @icon="fad fa-badge-percent"
+            @selected={{this.selectedPill}}
+            {{on "click" this.onPillChange}}
+          />
+          <OSS::Smart::Pill @label="Text" @selected={{not this.selectedPill}} {{on "click" this.onPillChange}} />
+          <OSS::Smart::Pill @label="Text" @icon="fa-badge-percent" @selected={{this.selectedPill}} @disabled={{true}} />
+          <OSS::Smart::Pill @label="Text" @selected={{not this.selectedPill}} @disabled={{true}} />
+        </div>
+        <div class="fx-row fx-xalign-start fx-gap-px-10">
+          <OSS::Smart::Pill @label="Text" @selected={{false}} @loading={{this.pillLoading}} />
+          <OSS::Smart::Pill @label="Text" @selected={{this.selectedPillTwo}} @loading={{this.pillLoading}} />
+          <OSS::Button @label="Toggle loading" {{on "click" this.togglePillLoading}} />
+        </div>
+      </div>
+    </div>
+
+    <div class="font-size-md font-weight-semibold">
+      Smart Logo
+      <OSS::ToggleSwitch @value={{this.logoLoading}} @onChange={{this.toggleLogoLoading}} />
+    </div>
+    <div class="fx-row fx-gap-px-24 padding-px-12 background-color-primary-50">
+      <OSS::Smart::Immersive::Logo
+        @url="https://picsum.photos/200/300"
+        @loading={{this.logoLoading}}
+        @onEdit={{this.onLogoClick}}
+      />
+      <OSS::Smart::Immersive::Logo
+        @url="https://picsum.photos/200/300"
+        @loading={{this.logoLoading}}
+        @onEdit={{this.onLogoClick}}
+        @hasError={{true}}
+      />
+
+      <OSS::Smart::Immersive::Logo @icon="rabbit:orange" @loading={{this.logoLoading}} @onEdit={{this.onLogoClick}} />
+      <OSS::Smart::Immersive::Logo
+        @icon="rabbit:orange"
+        @loading={{this.logoLoading}}
+        @onEdit={{this.onLogoClick}}
+        @hasError={{true}}
+      />
+      <OSS::Smart::Immersive::Logo
+        @icon="rabbit:orange"
+        @oversize={{true}}
+        @loading={{this.logoLoading}}
+        @onEdit={{this.onLogoClick}}
+      />
+
+      <OSS::Smart::Immersive::Logo
+        @icon="rabbit:orange"
+        @editable={{true}}
+        @loading={{this.logoLoading}}
+        @onEdit={{this.onLogoClick}}
+      />
+      <OSS::Smart::Immersive::Logo
+        @icon="rabbit:orange"
+        @editable={{true}}
+        @loading={{this.logoLoading}}
+        @onEdit={{this.onLogoClick}}
+      />
+
+      <OSS::Smart::Immersive::Logo @editable={{true}} @loading={{this.logoLoading}} @onEdit={{this.onLogoClick}} />
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/tests/dummy/app/templates/visual.hbs b/tests/dummy/app/templates/visual.hbs
index 532b8638d..67a586c31 100644
--- a/tests/dummy/app/templates/visual.hbs
+++ b/tests/dummy/app/templates/visual.hbs
@@ -792,13 +792,11 @@
       Pill
     </div>
     <div class="fx-row fx-gap-px-24 fx-xalign-center">
-      {{this.loadingPill}}
       <OSS::Smart::Pill
         @label="Pill"
         @icon="fad fa-badge-percent"
         @selected={{not this.selectedPill}}
         {{on "click" this.onPillClick}}
-        @loading={{this.loadingPill}}
       />
       <OSS::Charger @label="Pill" @selected={{this.selectedPill}} {{on "click" this.onPillClick}} />
       <OSS::Pill @label="Pill" @icon="fa-badge-percent" @selected={{not this.selectedPill}} @disabled={{true}} />
diff --git a/tests/integration/components/o-s-s/infinite-select-test.js b/tests/integration/components/o-s-s/infinite-select-test.js
index 36a450817..8ecd02cb0 100644
--- a/tests/integration/components/o-s-s/infinite-select-test.js
+++ b/tests/integration/components/o-s-s/infinite-select-test.js
@@ -418,6 +418,29 @@ module('Integration | Component | o-s-s/infinite-select', function (hooks) {
     });
   });
 
+  module('Skin', function (hooks) {
+    hooks.beforeEach(function () {
+      this.items = FAKE_DATA;
+      this.onSelect = () => {};
+    });
+
+    test('When @skin is not specified the "default" skin is applied', async function (assert) {
+      await render(
+        hbs`<OSS::InfiniteSelect @items={{this.items}} @searchEnabled={{false}} @onSelect={{this.onSelect}}/>`
+      );
+
+      assert.dom('.upf-infinite-select').hasClass('upf-infinite-select--default');
+    });
+
+    test('it should render with the smart skin', async function (assert) {
+      await render(
+        hbs`<OSS::InfiniteSelect @items={{this.items}} @searchEnabled={{false}} @onSelect={{this.onSelect}} @skin="smart"/>`
+      );
+
+      assert.dom('.upf-infinite-select').hasClass('upf-infinite-select--smart');
+    });
+  });
+
   module('Error management', function () {
     module('On item selection, if onSelect is not passed', function () {
       test('it should throw an error', async function (assert) {
diff --git a/tests/integration/components/o-s-s/scrollable-panel-test.ts b/tests/integration/components/o-s-s/scrollable-panel-test.ts
index 5db4532ab..b7ded590e 100644
--- a/tests/integration/components/o-s-s/scrollable-panel-test.ts
+++ b/tests/integration/components/o-s-s/scrollable-panel-test.ts
@@ -10,6 +10,7 @@ module('Integration | Component | o-s-s/scrollable-panel', function (hooks) {
   hooks.beforeEach(function () {
     this.onBottomReached = sinon.stub();
     this.hideScrollbar = false;
+    this.offset = 0;
   });
 
   function scrollIntoView(elementId: string) {
@@ -20,7 +21,8 @@ module('Integration | Component | o-s-s/scrollable-panel', function (hooks) {
   <div class="background-color-gray-50" style="height:300px; width: 500px">
     <OSS::ScrollablePanel @disableShadows={{this.disableShadows}}
                           @onBottomReached={{this.onBottomReached}}
-                          @hideScrollbar={{this.hideScrollbar}}>
+                          @hideScrollbar={{this.hideScrollbar}}
+                          @offset={{this.offset}} >
       <div class="fx-col fx-gap-px-12 padding-px-12">
         <div class="background-color-gray-200" style="height: 50px; width: 100%;" id="start-element"/>
         <div class="background-color-gray-200" style="height: 50px; width: 100%;" />
@@ -200,4 +202,26 @@ module('Integration | Component | o-s-s/scrollable-panel', function (hooks) {
       .dom('.oss-scrollable-panel-container .oss-scrollable-panel-content')
       .hasClass('oss-scrollable-panel-content--hidden');
   });
+
+  module('with @offset', function (hooks) {
+    hooks.beforeEach(function () {
+      this.set('offset', 10);
+    });
+
+    test('When scrolling under the offset, it does not display top shadow', async function (assert) {
+      await render(renderScrollableContent);
+
+      assert.dom('.oss-scrollable-panel--shadow__top').doesNotExist();
+      await scrollTo('.oss-scrollable-panel-content', 0, 5);
+      assert.dom('.oss-scrollable-panel--shadow__top').doesNotExist();
+    });
+
+    test('When scrolling above the offset, it displays the top shadow', async function (assert) {
+      await render(renderScrollableContent);
+
+      assert.dom('.oss-scrollable-panel--shadow__top').doesNotExist();
+      await scrollTo('.oss-scrollable-panel-content', 0, 15);
+      assert.dom('.oss-scrollable-panel--shadow__top').exists();
+    });
+  });
 });
diff --git a/tests/integration/components/o-s-s/smart/button-test.ts b/tests/integration/components/o-s-s/smart/button-test.ts
new file mode 100644
index 000000000..019ef3026
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/button-test.ts
@@ -0,0 +1,162 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click, setupOnerror, waitUntil } from '@ember/test-helpers';
+
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/smart/button', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the label when present', async function (assert) {
+    await render(hbs`<OSS::Smart::Button @icon="fab fa-facebook" @label="Label" />`);
+
+    assert.dom('.upf-smart-btn span').hasText('Label');
+  });
+
+  test('it renders the icon when present', async function (assert) {
+    await render(hbs`<OSS::Smart::Button @icon="fab fa-facebook" />`);
+
+    assert.dom('.upf-smart-btn i').hasClass('fa-facebook');
+  });
+
+  test('it renders the iconUrl when present', async function (assert) {
+    await render(hbs`<OSS::Smart::Button @iconUrl="/@upfluence/oss-components/assets/star-icon.svg" />`);
+    assert.dom('.upf-smart-btn img').hasAttribute('src', '/@upfluence/oss-components/assets/star-icon.svg');
+  });
+
+  test('it renders the icon and label when present', async function (assert) {
+    await render(hbs`<OSS::Smart::Button @icon="fab fa-facebook" @label="Label" />`);
+
+    assert.dom('.upf-smart-btn i').hasClass('fa-facebook');
+    assert.dom('.upf-smart-btn span').hasText('Label');
+  });
+
+  test('it renders the iconUrl and label when present', async function (assert) {
+    await render(hbs`<OSS::Smart::Button @iconUrl="/@upfluence/oss-components/assets/star-icon.svg" @label="Label" />`);
+
+    assert.dom('.upf-smart-btn img').hasAttribute('src', '/@upfluence/oss-components/assets/star-icon.svg');
+    assert.dom('.upf-smart-btn span').hasText('Label');
+  });
+
+  test('when icon and iconUrl are present, it only renders the icon', async function (assert) {
+    await render(
+      hbs`<OSS::Smart::Button @icon="fab fa-facebook" @iconUrl="/@upfluence/oss-components/assets/heart.svg" />`
+    );
+
+    assert.dom('.upf-smart-btn i').hasClass('fa-facebook');
+    assert.dom('.upf-smart-btn img').doesNotExist();
+  });
+
+  module('skin rendering', function () {
+    test('it renders the primary skin as default', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @label="Test" />`);
+
+      assert.dom('.upf-smart-btn').exists({ count: 1 });
+      assert.dom('.upf-smart-btn').hasClass('upf-smart-btn--primary');
+      assert.dom('.upf-smart-btn').hasText('Test');
+    });
+
+    test('when using an unknown skin, it defaults to primary', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @skin="unknown" @label="Test" />`);
+
+      assert.dom('.upf-smart-btn').hasClass('upf-smart-btn--primary');
+    });
+
+    test('when the skin is primary, the proper skin is rendered', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @skin="primary" @label="Test" />`);
+
+      assert.dom('.upf-smart-btn').hasClass('upf-smart-btn--primary');
+    });
+
+    test('when the skin is secondary, the proper skin is rendered', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @skin="secondary" @label="Test" />`);
+
+      assert.dom('.upf-smart-btn').hasClass('upf-smart-btn--secondary');
+    });
+  });
+
+  module('size rendering', function () {
+    test('when using xs, it renders the corresponding size', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @size="xs" @label="Test" />`);
+
+      assert.dom('.upf-smart-btn').hasClass('upf-smart-btn--xs');
+    });
+
+    test('when using sm, it renders the corresponding size', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @size="sm" @label="Test" />`);
+
+      assert.dom('.upf-smart-btn').hasClass('upf-smart-btn--sm');
+    });
+
+    test('when using md, it renders the corresponding size', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @size="md" @label="Test" />`);
+
+      assert.dom('.upf-smart-btn').hasClass('upf-smart-btn--md');
+    });
+
+    test('when using lg, it renders the corresponding size', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @size="lg" @label="Test" />`);
+
+      assert.dom('.upf-smart-btn').hasClass('upf-smart-btn--lg');
+    });
+  });
+
+  module('loading state', function () {
+    test('when using the default loading, it renders the loading state without the label', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @size="sm" @loading={{true}} @label="Test" />`);
+      assert.dom('.upf-smart-btn i.fas').exists();
+      assert.dom('.upf-smart-btn i.fas').hasClass('fa-spinner-third');
+      assert.dom('.upf-smart-btn i.fas').hasClass('fa-spin');
+      assert.dom('.upf-smart-btn span.margin-left-px-6').doesNotExist();
+    });
+
+    test('when both loading and the showLabel loading option are truthy, the label is also displayed', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Button @size="sm" @loading={{true}} @label="Test" @loadingOptions={{hash showLabel=true}} />`
+      );
+      assert.dom('.upf-smart-btn i.fas').exists();
+      assert.dom('.upf-smart-btn i.fas').hasClass('fa-spinner-third');
+      assert.dom('.upf-smart-btn i.fas').hasClass('fa-spin');
+      assert.dom('.upf-smart-btn span.margin-left-px-6').exists();
+      assert.dom('.upf-smart-btn span.margin-left-px-6').hasText('Test');
+    });
+  });
+
+  module('when @circle is truthy', function () {
+    test('it renders a circular button', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @circle="true" @label="Test" />`);
+
+      assert.dom('.upf-smart-square-btn').exists();
+    });
+
+    test('if the icon and label are present, it renders only the icon', async function (assert) {
+      await render(hbs`<OSS::Smart::Button @icon="fab fa-facebook" @label="Label" />`);
+
+      assert.dom('.upf-smart-btn i').hasClass('fa-facebook');
+      assert.dom('.upf-smart-btn span').hasText('Label');
+    });
+
+    test('if both the iconUrl and label are present, it renders only the iconUrl', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Button @iconUrl="/@upfluence/oss-components/assets/star-icon.svg" @label="Label" />`
+      );
+
+      assert.dom('.upf-smart-btn img').hasAttribute('src', '/@upfluence/oss-components/assets/star-icon.svg');
+      assert.dom('.upf-smart-btn span').hasText('Label');
+    });
+  });
+
+  module('Error management', function () {
+    test('it fails if @label, @icon and @iconUrl are missing', async function (assert) {
+      setupOnerror((err: { message: string }) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::Smart::Button] You must pass either a @label, an @icon or an @iconUrl argument.'
+        );
+      });
+
+      await render(hbs`<OSS::Smart::Button />`);
+    });
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/feedback-test.ts b/tests/integration/components/o-s-s/smart/feedback-test.ts
new file mode 100644
index 000000000..186c5b03a
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/feedback-test.ts
@@ -0,0 +1,63 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | o-s-s/smart/feedback', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the component container', async function (assert) {
+    await render(hbs`<OSS::Smart::Feedback />`);
+    assert.dom('.oss-smart__feedback').exists();
+  });
+
+  test('it shows loading skeletons when @loading is true', async function (assert) {
+    this.loading = true;
+
+    await render(hbs`<OSS::Smart::Feedback @loading={{this.loading}} />`);
+
+    assert.dom('.upf-smart-skeleton-effect').exists({ count: 2 });
+  });
+
+  test('it renders content string when @loading is false and @contentString is provided', async function (assert) {
+    this.loading = false;
+    this.contentString = 'Test feedback message';
+
+    await render(hbs`
+      <OSS::Smart::Feedback 
+        @loading={{this.loading}} 
+        @contentString={{this.contentString}} 
+      />
+    `);
+
+    assert.dom('.oss-smart__generated').exists();
+    assert.dom('.oss-smart__feedback__content__text').hasText('Test feedback message');
+  });
+
+  test('it renders content array when @loading is false and @contentArray is provided', async function (assert) {
+    this.loading = false;
+    this.contentArray = ['First line', ' Second line'];
+
+    await render(hbs`
+      <OSS::Smart::Feedback 
+        @loading={{this.loading}} 
+        @contentArray={{this.contentArray}} 
+      />
+    `);
+
+    assert.dom('.oss-smart__generated').exists();
+    assert.dom('.oss-smart__feedback__content__text').hasText('First line Second line');
+  });
+
+  test('it yields the icon named-block content', async function (assert) {
+    await render(hbs`
+      <OSS::Smart::Feedback>
+        <:icon>
+          <div class="test-blob">Blob Content</div>
+        </:icon>
+      </OSS::Smart::Feedback>
+    `);
+
+    assert.dom('.test-blob').hasText('Blob Content');
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts b/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts
new file mode 100644
index 000000000..c573fb0f0
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts
@@ -0,0 +1,210 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { setupIntl } from 'ember-intl/test-support';
+import { render, setupOnerror, click, findAll, typeIn, triggerKeyEvent, triggerEvent } from '@ember/test-helpers';
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/smart/immersive/currency-input', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  hooks.beforeEach(function () {
+    this.onChange = sinon.stub();
+    this.placeholder = 'Placeholder';
+  });
+
+  test('it renders', async function (assert) {
+    await render(hbs`<OSS::Smart::Immersive::CurrencyInput @onChange={{this.onChange}} />`);
+    assert.dom('.smart-immersive-currency-input-container').exists();
+  });
+
+  test('The passed @value parameter is properly displayed in the input', async function (assert) {
+    await render(hbs`<OSS::Smart::Immersive::CurrencyInput @value="12341234" @onChange={{this.onChange}} />`);
+    assert.dom('input').hasValue('12341234');
+  });
+
+  test('It properly loads the correct currency when the @currency parameter is defined', async function (assert) {
+    await render(hbs`<OSS::Smart::Immersive::CurrencyInput @currency="EUR" @onChange={{this.onChange}} />`);
+    assert.dom('.currency-selector').hasText('€');
+  });
+
+  test('It displays a blue border around the component if @value is truthy', async function (assert) {
+    await render(hbs`<OSS::Smart::Immersive::CurrencyInput @value="12345" @onChange={{this.onChange}} />`);
+    assert
+      .dom('.smart-immersive-currency-input-container')
+      .hasClass('smart-immersive-currency-input-container--filled');
+  });
+
+  test('It displays a red border around the component if @hasError exists', async function (assert) {
+    await render(hbs`<OSS::Smart::Immersive::CurrencyInput @onChange={{this.onChange}} @hasError={{true}} />`);
+    assert
+      .dom('.smart-immersive-currency-input-container')
+      .hasClass('smart-immersive-currency-input-container--errored');
+  });
+
+  module('Currency selector', () => {
+    test('Clicking on the currency symbol button opens the currency selector', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @currency="" @value="" @onChange={{this.onChange}} />`);
+      await click('.currency-selector');
+      assert.dom('.upf-infinite-select').exists();
+    });
+
+    test('Selecting a new currency in the Currency selector triggers the onChange method', async function (assert) {
+      this.currency = '';
+      await render(
+        hbs`<OSS::Smart::Immersive::CurrencyInput @currency={{this.currency}} @value="" @onChange={{this.onChange}} />`
+      );
+      await click('.currency-selector');
+      await click('.upf-infinite-select__item:nth-child(5)');
+      assert.true(this.onChange.calledOnceWith('AUD', ''));
+    });
+
+    test('Typing in the search input filters the results', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @currency="" @value="" @onChange={{this.onChange}} />`);
+      await click('.currency-selector');
+      assert.dom('.upf-infinite-select').exists();
+      await typeIn('.upf-infinite-select input', 'usd');
+      const clickableRows = findAll('.upf-infinite-select__item');
+      assert.equal(clickableRows.length, 1);
+      assert.dom(clickableRows[0]).hasText('$ USD');
+    });
+
+    test('Searching by currency symbol works', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @currency="" @value="" @onChange={{this.onChange}} />`);
+      await click('.currency-selector');
+      assert.dom('.upf-infinite-select').exists();
+      await typeIn('.upf-infinite-select input', '€');
+      const clickableRows = findAll('.upf-infinite-select__item');
+      assert.equal(clickableRows.length, 1);
+      assert.dom(clickableRows[0]).hasText('€ EUR');
+    });
+
+    test('The passed @currency parameter changes are properly tracked in the input', async function (assert) {
+      this.currency = 'USD';
+      await render(
+        hbs`<OSS::Smart::Immersive::CurrencyInput @currency={{this.currency}} @value="" @onChange={{this.onChange}} />`
+      );
+      assert.dom('.currency-selector').hasText('$');
+      this.set('currency', 'EUR');
+      assert.dom('.currency-selector').hasText('€');
+    });
+
+    test('Passing the @allowedCurrencies parameter overwrites the selectable options', async function (assert) {
+      this.allowedCurrencies = [
+        { code: 'USD', symbol: '$' },
+        { code: 'EUR', symbol: '€' }
+      ];
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @currency={{this.currency}} @value="" @onChange={{this.onChange}}
+                                         @allowedCurrencies={{this.allowedCurrencies}} />`);
+      await click('.currency-selector');
+      const clickableRows = findAll('.upf-infinite-select__item');
+      assert.equal(clickableRows.length, 2);
+    });
+  });
+
+  module('Currency Input', () => {
+    test('Typing numbers in the currency input triggers the onChange method', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @currency="" @value="" @onChange={{this.onChange}} />`);
+      await typeIn('input', '8');
+      assert.ok(this.onChange.calledOnce);
+      assert.dom('input').hasValue('8');
+    });
+
+    test('Typing non-numeric characters does not apply changes', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @currency="" @value="" @onChange={{this.onChange}} />`);
+      await typeIn('input', '8');
+      assert.ok(this.onChange.calledOnce);
+      // @ts-ignore
+      await triggerKeyEvent('input', 'keydown', 'A', { code: 'a' });
+      assert.dom('input').hasValue('8');
+    });
+
+    test('Placeholder is correctly displayed when provided', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Immersive::CurrencyInput @currency="" @value="" @placeholder={{this.placeholder}} @onChange={{this.onChange}} />`
+      );
+      assert.dom('input').hasAttribute('placeholder', 'Placeholder');
+    });
+  });
+
+  module('When the paste event is received', function (hooks) {
+    hooks.beforeEach(function () {
+      this.value = '1234567890';
+    });
+
+    test('The value stored in the clipboard is inserted in the input', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @onChange={{this.onChange}} @value={{this.value}} />`);
+      assert.dom('input').hasValue('1234567890');
+      await triggerEvent('input', 'paste', {
+        clipboardData: {
+          getData: sinon.stub().returns('123')
+        }
+      });
+
+      assert.dom('input').hasValue('1234567890123');
+    });
+
+    test('The non-numeric characters are escaped', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @onChange={{this.onChange}} @value={{this.value}} />`);
+      assert.dom('input').hasValue('1234567890');
+      await triggerEvent('input', 'paste', {
+        clipboardData: {
+          getData: sinon.stub().returns('1withletter0')
+        }
+      });
+
+      assert.dom('input').hasValue('123456789010');
+    });
+
+    test('When selection is applied, it replaces the selection', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::CurrencyInput @onChange={{this.onChange}} @value={{this.value}} />`);
+      assert.dom('input').hasValue('1234567890');
+      let input = document.querySelector('input.ember-text-field') as HTMLInputElement;
+      input.setSelectionRange(4, 6);
+      await triggerEvent('input', 'paste', {
+        clipboardData: {
+          getData: sinon.stub().returns('0')
+        }
+      });
+
+      assert.dom('input').hasValue('123407890');
+    });
+  });
+
+  module('Loading', () => {
+    hooks.beforeEach(function () {
+      this.loading = true;
+    });
+
+    test('When the component is loading, it displays an animated div instead of the input', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Immersive::CurrencyInput @onChange={{this.onChange}} @placeholder={{this.placeholder}}
+                                                  @loading={{this.loading}} />`
+      );
+
+      assert.dom('.smart-immersive-currency-input-container input').doesNotExist();
+      assert.dom('.loading-placeholder').exists();
+      assert.dom('.loading-placeholder').hasText(this.placeholder);
+    });
+
+    test('Once loading is over, it displays an animation', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Immersive::CurrencyInput @onChange={{this.onChange}} @value="12345"
+                                                  @placeholder="Placeholder" @loading={{this.loading}} />`
+      );
+      this.set('loading', false);
+      assert.dom('.smart-immersive-currency-input-container').hasClass('smart-rotating-gradient');
+    });
+  });
+
+  test('It throws an error if @onChange is not passed', async function (assert) {
+    setupOnerror((err: any) => {
+      assert.equal(
+        err.message,
+        'Assertion Failed: [component][OSS::Smart::Immersive::CurrencyInput] The parameter @onChange of type function is mandatory'
+      );
+    });
+    await render(hbs`<OSS::Smart::Immersive::CurrencyInput />`);
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/immersive/input-test.ts b/tests/integration/components/o-s-s/smart/immersive/input-test.ts
new file mode 100644
index 000000000..aa9cda94f
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/immersive/input-test.ts
@@ -0,0 +1,171 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, typeIn } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/smart/immersive/input', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.value = 'Jolie mouche';
+    this.placeholder = "L'eteint ressort";
+    this.loading = false;
+    this.onChange = sinon.stub();
+  });
+
+  test('it renders', async function (assert) {
+    await renderComponent();
+
+    assert.dom('.smart-immersive-input-container').exists();
+  });
+
+  module('value', () => {
+    test('When a value is filled, it renders a specific styling', async function (assert) {
+      await renderComponent();
+
+      assert.dom('.smart-immersive-input-container').hasClass('smart-immersive-input-container--filled');
+    });
+
+    test('When a value is empty, it renders a specific styling', async function (assert) {
+      this.value = '';
+      await renderComponent();
+
+      assert.dom('.smart-immersive-input-container').hasNoClass('smart-immersive-input-container--filled');
+    });
+  });
+
+  module('placeholder', () => {
+    test('When a placeholder is empty, it renders a specific styling', async function (assert) {
+      this.value = '';
+      this.placeholder = '';
+      await renderComponent();
+
+      assert.dom('.smart-immersive-input-container input').hasAttribute('placeholder', '');
+    });
+
+    test('When a placeholder is filled, it renders a specific styling', async function (assert) {
+      this.value = '';
+      await renderComponent();
+
+      assert.dom('.smart-immersive-input-container input').hasAttribute('placeholder', this.placeholder);
+    });
+  });
+
+  module('OnChange', () => {
+    test('When input is updated, it trigger the onChange action', async function (assert) {
+      await renderComponent();
+
+      assert.ok(this.onChange.notCalled);
+      await typeIn('.smart-immersive-input-container input', 'a');
+      assert.ok(this.onChange.calledOnceWith('Jolie mouchea'));
+    });
+  });
+
+  module('loading', (hooks) => {
+    hooks.beforeEach(function () {
+      this.loading = true;
+    });
+
+    test('When input is loading, it display an animated div instead of the input', async function (assert) {
+      await renderComponent();
+
+      assert.dom('.smart-immersive-input-container input').doesNotExist();
+      assert.dom('.loading-placeholder').exists();
+      assert.dom('.loading-placeholder').hasText(this.placeholder);
+    });
+
+    test('Once loading is finish, it display an animation once', async function (assert) {
+      await renderComponent();
+      this.set('loading', false);
+      assert.dom('.smart-immersive-input-container').hasClass('smart-rotating-gradient');
+    });
+  });
+
+  module('Dynamic width', () => {
+    test('Input has a min width of 50px', async function (assert) {
+      this.value = '';
+      this.placeholder = '';
+      await renderComponent();
+
+      const element = document.querySelector('.smart-immersive-input-container') as HTMLElement;
+      assert.equal(element.offsetWidth, 52);
+    });
+
+    test('When input has value or placeholder, the size is based on input content', async function (assert) {
+      await renderComponent();
+
+      const element = document.querySelector('.smart-immersive-input-container') as HTMLElement;
+      assert.equal(element.offsetWidth, 104);
+      await typeIn('.smart-immersive-input-container input', 'more text');
+      assert.equal(element.offsetWidth, 158);
+    });
+  });
+
+  module('Prefix name block', () => {
+    test('When no prefix is passed, prefix section is not displayed', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Immersive::Input @value={{this.value}} 
+                                        @placeholder={{this.placeholder}}
+                                        @loading={{this.loading}}
+                                        @onChange={{this.onChange}} />`
+      );
+
+      assert.dom('.smart-immersive-input-container .prefix').doesNotExist();
+    });
+
+    test('When a prefix is passed, prefix section is displayed properly', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Immersive::Input @value={{this.value}} 
+                                        @placeholder={{this.placeholder}}
+                                        @loading={{this.loading}}
+                                        @onChange={{this.onChange}}>
+            <:prefix>
+              <i class="fas fa-user" />
+            </:prefix>
+          </OSS::Smart::Immersive::Input>`
+      );
+
+      assert.dom('.smart-immersive-input-container .prefix').exists();
+      assert.dom('.smart-immersive-input-container .prefix i.fas.fa-user').exists();
+    });
+  });
+
+  module('Suffix name block', () => {
+    test('When no suffix is passed, suffix section is not displayed', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Immersive::Input @value={{this.value}} 
+                                        @placeholder={{this.placeholder}}
+                                        @loading={{this.loading}}
+                                        @onChange={{this.onChange}} />`
+      );
+
+      assert.dom('.smart-immersive-input-container .suffix').doesNotExist();
+    });
+
+    test('When a suffix is passed, suffix section is displayed properly', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::Immersive::Input @value={{this.value}} 
+                                        @placeholder={{this.placeholder}}
+                                        @loading={{this.loading}}
+                                        @onChange={{this.onChange}}>
+            <:suffix>
+              <i class="fas fa-user" />
+            </:suffix>
+          </OSS::Smart::Immersive::Input>`
+      );
+
+      assert.dom('.smart-immersive-input-container .suffix').exists();
+      assert.dom('.smart-immersive-input-container .suffix i.fas.fa-user').exists();
+    });
+  });
+
+  async function renderComponent(): Promise<void> {
+    return await render(
+      hbs`<OSS::Smart::Immersive::Input @value={{this.value}} 
+                                        @placeholder={{this.placeholder}}
+                                        @loading={{this.loading}}
+                                        @onChange={{this.onChange}} />`
+    );
+  }
+});
diff --git a/tests/integration/components/o-s-s/smart/immersive/logo-test.ts b/tests/integration/components/o-s-s/smart/immersive/logo-test.ts
new file mode 100644
index 000000000..2fafc63a8
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/immersive/logo-test.ts
@@ -0,0 +1,223 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, setupOnerror } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+import { LOGO_COLORS, LOGO_ICONS } from 'dummy/utils/logo-config';
+
+module('Integration | Component | o-s-s/smart/immersive/logo', function (hooks) {
+  setupRenderingTest(hooks);
+  hooks.beforeEach(function () {
+    this.onEdit = sinon.stub();
+  });
+
+  test('it renders with icon mode', async function (assert) {
+    this.icon = 'fa:star';
+    this.editable = false;
+
+    await render(hbs`<OSS::Smart::Immersive::Logo
+      @icon={{this.icon}}
+      @editable={{this.editable}}
+    />`);
+
+    assert.dom('.smart-logo-icon').exists();
+    assert.dom('.smart-logo-icon').hasClass('smart-logo-icon-color_star');
+    assert.dom('i.fad.fa-fa').exists();
+    assert.dom('.edit-overlay').doesNotExist();
+  });
+
+  test('it renders image mode when url is provided', async function (assert) {
+    this.url = 'https://example.com/image.png';
+    this.editable = false;
+
+    await render(hbs`<OSS::Smart::Immersive::Logo
+      @url={{this.url}}
+      @editable={{this.editable}}
+    />`);
+
+    assert.dom('.smart-logo-image').exists();
+    assert.dom('.smart-logo-image').hasAttribute('src', this.url);
+    assert.dom('.smart-logo-icon').doesNotExist();
+  });
+
+  test('it renders edit overlay when editable', async function (assert) {
+    this.icon = 'fa:pen';
+    this.editable = true;
+    this.onEdit = sinon.stub();
+
+    await render(hbs`<OSS::Smart::Immersive::Logo
+      @icon={{this.icon}}
+      @editable={{this.editable}}
+      @onEdit={{this.onEdit}}
+    />`);
+
+    assert.dom('.edit-overlay').exists();
+  });
+
+  test('onEdit is called when the component is clicked', async function (assert) {
+    this.icon = 'fa:pen';
+    this.editable = true;
+
+    await render(hbs`<OSS::Smart::Immersive::Logo
+      @icon={{this.icon}}
+      @editable={{this.editable}}
+      @onEdit={{this.onEdit}}
+    />`);
+
+    assert.dom('.edit-overlay').exists();
+    await this.element.querySelector('.edit-overlay').click();
+    assert.ok(this.onEdit.calledOnce);
+  });
+
+  LOGO_ICONS.forEach((iconName) => {
+    const icon = `${iconName}:orange`;
+    test(`renders icon mode correctly for icon "${icon}"`, async function (assert) {
+      this.icon = icon;
+      this.editable = false;
+
+      await render(hbs`<OSS::Smart::Immersive::Logo
+          @icon={{this.icon}}
+          @editable={{this.editable}}
+        />`);
+
+      assert.dom(`.smart-logo-icon i.fa-${iconName}`).exists();
+    });
+  });
+
+  LOGO_COLORS.forEach((color) => {
+    const icon = `rabbit:${color}`;
+    test(`renders icon mode correctly for color "${color}"`, async function (assert) {
+      this.icon = icon;
+      this.editable = false;
+
+      await render(hbs`<OSS::Smart::Immersive::Logo
+        @icon={{this.icon}}
+        @editable={{this.editable}}
+      />`);
+
+      assert.dom(`.smart-logo-icon`).hasClass(`smart-logo-icon-color_${color}`);
+    });
+  });
+
+  test(`it renders the generating animation when loading is true`, async function (assert) {
+    this.loading = true;
+
+    await render(hbs`<OSS::Smart::Immersive::Logo
+      @icon={{this.icon}}
+      @editable={{this.editable}}
+      @loading={{this.loading}}
+    />`);
+
+    assert.dom('.oss-smart__immersive-icon-container--generating').exists();
+  });
+
+  module('@hasError', () => {
+    test('it applies the error class when hasError is true', async function (assert) {
+      this.hasError = true;
+
+      await render(hbs`<OSS::Smart::Immersive::Logo
+        @icon={{this.icon}}
+        @editable={{this.editable}}
+        @hasError={{this.hasError}}
+      />`);
+
+      assert.dom('.oss-smart__immersive-icon-container--errored').exists();
+    });
+
+    test('it does not apply the error class when hasError is false', async function (assert) {
+      this.hasError = false;
+
+      await render(hbs`<OSS::Smart::Immersive::Logo
+        @icon={{this.icon}}
+        @editable={{this.editable}}
+        @hasError={{this.hasError}}
+      />`);
+
+      assert.dom('.oss-smart__immersive-icon-container--errored').doesNotExist();
+    });
+
+    test('it does not apply the class by default', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::Logo
+        @icon={{this.icon}}
+        @editable={{this.editable}}
+        @hasError={{this.hasError}}
+      />`);
+
+      assert.dom('.oss-smart__immersive-icon-container--errored').doesNotExist();
+    });
+  });
+
+  test(`it renders the generated content animation when loading is false & url or icon is present`, async function (assert) {
+    this.loading = true;
+    this.icon = 'rabbit:orange';
+
+    await render(hbs`<OSS::Smart::Immersive::Logo
+      @icon={{this.icon}}
+      @editable={{this.editable}}
+      @loading={{this.loading}}
+    />`);
+
+    this.set('loading', false);
+    assert.dom('.smart-rotating-gradient').exists();
+  });
+
+  test('it throws an error if icon format is invalid', async function (assert) {
+    this.icon = 'invalidFormat';
+
+    setupOnerror((error: Error) => {
+      assert.equal(
+        error.message,
+        `Assertion Failed: Invalid icon format "${this.icon}". Expected format is "iconName:colorName".`
+      );
+    });
+
+    render(hbs`<OSS::Smart::Immersive::Logo
+      @icon={{this.icon}}
+      @editable={{this.editable}}
+    />`);
+  });
+
+  test('it uses the fallback SVG when both icon and url are missing', async function (assert) {
+    this.editable = false;
+
+    await render(hbs`<OSS::Smart::Immersive::Logo
+      @editable={{this.editable}}
+      @onEdit={{this.onEdit}}
+    />`);
+
+    assert.dom('.smart-logo-image').exists('Fallback image container is rendered');
+    assert.dom('.smart-logo-image').hasAttribute('src', '/assets/images/picture-frame.svg');
+  });
+
+  module('@size', () => {
+    test('By default, it applies the size "md" class', async function (assert) {
+      await render(hbs`<OSS::Smart::Immersive::Logo
+        @editable={{this.editable}}
+      />`);
+
+      assert.dom('.oss-smart__immersive-icon-container--size-md').exists();
+    });
+
+    test('it applies the correct class for size "sm"', async function (assert) {
+      this.size = 'sm';
+
+      await render(hbs`<OSS::Smart::Immersive::Logo
+        @size={{this.size}}
+        @editable={{this.editable}}
+      />`);
+
+      assert.dom('.oss-smart__immersive-icon-container--size-sm').exists();
+    });
+
+    test('it applies the correct class for size "lg"', async function (assert) {
+      this.size = 'lg';
+
+      await render(hbs`<OSS::Smart::Immersive::Logo
+        @size={{this.size}}
+        @editable={{this.editable}}
+      />`);
+
+      assert.dom('.oss-smart__immersive-icon-container--size-lg').exists();
+    });
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/immersive/select-test.ts b/tests/integration/components/o-s-s/smart/immersive/select-test.ts
new file mode 100644
index 000000000..47d74d973
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/immersive/select-test.ts
@@ -0,0 +1,275 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { click, fillIn, render, setupOnerror } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Component | o-s-s/smart/immersive/select', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  hooks.beforeEach(function () {
+    this.selectedItems = [{ value: 'item1' }];
+    this.items = [
+      { value: 'item1', label: 'Item 1' },
+      { value: 'item2', label: 'Item 2' }
+    ];
+    this.placeholder = 'Default placeholder';
+    this.loading = false;
+    this.hasError = false;
+    this.multiple = true;
+    this.displayedItems = 0;
+    this.maxItemWidth = 200;
+    this.onSearch = sinon.stub();
+    this.searchEnabled = true;
+    this.onChange = sinon.stub();
+  });
+
+  module('It renders', () => {
+    test('When missing selected-item name block, it throws an error', async function (assert) {
+      setupOnerror((err: { message: string }) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::Smart::Immersive::Select] You must pass selected-item named block'
+        );
+      });
+
+      await render(
+        hbs`<OSS::Smart::Immersive::Select @value={{this.value}} @values={{this.selectedItems}} @items={{this.items}} 
+                                         @multiple={{this.multiple}} @placeholder={{this.placeholder}}
+                                         @loading={{this.loading}} @hasError={{this.hasError}}
+                                         @displayedItems={{this.displayedItems}} @maxItemWidth={{this.maxItemWidth}}
+                                         @onChange={{this.onChange}} @onSearch={{this.onSearch}}>
+            <:option-item as |item|>
+              <span class="option-item-label">{{item.label}}</span>
+            </:option-item>
+          </OSS::Smart::Immersive::Select>`
+      );
+    });
+
+    test('With missing option-item name block, it throws an error', async function (assert) {
+      setupOnerror((err: { message: string }) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::Smart::Immersive::Select] You must pass option-item named block'
+        );
+      });
+
+      await render(
+        hbs`<OSS::Smart::Immersive::Select @value={{this.value}} @values={{this.selectedItems}} @items={{this.items}} 
+                                         @multiple={{this.multiple}} @placeholder={{this.placeholder}}
+                                         @loading={{this.loading}} @hasError={{this.hasError}}
+                                         @displayedItems={{this.displayedItems}} @maxItemWidth={{this.maxItemWidth}}
+                                         @onChange={{this.onChange}} @onSearch={{this.onSearch}}>
+            <:selected-item as |item|>
+              <span class="selected-item-label">{{item}}</span>
+            </:selected-item>
+          </OSS::Smart::Immersive::Select>`
+      );
+    });
+
+    test('With all required named blocks', async function (assert) {
+      await renderComponent();
+
+      assert.dom('.smart-immersive-select-container').exists();
+    });
+  });
+
+  module('Single select', (hooks) => {
+    hooks.beforeEach(function () {
+      this.selectedItems = null;
+      this.value = { value: 'item1' };
+      this.multiple = false;
+    });
+
+    test('When clicking on the immersive input, it opens the infinite select', async function (assert) {
+      await renderSingleComponent();
+      assert.dom('.upf-infinite-select').doesNotExist();
+      await click('.smart-immersive-select-container div');
+      assert.dom('.upf-infinite-select').exists().hasClass('upf-infinite-select--smart');
+    });
+
+    test('Selected items are highlighted with a checkmark', async function (assert) {
+      await renderSingleComponent();
+      await click('.smart-immersive-select-container div');
+      assert.dom('.upf-infinite-select__item .selected').exists();
+      assert.dom('.upf-infinite-select__item .selected i').exists();
+      assert.dom('.upf-infinite-select__item .selected i').hasClass('font-color-primary-500').hasClass('fa-check');
+    });
+
+    test('Selecting an item automatically closes the dropdown', async function (assert) {
+      await renderSingleComponent();
+      await click('.smart-immersive-select-container div');
+      await click('.upf-infinite-select__item:nth-of-type(2)');
+      assert.dom('.upf-infinite-select').doesNotExist();
+    });
+
+    module('@searchEnabled parameter', () => {
+      test('The search input is hidden if the searchEnabled is false', async function (assert) {
+        this.searchEnabled = false;
+        await renderComponent();
+        await click('.smart-immersive-select-container div');
+
+        assert.dom('.upf-infinite-select--search input').doesNotExist();
+      });
+
+      test('The search input is visible if the searchEnabled is true', async function (assert) {
+        this.searchEnabled = true;
+        await renderComponent();
+        await click('.smart-immersive-select-container div');
+
+        assert.dom('.upf-infinite-select--search input').exists();
+      });
+    });
+  });
+
+  module('Multiple select', () => {
+    test('When clicking on the immersive input, it opens the infinite select', async function (assert) {
+      await renderComponent();
+      assert.dom('.upf-infinite-select').doesNotExist();
+      await click('.smart-immersive-select-container div');
+      assert.dom('.upf-infinite-select').exists().hasClass('upf-infinite-select--smart');
+    });
+
+    test('Selected items are highlighted with an active checkbox', async function (assert) {
+      await renderComponent();
+      await click('.smart-immersive-select-container div');
+
+      assert.dom('.upf-infinite-select__item:nth-of-type(1) > div').hasClass('selected');
+      assert.dom('.upf-infinite-select__item:nth-of-type(1) > div .upf-checkbox input').isChecked();
+      assert.dom('.upf-infinite-select__item:nth-of-type(2) > div').hasNoClass('selected');
+      assert.dom('.upf-infinite-select__item:nth-of-type(2) > div .upf-checkbox input').isNotChecked();
+    });
+
+    test('When displayedItems is defined, only the X firsts items are displayed, the remaining ones are concatenated', async function (assert) {
+      this.displayedItems = 1;
+      this.selectedItems = [{ value: 'Item 1' }, { value: 'Item 2' }, { value: 'Item 3' }, { value: 'Item 4' }];
+      await renderComponent();
+
+      assert.dom('.smart-immersive-select-container .select-smart-item').exists({ count: 2 });
+      assert.dom('.smart-immersive-select-container .select-smart-item:nth-of-type(1)').hasText('Item 1');
+      assert.dom('.smart-immersive-select-container .select-smart-item:nth-of-type(2)').exists('+3');
+    });
+
+    test('Selecting an item does not automatically close the dropdown', async function (assert) {
+      await renderComponent();
+      await click('.smart-immersive-select-container div');
+      await click('.upf-infinite-select__item:nth-of-type(2)');
+      assert.dom('.upf-infinite-select').exists();
+    });
+
+    module('@searchEnabled parameter', () => {
+      test('The search input is hidden if the searchEnabled is false', async function (assert) {
+        this.searchEnabled = false;
+        await renderComponent();
+        await click('.smart-immersive-select-container div');
+
+        assert.dom('.upf-infinite-select--search input').doesNotExist();
+      });
+
+      test('The search input is visible if the searchEnabled is true', async function (assert) {
+        this.searchEnabled = true;
+        await renderComponent();
+        await click('.smart-immersive-select-container div');
+
+        assert.dom('.upf-infinite-select--search input').exists();
+      });
+    });
+
+    test('When @hideCheckboxes is true, checkboxes are not rendered', async function (assert) {
+      this.hideCheckboxes = true;
+      await renderComponent();
+      await click('.smart-immersive-select-container div');
+      assert.dom('.upf-infinite-select__item:nth-of-type(1) .upf-checkbox').doesNotExist();
+      assert.dom('.upf-infinite-select__item:nth-of-type(2) .upf-checkbox').doesNotExist();
+    });
+  });
+
+  test('When maxItemWidth is defined, it applies the max-width style to the selected items', async function (assert) {
+    await renderComponent();
+    assert.dom('.smart-immersive-select-container .select-smart-item').hasStyle({ 'max-width': '200px' });
+  });
+
+  test('When selecting an item in the list, it triggers the onChange action ', async function (assert) {
+    await renderComponent();
+
+    assert.ok(this.onChange.notCalled);
+    await click('.smart-immersive-select-container div');
+    await click('.upf-infinite-select__item:nth-of-type(2)');
+    assert.ok(this.onChange.calledOnceWith({ value: 'item2', label: 'Item 2' }));
+  });
+
+  test('When updating the search input, it triggers the onSearch action ', async function (assert) {
+    await renderComponent();
+
+    assert.ok(this.onSearch.notCalled);
+    await click('.smart-immersive-select-container div');
+    await fillIn('.upf-infinite-select--search input', 'test');
+    assert.ok(this.onSearch.calledOnceWith('test'));
+  });
+
+  module('loading', (hooks) => {
+    hooks.beforeEach(function () {
+      this.loading = true;
+    });
+
+    test('When input is loading, it display an animated div instead of the input', async function (assert) {
+      await renderComponent();
+
+      assert.dom('.smart-immersive-select-container .loading-placeholder').exists();
+      assert.dom('.smart-immersive-select-container .loading-placeholder').hasText(this.placeholder);
+    });
+
+    module('Once loading is finished', () => {
+      test('It displays an animation once', async function (assert) {
+        await renderComponent();
+        this.set('loading', false);
+        assert.dom('.smart-immersive-select-container').hasClass('smart-rotating-gradient');
+      });
+
+      test('If the field is empty, it does not display an animation once', async function (assert) {
+        this.selectedItems = [];
+        await renderComponent();
+        this.set('loading', false);
+        assert.dom('.smart-immersive-select-container').hasNoClass('smart-rotating-gradient');
+      });
+    });
+  });
+
+  async function renderComponent(): Promise<void> {
+    return await render(
+      hbs`<OSS::Smart::Immersive::Select @values={{this.selectedItems}} @items={{this.items}} 
+                                         @multiple={{this.multiple}} @placeholder={{this.placeholder}}
+                                         @loading={{this.loading}} @hasError={{this.hasError}}
+                                         @displayedItems={{this.displayedItems}} @maxItemWidth={{this.maxItemWidth}}
+                                         @onChange={{this.onChange}} @onSearch={{this.onSearch}}
+                                         @searchEnabled={{this.searchEnabled}} @hideCheckboxes={{this.hideCheckboxes}} >
+            <:selected-item as |item|>
+              <span class="selected-item-label">{{item.value}}</span>
+            </:selected-item>
+            <:option-item as |item|>
+              <span class="option-item-label">{{item.label}}</span>
+            </:option-item>
+          </OSS::Smart::Immersive::Select>`
+    );
+  }
+
+  async function renderSingleComponent(): Promise<void> {
+    return await render(
+      hbs`<OSS::Smart::Immersive::Select @values={{array this.value}} @items={{this.items}} 
+                                         @multiple={{this.multiple}} @placeholder={{this.placeholder}}
+                                         @loading={{this.loading}} @hasError={{this.hasError}}
+                                         @displayedItems={{this.displayedItems}} @maxItemWidth={{this.maxItemWidth}}
+                                         @onChange={{this.onChange}} @onSearch={{this.onSearch}}
+                                         @searchEnabled={{this.searchEnabled}}>
+            <:selected-item as |item|>
+              <span class="selected-item-label">{{item}}</span>
+            </:selected-item>
+            <:option-item as |item|>
+              <span class="option-item-label">{{item.label}}</span>
+            </:option-item>
+          </OSS::Smart::Immersive::Select>`
+    );
+  }
+});
diff --git a/tests/integration/components/o-s-s/smart/input-test.ts b/tests/integration/components/o-s-s/smart/input-test.ts
new file mode 100644
index 000000000..26573a4ff
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/input-test.ts
@@ -0,0 +1,147 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, typeIn, triggerEvent } from '@ember/test-helpers';
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/smart/input', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<OSS::Smart::Input />`);
+    assert.dom('.upf-input').exists();
+  });
+
+  module('Input Blocks', () => {
+    async function renderComponentWithPrefixSuffix() {
+      await render(hbs`
+        <OSS::Smart::Input>
+          <:prefix>
+            <OSS::Icon @style="solid" @icon="fa-user" />
+          </:prefix>
+          <:input>
+            <Input id="custom-input"/>
+          </:input>
+          <:suffix>
+            <OSS::Icon @style="solid" @icon="fa-times" />
+          </:suffix>
+        </OSS::Smart::Input>`);
+    }
+
+    test('Prefix block renders properly', async function (assert) {
+      await renderComponentWithPrefixSuffix();
+      assert.dom('.fa-user').exists();
+    });
+
+    test('Suffix block renders properly', async function (assert) {
+      await renderComponentWithPrefixSuffix();
+      assert.dom('.fa-times').exists();
+    });
+
+    test('Custom input block overrides default', async function (assert) {
+      await renderComponentWithPrefixSuffix();
+      assert.dom('#custom-input').exists();
+    });
+  });
+
+  module('Component Parameters', (hooks) => {
+    let onValueChange: sinon.SinonSpy<any[], any>;
+    hooks.beforeEach(function () {
+      onValueChange = sinon.fake();
+      this.value = 'smartInput';
+      this.placeholder = 'Type here';
+      this.onValueChange = onValueChange;
+    });
+
+    async function renderComponentWithParams() {
+      await render(hbs`
+        <OSS::Smart::Input
+          @value={{this.value}}
+          @onChange={{this.onValueChange}}
+          @placeholder={{this.placeholder}}
+        />
+      `);
+    }
+
+    test('Binds @value correctly', async function (assert) {
+      await renderComponentWithParams();
+      assert.dom('.upf-input').hasValue('smartInput');
+    });
+
+    test('Sets @placeholder correctly', async function (assert) {
+      await renderComponentWithParams();
+      let input = find('.upf-input');
+      assert.strictEqual(input?.getAttribute('placeholder'), 'Type here');
+    });
+
+    test('Calls @onChange on input', async function (assert) {
+      await renderComponentWithParams();
+      let input = find('.upf-input');
+      assert.ok(input, 'Input element should exist');
+      await typeIn(input as Element, 'X');
+      assert.ok(onValueChange.called);
+    });
+
+    test('Calls @onChange on paste event', async function (assert) {
+      this.set('onChange', sinon.stub());
+      await render(hbs`
+        <OSS::Smart::Input
+          data-control-name="smart-input"
+          @onChange={{this.onChange}}
+        />
+      `);
+      assert.ok(this.onChange.notCalled);
+
+      await triggerEvent('.oss-input-container input', 'paste', {
+        clipboardData: { getData: (format: any) => `clip/${format}` }
+      });
+
+      assert.ok(this.onChange.calledWith('clip/Text'));
+    });
+  });
+
+  module('Smart Input Specific Features', () => {
+    test('Displays animated placeholder when loading is true', async function (assert) {
+      this.setProperties({ loading: true, placeholder: 'Smart...' });
+
+      await render(hbs`
+        <OSS::Smart::Input
+          @loading={{this.loading}}
+          @placeholder={{this.placeholder}}
+        />
+      `);
+
+      assert.dom('.smart_text_animated').hasText('Smart...');
+    });
+  });
+
+  module('Feedback and Error States', () => {
+    test('Displays success feedback', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::Input
+          @feedbackMessage={{hash type="success" value="All good!"}}
+        />
+      `);
+      assert.dom('.oss-input-container--success').exists();
+      assert.dom('.font-color-success-500').hasText('All good!');
+    });
+
+    test('Displays error message', async function (assert) {
+      await render(hbs`<OSS::Smart::Input @errorMessage="Oops" />`);
+      assert.dom('.oss-input-container--errored').exists();
+      assert.dom('.text-color-error').hasText('Oops');
+    });
+  });
+
+  module('Extra attributes', () => {
+    test('Custom class is applied', async function (assert) {
+      await render(hbs`<OSS::Smart::Input class="extra-class" />`);
+      assert.dom('.extra-class').exists();
+    });
+
+    test('data-control-name is passed through', async function (assert) {
+      await render(hbs`<OSS::Smart::Input data-control-name="smart-name" />`);
+      assert.dom('.oss-input-container').hasAttribute('data-control-name', 'smart-name');
+    });
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/number-input-test.ts b/tests/integration/components/o-s-s/smart/number-input-test.ts
new file mode 100644
index 000000000..0e1c1b0f9
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/number-input-test.ts
@@ -0,0 +1,219 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click, typeIn, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/smart/number-input', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<OSS::Smart::NumberInput />`);
+
+    assert.dom('.smart-number-input').exists();
+    assert.dom('.upf-square-btn').exists({ count: 2 });
+    assert.dom('.oss-input-container').exists();
+  });
+
+  module('Basic Functionality', (hooks) => {
+    let onChangeStub: sinon.SinonSpy<any[], any>;
+
+    hooks.beforeEach(function () {
+      onChangeStub = sinon.fake();
+      this.value = 10;
+      this.onChange = onChangeStub;
+    });
+
+    async function renderComponent() {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{this.value}}
+          @onChange={{this.onChange}}
+        />
+      `);
+    }
+
+    test('displays the current value', async function (assert) {
+      await renderComponent();
+      assert.dom('.upf-input').hasValue('10');
+    });
+
+    test('increases value when plus button is clicked', async function (assert) {
+      await renderComponent();
+      await click('.upf-square-btn:last-child');
+      assert.ok(onChangeStub.calledWith(11));
+    });
+
+    test('decreases value when minus button is clicked', async function (assert) {
+      await renderComponent();
+      await click('.upf-square-btn:first-child');
+      assert.ok(onChangeStub.calledWith(9));
+    });
+  });
+
+  module('Loading State', (hooks) => {
+    hooks.beforeEach(function () {
+      this.loading = true;
+      this.placeholder = 'Loading...';
+    });
+
+    test('disables buttons when loading', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @loading={{this.loading}}
+          @placeholder={{this.placeholder}}
+        />
+      `);
+
+      assert.dom('.upf-square-btn').hasAttribute('disabled', '');
+    });
+
+    test('applies loading class to container', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @loading={{this.loading}}
+          @placeholder={{this.placeholder}}
+        />
+      `);
+
+      assert.dom('.smart-number-input').hasClass('smart-number-input--loading');
+    });
+  });
+
+  module('Error State', (hooks) => {
+    hooks.beforeEach(function () {
+      this.value = 50;
+      this.hasError = true;
+      this.errorMessage = 'Invalid value';
+    });
+
+    test('applies error styling when hasError is true', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{this.value}}
+          @hasError={{this.hasError}}
+          @errorMessage={{this.errorMessage}}
+        />
+      `);
+
+      assert.dom('.smart-number-input').hasClass('smart-number-input--errored');
+    });
+
+    test('displays error message', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{this.value}}
+          @hasError={{this.hasError}}
+          @errorMessage={{this.errorMessage}}
+        />
+      `);
+
+      assert.dom('.text-color-error').hasText('Invalid value');
+    });
+
+    test('applies error styling when errorMessage is provided', async function (assert) {
+      this.hasError = false;
+
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{this.value}}
+          @errorMessage={{this.errorMessage}}
+        />
+      `);
+
+      assert.dom('.smart-number-input').hasClass('smart-number-input--errored');
+    });
+  });
+
+  module('Filled State', () => {
+    test('applies filled styling when value is present', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{100}}
+        />
+      `);
+
+      assert.dom('.smart-number-input').hasClass('smart-number-input--filled');
+    });
+
+    test('does not apply filled styling when value is undefined', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{undefined}}
+        />
+      `);
+
+      assert.dom('.smart-number-input').doesNotHaveClass('smart-number-input--filled');
+    });
+
+    test('does not apply filled styling when value is null', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{null}}
+        />
+      `);
+
+      assert.dom('.smart-number-input').doesNotHaveClass('smart-number-input--filled');
+    });
+  });
+
+  module('State Priority', (hooks) => {
+    test('error state takes priority over filled state', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{100}}
+          @hasError={{true}}
+        />
+      `);
+
+      assert.dom('.smart-number-input').hasClass('smart-number-input--errored');
+      assert.dom('.smart-number-input').hasClass('smart-number-input--filled');
+    });
+  });
+
+  module('Number Input Specific Features', (hooks) => {
+    hooks.beforeEach(function () {
+      this.min = 5;
+      this.max = 15;
+      this.step = 2;
+    });
+
+    test('respects min and max values', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{10}}
+          @min={{this.min}}
+          @max={{this.max}}
+          @step={{this.step}}
+        />
+      `);
+
+      assert.dom('.upf-square-btn:first-child').doesNotHaveAttribute('disabled');
+      assert.dom('.upf-square-btn:last-child').doesNotHaveAttribute('disabled');
+    });
+
+    test('disables min button when at minimum value', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{this.min}}
+          @min={{this.min}}
+          @max={{this.max}}
+        />
+      `);
+
+      assert.dom('.upf-square-btn:first-child').hasAttribute('disabled');
+    });
+
+    test('disables max button when at maximum value', async function (assert) {
+      await render(hbs`
+        <OSS::Smart::NumberInput
+          @value={{this.max}}
+          @min={{this.min}}
+          @max={{this.max}}
+        />
+      `);
+
+      assert.dom('.upf-square-btn:last-child').hasAttribute('disabled');
+    });
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/pill-test.ts b/tests/integration/components/o-s-s/smart/pill-test.ts
index 3bdf9949c..4f6508c12 100644
--- a/tests/integration/components/o-s-s/smart/pill-test.ts
+++ b/tests/integration/components/o-s-s/smart/pill-test.ts
@@ -47,11 +47,30 @@ module('Integration | Component | o-s-s/smart/pill', function (hooks) {
       assert.dom('.label').hasClass('loading-animation');
     });
 
-    test('Once loading is over, it displays the corresponding animation', async function (assert) {
-      await render(hbs`<OSS::Smart::Pill @label="Pill" @loading={{this.loading}} />`);
+    module('When selected is true', (hooks) => {
+      hooks.beforeEach(function () {
+        this.selected = true;
+      });
+
+      test('Once loading is over, it displays the corresponding animation', async function (assert) {
+        await render(hbs`<OSS::Smart::Pill @label="Pill" @loading={{this.loading}} @selected={{this.selected}}/>`);
+
+        this.set('loading', false);
+        assert.dom('.oss-smart-pill-container').hasClass('smart-rotating-gradient');
+      });
+    });
+
+    module('When selected is false', (hooks) => {
+      hooks.beforeEach(function () {
+        this.selected = false;
+      });
+
+      test('Once loading is over, it does not displays the corresponding animation', async function (assert) {
+        await render(hbs`<OSS::Smart::Pill @label="Pill" @loading={{this.loading}} @selected={{this.selected}}/>`);
 
-      this.set('loading', false);
-      assert.dom('.oss-smart-pill-container').hasClass('smart-rotating-gradient');
+        this.set('loading', false);
+        assert.dom('.oss-smart-pill-container').doesNotHaveClass('smart-rotating-gradient');
+      });
     });
   });
 });
diff --git a/tests/integration/components/o-s-s/smart/skeleton-test.ts b/tests/integration/components/o-s-s/smart/skeleton-test.ts
new file mode 100644
index 000000000..ad81a1ec4
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/skeleton-test.ts
@@ -0,0 +1,155 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, findAll, setupOnerror } from '@ember/test-helpers';
+
+module('Integration | Component | o-s-s/smart/skeleton', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<OSS::Smart::Skeleton/>`);
+    assert.dom('.upf-smart-skeleton-effect').exists();
+  });
+
+  module('@height parameters', () => {
+    test('Default height is 10px', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton/>`);
+
+      assert.dom('.upf-smart-skeleton-effect').hasStyle({ height: '10px' });
+    });
+
+    test('The component flat height should correspond to the parameter value', async function (assert) {
+      this.height = 400;
+
+      await render(hbs`<OSS::Smart::Skeleton @height={{this.height}}/>`);
+
+      assert.dom('.upf-smart-skeleton-effect').hasStyle({ height: '400px' });
+    });
+
+    test('The component percentage height should correspond to the parameter value', async function (assert) {
+      this.height = '100%';
+      await render(hbs`<div style="height:250px"><OSS::Smart::Skeleton @height={{this.height}}/></div>`);
+      assert.dom('.upf-smart-skeleton-effect').hasStyle({ height: '250px' });
+    });
+  });
+
+  module('@width parameters', () => {
+    test('Default width is 36px', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton/>`);
+
+      assert.dom('.upf-smart-skeleton-effect').hasStyle({ width: '36px' });
+    });
+
+    test('The component flat width should correspond to the parameter value', async function (assert) {
+      this.width = 400;
+
+      await render(hbs`<OSS::Smart::Skeleton @width={{this.width}}/>`);
+
+      assert.dom('.upf-smart-skeleton-effect').hasStyle({ width: '400px' });
+    });
+
+    test('The component percentage width should correspond to the parameter value', async function (assert) {
+      this.width = '100%';
+      await render(hbs`<div style="width:250px"><OSS::Smart::Skeleton @width={{this.width}}/></div>`);
+      assert.dom('.upf-smart-skeleton-effect').hasStyle({ width: '250px' });
+    });
+  });
+
+  module('@gap parameters', () => {
+    test('Default gap is applied correctly', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton @multiple={{2}} />`);
+
+      assert.dom('.fx-1').hasClass('fx-gap-px-9');
+    });
+
+    test('The component gap corresponds to its parameter value', async function (assert) {
+      this.gap = 12;
+
+      await render(hbs`<OSS::Smart::Skeleton @gap={{this.gap}} @multiple={{2}} />`);
+
+      assert.dom('.fx-1').hasClass('fx-gap-px-12');
+    });
+  });
+
+  module('@multiple parameters', () => {
+    test('Default has one skeleton effect', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton/>`);
+
+      let items = findAll('.upf-smart-skeleton-effect');
+
+      assert.ok(items.length === 1);
+    });
+
+    test('The content has multiple skeleton effect', async function (assert) {
+      this.multiple = 4;
+
+      await render(hbs`<OSS::Smart::Skeleton @multiple={{this.multiple}}/>`);
+
+      let items = findAll('.upf-smart-skeleton-effect');
+
+      assert.ok(items.length === 4);
+    });
+  });
+
+  module('@randomize parameters', (hooks) => {
+    hooks.beforeEach(function () {
+      this.multiple = 4;
+      this.width = 200;
+    });
+
+    test('Default randomize is falsy', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton @width={{this.width}}/>`);
+
+      let item = find('.upf-smart-skeleton-effect') as HTMLElement;
+
+      assert.ok(this.width == item?.offsetWidth);
+    });
+
+    test('Randomize width is within a 15% range', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton @multiple={{this.multiple}} @width={{this.width}} @randomize={{true}}/>`);
+
+      let item = find('.upf-smart-skeleton-effect') as HTMLElement;
+
+      assert.ok(item.offsetWidth <= 230 && item.offsetWidth >= 170);
+    });
+  });
+
+  module('@direction parameters', () => {
+    test('Default value is row', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton @multiple="3" />`);
+
+      assert.dom('.fx-1').hasClass(`fx-row`);
+    });
+
+    test('Value is column if specified', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton @direction="column" @multiple="2" />`);
+
+      assert.dom('.fx-1').hasClass(`fx-col`);
+    });
+  });
+
+  module('Extra attributes', () => {
+    test('Passing an extra class applies it to the component', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton class="my-extra-class" />`);
+      assert.dom('.upf-smart-skeleton-effect.my-extra-class').exists();
+    });
+
+    test('Passing a data-control-name applies it to the component', async function (assert) {
+      await render(hbs`<OSS::Smart::Skeleton data-control-name="layout-sidebar" />`);
+      let inputWrapper: Element | null = find('.upf-smart-skeleton-effect');
+      assert.equal(inputWrapper?.getAttribute('data-control-name'), 'layout-sidebar');
+    });
+  });
+
+  module('Error management', () => {
+    test('It throws an error if @direction is provided and does not match required values', async function (assert) {
+      setupOnerror((err: any) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::Smart::Skeleton] The @direction argument should be a value of row,column,col'
+        );
+      });
+      await render(hbs`<OSS::Smart::Skeleton @direction="toto"/>`);
+    });
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/tag-input-test.ts b/tests/integration/components/o-s-s/smart/tag-input-test.ts
new file mode 100644
index 000000000..7192fb157
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/tag-input-test.ts
@@ -0,0 +1,59 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, triggerKeyEvent, fillIn } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Component | o-s-s/smart/tag-input', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  hooks.beforeEach(function () {
+    this.onKeydown = sinon.stub();
+  });
+
+  test('it renders', async function (assert) {
+    await render(hbs`<OSS::Smart::TagInput @value="" @onKeydown={{this.onKeydown}} />`);
+    assert.dom('.tag-input-container').exists();
+  });
+
+  test('it renders the empty state with the default placeholder', async function (assert) {
+    await render(hbs`<OSS::Smart::TagInput @value="" @onKeydown={{this.onKeydown}} />`);
+    assert
+      .dom('.tag-input-empty-state')
+      .hasText(this.intl.t('oss-components.smart.tag_input.placeholder'), 'Placeholder text is rendered');
+  });
+
+  test('it displays the custom placeholder when @placeholder is provided', async function (assert) {
+    await render(
+      hbs`<OSS::Smart::TagInput @value="" @placeholder="Custom Placeholder" @onKeydown={{this.onKeydown}} />`
+    );
+    assert.dom('.tag-input-empty-state').hasText('Custom Placeholder', 'Custom placeholder is displayed');
+  });
+
+  test('it calls @onKeydown when pressing Enter', async function (assert) {
+    await render(hbs`<OSS::Smart::TagInput @value="" @onKeydown={{this.onKeydown}} />`);
+    await fillIn('[data-control-name="tag-input"]', 'foo');
+    await triggerKeyEvent('[data-control-name="tag-input"]', 'keydown', 'Enter');
+    assert.true(this.onKeydown.calledOnce, 'onKeydown is called once');
+  });
+
+  test('the input is cleared on validation', async function (assert) {
+    await render(hbs`<OSS::Smart::TagInput @value="" @onKeydown={{this.onKeydown}} />`);
+    await fillIn('[data-control-name="tag-input"]', 'foo');
+    assert.dom('[data-control-name="tag-input"]').hasValue('foo', 'Input has value "foo"');
+    await triggerKeyEvent('[data-control-name="tag-input"]', 'keydown', 'Enter');
+    assert.dom('[data-control-name="tag-input"]').hasValue('', 'Input is cleared after save');
+  });
+
+  test('it renders the animated overlay when loading', async function (assert) {
+    await render(hbs`<OSS::Smart::TagInput @loading={{true}} @value="" @onKeydown={{this.onKeydown}} />`);
+    assert.dom('.animated-overlay').exists('Animated overlay is shown');
+  });
+
+  test('it applies the error class when @hasError is true', async function (assert) {
+    await render(hbs`<OSS::Smart::TagInput @hasError={{true}} @value="" @onKeydown={{this.onKeydown}} />`);
+    assert.dom('.tag-input--error').exists('Error class is present');
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/tag-test.ts b/tests/integration/components/o-s-s/smart/tag-test.ts
new file mode 100644
index 000000000..b6351e833
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/tag-test.ts
@@ -0,0 +1,65 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+const SIZES = ['md', 'lg'];
+
+module('Integration | Component | o-s-s/smart/tag', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with default (keyword) type', async function (assert) {
+    await render(hbs`<OSS::Smart::Tag @label="foo" />`);
+    assert.dom('.smart-tag').hasClass('smart-tag--color-yellow', 'Has yellow color for keyword');
+    assert.dom('.smart-tag .fa-hashtag, .smart-tag .fa-at').doesNotExist('No icon for keyword');
+    assert.dom('.smart-tag span').hasText('foo', 'Displays label');
+  });
+
+  test('it renders with hashtag type', async function (assert) {
+    await render(hbs`<OSS::Smart::Tag @label="bar" @type="hashtag" />`);
+    assert.dom('.smart-tag').hasClass('smart-tag--color-cyan', 'Has cyan color for hashtag');
+    assert.dom('.smart-tag .fa-hashtag').exists('Has hashtag icon');
+    assert.dom('.smart-tag span').hasText('bar');
+  });
+
+  test('it renders with mention type', async function (assert) {
+    await render(hbs`<OSS::Smart::Tag @label="baz" @type="mention" />`);
+    assert.dom('.smart-tag').hasClass('smart-tag--color-violet', 'Has violet color for mention');
+    assert.dom('.smart-tag .fa-at').exists('Has at icon');
+    assert.dom('.smart-tag span').hasText('baz');
+  });
+
+  test('clicking on the close button calls the @onRemove method', async function (assert) {
+    this.onRemove = sinon.stub();
+    await render(hbs`<OSS::Smart::Tag @label="foo" @onRemove={{this.onRemove}} />`);
+    assert.dom('[data-control-name="remove-tag-button"]').exists('Remove button is rendered');
+    await click('[data-control-name="remove-tag-button"]');
+    assert.ok(this.onRemove.calledOnce, 'onRemove action is called once');
+  });
+
+  test('it applies the correct size class', async function (assert) {
+    await render(hbs`<OSS::Smart::Tag @label="foo" @size="lg" />`);
+    assert.dom('.smart-tag-container').hasClass('smart-tag-container--lg', 'Has large size class');
+  });
+
+  module('size attribute', () => {
+    test(`it applies the default size class when no size is specified`, async function (assert) {
+      await render(hbs`<OSS::Smart::Tag @label="foo" />`);
+      assert.dom('.smart-tag-container').hasClass('smart-tag-container--md', 'Has default medium size class');
+    });
+
+    SIZES.forEach((size) => {
+      test(`it applies the ${size} size class`, async function (assert) {
+        this.size = size;
+        await render(hbs`<OSS::Smart::Tag @label="foo" @size={{this.size}} />`);
+        assert.dom('.smart-tag-container').hasClass(`smart-tag-container--${size}`, `Has ${size} size class`);
+      });
+    });
+  });
+
+  test('it applies success animation class when @successAnimationOnInsertion is truthy', async function (assert) {
+    await render(hbs`<OSS::Smart::Tag @label="foo" @successAnimationOnInsertion={{true}} />`);
+    assert.dom('.smart-tag-container').hasClass('smart-rotating-gradient');
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/text-area-test.ts b/tests/integration/components/o-s-s/smart/text-area-test.ts
new file mode 100644
index 000000000..7019b8f68
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/text-area-test.ts
@@ -0,0 +1,146 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, setupOnerror, typeIn } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/smart/text-area', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.value = 'Data';
+    this.textareaSelector = '.oss-smart-text-area-container  .oss-textarea';
+    this.placeholder = 'Multiline\nplaceholder';
+  });
+
+  test('it renders', async function (assert) {
+    await render(hbs`<OSS::Smart::TextArea @label='test' />`);
+    assert.dom('.oss-smart-text-area-container').exists();
+  });
+
+  module('@resize', function () {
+    test('Default it has the none resize class', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea />`);
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-v');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-h');
+      assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-none');
+    });
+
+    test('When resize is vertical should have class resize-v', async function (assert) {
+      this.resize = 'vertical';
+      await render(hbs`<OSS::Smart::TextArea @resize={{this.resize}}/>`);
+      assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-v');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-h');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-none');
+    });
+
+    test('When resize is horizontal should have class resize-h', async function (assert) {
+      this.resize = 'horizontal';
+      await render(hbs`<OSS::Smart::TextArea @resize={{this.resize}}/>`);
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-v');
+      assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-h');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-none');
+    });
+  });
+
+  module('@rows', function () {
+    test('Default height', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea />`);
+
+      assert.equal(document.querySelector(this.textareaSelector).offsetHeight, 52);
+    });
+
+    test('Row change height', async function (assert) {
+      this.rows = 2;
+      await render(hbs`<OSS::Smart::TextArea @rows={{this.rows}}/>`);
+
+      const twoRowHeight = document.querySelector(this.textareaSelector).offsetHeight;
+      assert.ok(twoRowHeight > 36);
+
+      await this.set('rows', 8);
+      const heightRowHeight = document.querySelector(this.textareaSelector).offsetHeight;
+
+      assert.ok(heightRowHeight > twoRowHeight);
+    });
+  });
+
+  test('When the field is updated, the @onChange method is called', async function (assert) {
+    this.onChange = sinon.spy();
+
+    await render(hbs`<OSS::Smart::TextArea @value={{this.value}} @onChange={{this.onChange}}/>`);
+    await typeIn(this.textareaSelector, 'b');
+
+    assert.ok(this.onChange.calledOnceWithExactly('Datab'));
+  });
+
+  module('Extra attributes', () => {
+    test('passing an extra class is applied to the component', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea class="my-extra-class" />`);
+      assert.dom('.my-extra-class').exists();
+    });
+
+    test('passing data-control-name works', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea data-control-name="description-input" />`);
+      let inputWrapper: Element | null = document.querySelector('.oss-smart-text-area-container');
+
+      assert.equal(inputWrapper?.getAttribute('data-control-name'), 'description-input');
+    });
+  });
+
+  module('error management', () => {
+    test('it throws an error if @resize is not a correct value', async function (assert) {
+      setupOnerror((err: any) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::TextArea] The @resize parameter should be a value of resize'
+        );
+      });
+
+      this.resize = 'NotACorrectValue';
+      await render(hbs`<OSS::Smart::TextArea @resize={{this.resize}} />`);
+    });
+  });
+
+  module('loading', (hooks) => {
+    hooks.beforeEach(function () {
+      this.loading = true;
+    });
+
+    test('When input is loading, it display an animated div instead of the input', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea @placeholder={{this.placeholder}} @loading={{this.loading}}/>`);
+
+      assert.dom('.oss-smart-text-area-container .oss-textarea').hasClass('oss-textarea--loading');
+      assert.dom('.loading-placeholder').exists();
+      assert.dom('.loading-placeholder').hasText(this.placeholder);
+    });
+
+    test('When input is loading, and a value is set it use the value instead of placeholder', async function (assert) {
+      this.set('value', 'Small value');
+      await render(
+        hbs`<OSS::Smart::TextArea @placeholder={{this.placeholder}} @loading={{this.loading}} @value={{this.value}}/>`
+      );
+
+      assert.dom('.oss-smart-text-area-container .oss-textarea').hasClass('oss-textarea--loading');
+      assert.dom('.loading-placeholder').exists();
+      assert.dom('.loading-placeholder').hasText(this.value);
+    });
+
+    module('Once loading is finished', () => {
+      test('If value is empty, it does not display an animation once', async function (assert) {
+        await render(hbs`<OSS::Smart::TextArea @placeholder={{this.placeholder}} @loading={{this.loading}}/>`);
+
+        this.set('loading', false);
+        assert.dom('.oss-smart-text-area-container').hasNoClass('smart-rotating-gradient');
+      });
+
+      test('If value is filled, it display an animation once', async function (assert) {
+        await render(
+          hbs`<OSS::Smart::TextArea @value="filled" @placeholder={{this.placeholder}} @loading={{this.loading}}/>`
+        );
+
+        this.set('loading', false);
+        assert.dom('.oss-smart-text-area-container').hasClass('smart-rotating-gradient');
+      });
+    });
+  });
+});
diff --git a/tests/integration/components/o-s-s/smart/toggle-buttons-test.ts b/tests/integration/components/o-s-s/smart/toggle-buttons-test.ts
new file mode 100644
index 000000000..1291b5b87
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/toggle-buttons-test.ts
@@ -0,0 +1,167 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { set } from '@ember/object';
+import { click, render } from '@ember/test-helpers';
+import settled from '@ember/test-helpers/settled';
+import setupOnerror from '@ember/test-helpers/setup-onerror';
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/smart/toggle-buttons', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.selectedToggle = 'first';
+    this.onSelection = (value: any) => {
+      set(this, 'selectedToggle', value);
+    };
+    this.toggles = [
+      {
+        value: 'first',
+        label: 'First'
+      },
+      {
+        value: 'second',
+        label: 'Second',
+        icon: 'far fa-2'
+      }
+    ];
+  });
+
+  test('it renders', async function (assert) {
+    await render(
+      hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelection}} @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}}/>`
+    );
+
+    assert.dom('.oss-smart-toggle-buttons-container').exists();
+  });
+
+  test('the right class is applied when the @disabled arg is truthy', async function (assert) {
+    await render(
+      hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelection}} @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}} @disabled={{true}}/>`
+    );
+
+    assert.dom('.oss-smart-toggle-buttons-container').exists();
+    assert.dom('.oss-smart-toggle-buttons-container').hasClass('oss-smart-toggle-buttons-container--disabled');
+  });
+
+  test('the toggle icon is displayed when provided', async function (assert) {
+    await render(
+      hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelection}} @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}}/>`
+    );
+
+    assert.dom('.oss-smart-toggle-buttons-btn:first-child i.far').doesNotExist();
+    assert.dom('.oss-smart-toggle-buttons-btn:last-child i.far').exists();
+    assert.dom('.oss-smart-toggle-buttons-btn:last-child i.far').hasClass('fa-2');
+  });
+
+  module('If @selectedToggle is passed', function () {
+    test('If the selectedToggle matches an entry from the toggles, then the toggle is set to selected', async function (assert) {
+      this.selectedToggle = 'second';
+
+      await render(
+        hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelection}} @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}}/>`
+      );
+      assert.dom('.oss-smart-toggle-buttons-btn--selected').hasText('Second');
+    });
+  });
+
+  module('When clicking on an item', () => {
+    test('the toggle is selected', async function (assert) {
+      await render(
+        hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelection}} @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}}/>`
+      );
+
+      await click('.oss-smart-toggle-buttons-btn:first-child');
+      assert.dom('.oss-smart-toggle-buttons-btn--selected').hasText('First');
+
+      await click('.oss-smart-toggle-buttons-btn:last-child');
+      assert.dom('.oss-smart-toggle-buttons-btn--selected').hasText('Second');
+    });
+
+    test('the @onSelection method is not triggered if the item is already selected', async function (assert) {
+      this.onSelectionStub = sinon.stub();
+
+      await render(
+        hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelectionStub}} @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}}/>`
+      );
+
+      await click('.oss-smart-toggle-buttons-btn:first-child');
+      assert.ok(this.onSelectionStub.notCalled);
+    });
+
+    test('the @onSelection method is not triggered if the component is disabled', async function (assert) {
+      this.onSelectionStub = sinon.stub();
+
+      await render(
+        hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelectionStub}} @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}} @disabled={{true}} />`
+      );
+
+      await click('.oss-smart-toggle-buttons-btn:first-child');
+      assert.ok(this.onSelectionStub.notCalled);
+    });
+
+    test('the @onSelection method is triggered with the selected value', async function (assert) {
+      this.onSelection = sinon.spy();
+
+      await render(
+        hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelection}} @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}}/>`
+      );
+
+      await click('.oss-smart-toggle-buttons-btn:last-child');
+      assert.ok(this.onSelection.calledWith('second'));
+    });
+  });
+
+  module('Error management', () => {
+    test('it throws an error if @toggles is not provided', async function (assert) {
+      setupOnerror((err: any) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::Smart::ToggleButtons] The @toggles parameter of type Toggle[] is mandatory'
+        );
+      });
+      await render(
+        hbs`<OSS::Smart::ToggleButtons @onSelection={{this.onSelection}} @selectedToggle={{this.selectedToggle}}/>`
+      );
+      await settled();
+    });
+
+    test('it throws an error if @onSelection is not provided', async function (assert) {
+      setupOnerror((err: any) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::Smart::ToggleButtons] The @onSelection parameter of type function is mandatory'
+        );
+      });
+      await render(hbs`<OSS::Smart::ToggleButtons @toggles={{this.toggles}} @selectedToggle={{this.selectedToggle}}/>`);
+      await settled();
+    });
+
+    test('it throws an error if @selectedToggle is not provided', async function (assert) {
+      setupOnerror((err: any) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::Smart::ToggleButtons] The @selectedToggle parameter of type string or null is mandatory'
+        );
+      });
+      await render(hbs`<OSS::Smart::ToggleButtons @toggles={{this.toggles}} @onSelection={{this.onSelection}}  />`);
+      await settled();
+    });
+
+    test('it throws an error if @selectedToggle is not a value of toggles', async function (assert) {
+      this.selectedToggle = 'toto';
+
+      setupOnerror((err: any) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::Smart::ToggleButtons] The @selectedToggle parameter should be null or a value of toggles'
+        );
+      });
+      await render(
+        hbs`<OSS::Smart::ToggleButtons @toggles={{this.toggles}} @onSelection={{this.onSelection}} @selectedToggle={{this.selectedToggle}}/>`
+      );
+      await settled();
+    });
+  });
+});
diff --git a/tests/integration/components/wizard/step-wrapper-test.ts b/tests/integration/components/wizard/step-wrapper-test.ts
index 7b322139d..5b9feeb22 100644
--- a/tests/integration/components/wizard/step-wrapper-test.ts
+++ b/tests/integration/components/wizard/step-wrapper-test.ts
@@ -147,4 +147,60 @@ module('Integration | Component | wizard/step-wrapper', function (hooks) {
 
     assert.true(this.selectPreviousStepStub.calledOnce);
   });
+
+  test('Wheel event does not call selectNextStep or selectPreviousStep when wheelEnabled is false', async function (assert) {
+    this.step.displayState = 'active';
+    this.wizardManager.disableWheelScroll();
+    this.selectNextStepStub = sinon.stub(this.wizardManager, 'selectNextStep');
+    this.selectPreviousStepStub = sinon.stub(this.wizardManager, 'selectPreviousStep');
+    await render(hbs`<Wizard::StepWrapper @step={{this.step}} />`);
+
+    const stepWrapper = document.querySelector('.step-wrapper');
+    if (stepWrapper) {
+      const wheelEventDown = new WheelEvent('wheel', { deltaY: 100 });
+      stepWrapper.dispatchEvent(wheelEventDown);
+      const wheelEventUp = new WheelEvent('wheel', { deltaY: -100 });
+      stepWrapper.dispatchEvent(wheelEventUp);
+    }
+
+    assert.true(this.selectNextStepStub.notCalled);
+    assert.true(this.selectPreviousStepStub.notCalled);
+  });
+
+  test('Wheel event does not call selectNextStep or selectPreviousStep when event target has the prevent-wizard-scroll-events class', async function (assert) {
+    this.step.displayState = 'active';
+    this.selectPreviousStepStub = sinon.stub(this.wizardManager, 'selectPreviousStep');
+    await render(hbs`<Wizard::StepWrapper @step={{this.step}}>
+      <div class="sub-component">Content</div>  
+    </Wizard::StepWrapper>`);
+
+    // await this.pauseTest();
+    const stepWrapper = document.querySelector('.step-wrapper');
+    stepWrapper?.classList.add('prevent-wizard-scroll-events');
+    if (stepWrapper) {
+      const wheelEventUp = new WheelEvent('wheel', { deltaY: -100 });
+      stepWrapper.dispatchEvent(wheelEventUp);
+    }
+
+    assert.true(this.selectPreviousStepStub.notCalled);
+  });
+
+  test('Wheel event does not call selectNextStep or selectPreviousStep when event target has the skipScrollEventsClass defined in the wizardManager', async function (assert) {
+    this.step.displayState = 'active';
+    this.selectPreviousStepStub = sinon.stub(this.wizardManager, 'selectPreviousStep');
+    this.wizardManager.configOptions.skipScrollEventsClass = 'custom-class-name';
+    await render(hbs`<Wizard::StepWrapper @step={{this.step}}>
+      <div class="sub-component">Content</div>  
+    </Wizard::StepWrapper>`);
+
+    // await this.pauseTest();
+    const stepWrapper = document.querySelector('.step-wrapper');
+    stepWrapper?.classList.add('custom-class-name');
+    if (stepWrapper) {
+      const wheelEventUp = new WheelEvent('wheel', { deltaY: -100 });
+      stepWrapper.dispatchEvent(wheelEventUp);
+    }
+
+    assert.true(this.selectPreviousStepStub.notCalled);
+  });
 });
diff --git a/tests/unit/services/wizard-manager-test.ts b/tests/unit/services/wizard-manager-test.ts
index e2e2bd553..a925bc426 100644
--- a/tests/unit/services/wizard-manager-test.ts
+++ b/tests/unit/services/wizard-manager-test.ts
@@ -106,6 +106,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
 
     test('selectStep focuses the step and updates focusedStepId', async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       const step2Id = this.service.allSteps[1].id;
 
       this.service.selectStep(step2Id);
@@ -122,6 +123,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
       };
 
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       const step1Id = this.service.allSteps[0].id;
       const step2Id = this.service.allSteps[1].id;
       this.validateStub = sinon.stub(this.service.allSteps[0], 'validateStep').resolves(true);
@@ -130,12 +132,13 @@ module('Unit | Service | wizard-manager', function (hooks) {
 
       this.service.selectStep(step2Id, true);
       await settled();
-      assert.equal(this.service.focusedStepId, step1Id);
+      assert.equal(this.service.focusedStepId, step2Id);
       assert.true(this.validateStub.notCalled, 'validateStep was not called when bypassValidations is true');
     });
 
     test("selectStep runs the current step's validateStep if provided", async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       this.validateStub = sinon.stub(this.service.allSteps[0], 'validateStep').resolves(true);
       const step1 = this.service.allSteps[0];
       const step2 = this.service.allSteps[1];
@@ -147,6 +150,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
 
     test('selectStep does not change focusedStepId if validation fails', async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       const step1 = this.service.allSteps[0];
       const step2 = this.service.allSteps[1];
       step1.validateStep = () => Promise.resolve(false);
@@ -158,6 +162,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
 
     test('selectStep runs all validation steps from current section to target step', async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       const step1 = this.service.allSteps[0];
       const step2 = this.service.allSteps[1];
       const step3 = this.service.allSteps[2];
@@ -177,6 +182,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
 
     test('selectStep focuses the first failing step if validation fails', async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       const step1 = this.service.allSteps[0];
       const step2 = this.service.allSteps[1];
       const step3 = this.service.allSteps[2];
@@ -205,6 +211,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
     module('previousStep', function () {
       test('It returns the step before the current step', async function (assert) {
         this.service.initialize(this.config as WizardConfiguration);
+        await settled();
         const step1 = this.service.allSteps[0];
         const step2 = this.service.allSteps[1];
         this.service.selectStep(step2.id);
@@ -215,6 +222,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
 
       test('If previous step is hidden, it returns the previous visible', async function (assert) {
         this.service.initialize(this.config as WizardConfiguration);
+        await settled();
         const step1 = this.service.allSteps[0];
         const step2 = this.service.allSteps[1];
         const step3 = this.service.allSteps[2];
@@ -229,6 +237,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
     module('nextStep', function () {
       test('nextStep returns the step after the current step', async function (assert) {
         this.service.initialize(this.config as WizardConfiguration);
+        await settled();
         const step1 = this.service.allSteps[0];
         const step2 = this.service.allSteps[1];
         this.service.selectStep(step1.id);
@@ -239,6 +248,7 @@ module('Unit | Service | wizard-manager', function (hooks) {
 
       test('If next step is hidden, it returns the next visible', async function (assert) {
         this.service.initialize(this.config as WizardConfiguration);
+        await settled();
         const step1 = this.service.allSteps[0];
         const step2 = this.service.allSteps[1];
         const step3 = this.service.allSteps[2];
@@ -250,8 +260,9 @@ module('Unit | Service | wizard-manager', function (hooks) {
       });
     });
 
-    test('allSteps returns all steps across sections', function (assert) {
+    test('allSteps returns all steps across sections', async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       const allSteps = this.service.allSteps;
 
       assert.strictEqual(allSteps.length, 3);
@@ -260,8 +271,9 @@ module('Unit | Service | wizard-manager', function (hooks) {
       assert.strictEqual(allSteps[2].key, 'step-3');
     });
 
-    test('findStepByKey returns the step with the given key', function (assert) {
+    test('findStepByKey returns the step with the given key', async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       const step1 = this.service.findStepByKey('step-1');
       const step2 = this.service.findStepByKey('step-2');
       const step3 = this.service.findStepByKey('step-3');
@@ -274,11 +286,12 @@ module('Unit | Service | wizard-manager', function (hooks) {
   });
 
   module('Select Next/Previous Step', function (hooks) {
-    hooks.beforeEach(function () {
+    hooks.beforeEach(async function () {
       this.config = {
         sections: [createSection('section-1', [createStep('step-1'), createStep('step-2'), createStep('step-3')])]
       };
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
     });
 
     test('selectNextStep focuses the next step', async function (assert) {
@@ -304,8 +317,9 @@ module('Unit | Service | wizard-manager', function (hooks) {
     });
   });
 
-  test('findStepsForSectionKey returns steps for a given section key', function (assert) {
+  test('findStepsForSectionKey returns steps for a given section key', async function (assert) {
     this.service.initialize(this.config as WizardConfiguration);
+    await settled();
     const steps = this.service.findStepsForSectionKey('section-1');
 
     assert.strictEqual(steps.length, 3);
@@ -314,8 +328,9 @@ module('Unit | Service | wizard-manager', function (hooks) {
     assert.strictEqual(steps[2].key, 'step-3');
   });
 
-  test('reset clears all sections and steps', function (assert) {
+  test('reset clears all sections and steps', async function (assert) {
     this.service.initialize(this.config as WizardConfiguration);
+    await settled();
     this.service.reset();
 
     assert.strictEqual(this.service.sections.length, 0);
@@ -324,21 +339,32 @@ module('Unit | Service | wizard-manager', function (hooks) {
     assert.strictEqual(this.service.initialized, false);
   });
 
-  test('markStepAsCompleted marks a step as completed', function (assert) {
+  test('markStepAsCompleted marks a step as completed', async function (assert) {
     this.service.initialize(this.config as WizardConfiguration);
+    await settled();
     const step1 = this.service.allSteps[0];
     assert.equal(step1.completed, undefined);
     this.service.markStepAsCompleted(step1.id);
     assert.true(step1.completed);
   });
 
+  test('markStepAsIncomplete marks a step as incomplete', async function (assert) {
+    this.service.initialize(this.config as WizardConfiguration);
+    await settled();
+    const step1 = this.service.allSteps[0];
+    step1.completed = true;
+    this.service.markStepAsIncomplete(step1.id);
+    assert.false(step1.completed);
+  });
+
   module('ToggleStepVisibility', function (hooks) {
     hooks.beforeEach(function () {
       this.setDisplayStatesStub = sinon.stub(this.service, 'setDisplayStates').resolves();
     });
 
-    test('It allows to hide or display a step', function (assert) {
+    test('It allows to hide or display a step', async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
+      await settled();
       const step1 = this.service.allSteps[0];
       assert.equal(step1.hidden, undefined);
       this.service.toggleStepVisibility(step1.id, true);
@@ -347,12 +373,39 @@ module('Unit | Service | wizard-manager', function (hooks) {
       assert.equal(step1.hidden, false);
     });
 
-    test('It rerenders the display states when triggered', function (assert) {
+    test('It rerenders the display states when triggered', async function (assert) {
       this.service.initialize(this.config as WizardConfiguration);
-      const step1 = this.service.allSteps[0];
+      await settled();
+      this.setDisplayStatesStub.reset();
       assert.ok(this.setDisplayStatesStub.notCalled);
+      const step1 = this.service.allSteps[0];
       this.service.toggleStepVisibility(step1.id, true);
       assert.ok(this.setDisplayStatesStub.calledOnce);
     });
   });
+
+  module('Enable/Disable Wheel Scroll', function () {
+    test('By default, wheel scroll is enabled', async function (assert) {
+      this.service.initialize(this.config as WizardConfiguration);
+      await settled();
+      assert.true(this.service.wheelEnabled);
+    });
+
+    test('enableWheelScroll sets wheelEnabled to true', async function (assert) {
+      this.service.initialize(this.config as WizardConfiguration);
+      await settled();
+      this.service.wheelEnabled = false;
+      assert.false(this.service.wheelEnabled);
+      this.service.enableWheelScroll();
+      assert.true(this.service.wheelEnabled);
+    });
+
+    test('disableWheelScroll sets wheelEnabled to false', async function (assert) {
+      this.service.initialize(this.config as WizardConfiguration);
+      await settled();
+      assert.true(this.service.wheelEnabled);
+      this.service.disableWheelScroll();
+      assert.false(this.service.wheelEnabled);
+    });
+  });
 });
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 76efa4eac..5cceb5e92 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -79,3 +79,6 @@ oss-components:
       required: This field is required.
   sidebar:
     collapse: Collapse
+  smart:
+    tag_input:
+      placeholder: "Add keywords, @mentions and #hashtags"