diff --git a/packages/ui-library/.storybook/preview.js b/packages/ui-library/.storybook/preview.js
index 8f3112578..7b92cb712 100644
--- a/packages/ui-library/.storybook/preview.js
+++ b/packages/ui-library/.storybook/preview.js
@@ -3,6 +3,13 @@ import '../../assets/fonts/fonts.css';
 
 export default {
   parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical', // Sort alphabetically
+        order: ['Foundation', 'Components'],
+        locales: 'en-US',
+      },
+    },
     actions: {
       argTypesRegex: '^on[A-Z].*',
     },
diff --git a/packages/ui-library/src/components/ui/button-group/index.css.ts b/packages/ui-library/src/components/button-group/index.css.ts
similarity index 77%
rename from packages/ui-library/src/components/ui/button-group/index.css.ts
rename to packages/ui-library/src/components/button-group/index.css.ts
index c7aa48635..3e0141cf7 100644
--- a/packages/ui-library/src/components/ui/button-group/index.css.ts
+++ b/packages/ui-library/src/components/button-group/index.css.ts
@@ -1,6 +1,5 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
-
-import { componentTokens } from "../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
+import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 const { ButtonGroup } = componentTokens.UI;
 
diff --git a/packages/ui-library/src/components/ui/button-group/index.stories.ts b/packages/ui-library/src/components/button-group/index.stories.ts
similarity index 88%
rename from packages/ui-library/src/components/ui/button-group/index.stories.ts
rename to packages/ui-library/src/components/button-group/index.stories.ts
index c60edee5a..85c58cbba 100644
--- a/packages/ui-library/src/components/ui/button-group/index.stories.ts
+++ b/packages/ui-library/src/components/button-group/index.stories.ts
@@ -1,12 +1,11 @@
 /* eslint-disable no-console */
-import { BlrButtonGroupType } from './index';
-import { BlrButtonGroupRenderFunction } from './renderFunction';
-import { BlrTextButtonRenderFunction } from '../../actions/buttons/text-button/renderFunction';
-import { BlrIconButtonRenderFunction } from '../../actions/buttons/icon-button/renderFunction';
 import { html } from 'lit';
-import { ButtonGroupAlignmentVariants, ButtonGroupSizes } from '../../../globals/constants';
-// this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
+import { ButtonGroupSizes, ButtonGroupAlignmentVariants } from '../../globals/constants';
+import { BlrIconButtonRenderFunction } from '../icon-button/renderFunction';
+import { BlrTextButtonRenderFunction } from '../text-button/renderFunction';
+import { BlrButtonGroupType } from '.';
+import { BlrButtonGroupRenderFunction } from './renderFunction';
 
 const sharedStyles = html`
   <style>
@@ -33,7 +32,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/UI/Button Group',
+  title: 'Components/Button Group',
   argTypes: {
     size: {
       options: ButtonGroupSizes,
diff --git a/packages/ui-library/src/components/ui/button-group/index.test.ts b/packages/ui-library/src/components/button-group/index.test.ts
similarity index 82%
rename from packages/ui-library/src/components/ui/button-group/index.test.ts
rename to packages/ui-library/src/components/button-group/index.test.ts
index 2e4a6a919..696dc5ec4 100644
--- a/packages/ui-library/src/components/ui/button-group/index.test.ts
+++ b/packages/ui-library/src/components/button-group/index.test.ts
@@ -1,11 +1,9 @@
 import '@boiler/ui-library/dist/';
-
 import { BlrButtonGroupRenderFunction } from './renderFunction';
-import type { BlrButtonGroupType } from '@boiler/ui-library/dist/';
-
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
-import { BlrTextButtonRenderFunction } from '../../actions/buttons/text-button/renderFunction';
+import type { BlrButtonGroupType } from '.';
+import { BlrTextButtonRenderFunction } from '../text-button/renderFunction';
 
 const sampleParams: BlrButtonGroupType = {
   size: 'md',
diff --git a/packages/ui-library/src/components/ui/button-group/index.ts b/packages/ui-library/src/components/button-group/index.ts
similarity index 83%
rename from packages/ui-library/src/components/ui/button-group/index.ts
rename to packages/ui-library/src/components/button-group/index.ts
index 24f75ed67..b93c7d164 100644
--- a/packages/ui-library/src/components/ui/button-group/index.ts
+++ b/packages/ui-library/src/components/button-group/index.ts
@@ -1,13 +1,11 @@
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-
 import { styleCustom } from './index.css';
-import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../../globals/types';
+import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../globals/types';
 
 import { TAG_NAME } from './renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrButtonGroup extends LitElement {
   static styles = [styleCustom];
 
@@ -29,4 +27,8 @@ export class BlrButtonGroup extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrButtonGroup);
+}
+
 export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElement>;
diff --git a/packages/ui-library/src/components/ui/button-group/indexReact.ts b/packages/ui-library/src/components/button-group/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/ui/button-group/indexReact.ts
rename to packages/ui-library/src/components/button-group/indexReact.ts
diff --git a/packages/ui-library/src/components/ui/button-group/renderFunction.ts b/packages/ui-library/src/components/button-group/renderFunction.ts
similarity index 76%
rename from packages/ui-library/src/components/ui/button-group/renderFunction.ts
rename to packages/ui-library/src/components/button-group/renderFunction.ts
index 0905a5bc4..c88e9a04d 100644
--- a/packages/ui-library/src/components/ui/button-group/renderFunction.ts
+++ b/packages/ui-library/src/components/button-group/renderFunction.ts
@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
 import { BlrButtonGroupType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-button-group';
 
diff --git a/packages/ui-library/src/components/forms/checkbox/index.css.ts b/packages/ui-library/src/components/checkbox/index.css.ts
similarity index 99%
rename from packages/ui-library/src/components/forms/checkbox/index.css.ts
rename to packages/ui-library/src/components/checkbox/index.css.ts
index c8e9cab7b..4ba7fd6dd 100644
--- a/packages/ui-library/src/components/forms/checkbox/index.css.ts
+++ b/packages/ui-library/src/components/checkbox/index.css.ts
@@ -1,6 +1,5 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
-
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
   const { Checkbox, FormLabel } = componentTokens.Forms;
diff --git a/packages/ui-library/src/components/forms/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/checkbox/index.stories.ts
rename to packages/ui-library/src/components/checkbox/index.stories.ts
index 1b96eb2d7..518e5df59 100644
--- a/packages/ui-library/src/components/forms/checkbox/index.stories.ts
+++ b/packages/ui-library/src/components/checkbox/index.stories.ts
@@ -2,12 +2,12 @@
 import { BlrCheckboxType } from './index';
 import { BlrCheckboxRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
-import { InputSizes } from '../../../globals/constants';
-import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 
+import { PureIconKeys } from '@boiler/icons';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { InputSizes } from '../../globals/constants';
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -22,7 +22,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Forms/Checkbox',
+  title: 'Components/Checkbox',
   argTypes: {
     // Appearance
     size: {
diff --git a/packages/ui-library/src/components/forms/checkbox/index.test.ts b/packages/ui-library/src/components/checkbox/index.test.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/checkbox/index.test.ts
rename to packages/ui-library/src/components/checkbox/index.test.ts
index 0b286fed6..6aee28a94 100644
--- a/packages/ui-library/src/components/forms/checkbox/index.test.ts
+++ b/packages/ui-library/src/components/checkbox/index.test.ts
@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrCheckboxRenderFunction } from './renderFunction';
-import type { BlrCheckboxType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
+import type { BlrCheckboxType } from '.';
 
 const sampleParams: BlrCheckboxType = {
   label: 'Checkbox Option',
diff --git a/packages/ui-library/src/components/forms/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
similarity index 90%
rename from packages/ui-library/src/components/forms/checkbox/index.ts
rename to packages/ui-library/src/components/checkbox/index.ts
index ebdea8687..6361cfbba 100644
--- a/packages/ui-library/src/components/forms/checkbox/index.ts
+++ b/packages/ui-library/src/components/checkbox/index.ts
@@ -1,23 +1,19 @@
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-
-import { BlrFormLabelInlineRenderFunction } from '../../internal-components/form-label/form-label-inline/renderFunction';
-import { FormSizesType } from '../../../globals/types';
-
-import { checkboxDark, checkboxLight } from './index.css';
-import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
-import { SizelessIconType } from '@boiler/icons';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
-import { calculateIconName } from '../../../utils/calculate-icon-name';
-import { getComponentConfigToken } from '../../../utils/get-component-config-token';
-import { BlrFormCaptionGroupRenderFunction } from '../../internal-components/form-caption-group/renderFunction';
-import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption/renderFunction';
-
 import { TAG_NAME } from './renderFunction';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
+import { FormSizesType } from '../../globals/types';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { checkboxLight, checkboxDark } from './index.css';
+import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
+import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
+import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrCheckbox extends LitElement {
   static styles = [];
 
@@ -313,4 +309,8 @@ export class BlrCheckbox extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrCheckbox);
+}
+
 export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/checkbox/indexReact.ts b/packages/ui-library/src/components/checkbox/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/checkbox/indexReact.ts
rename to packages/ui-library/src/components/checkbox/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/checkbox/renderFunction.ts b/packages/ui-library/src/components/checkbox/renderFunction.ts
similarity index 69%
rename from packages/ui-library/src/components/forms/checkbox/renderFunction.ts
rename to packages/ui-library/src/components/checkbox/renderFunction.ts
index 56687ba29..6202ac2b3 100644
--- a/packages/ui-library/src/components/forms/checkbox/renderFunction.ts
+++ b/packages/ui-library/src/components/checkbox/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrCheckboxType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-checkbox';
 
diff --git a/packages/ui-library/src/components/internal-components/counter/index.css.ts b/packages/ui-library/src/components/counter/index.css.ts
similarity index 93%
rename from packages/ui-library/src/components/internal-components/counter/index.css.ts
rename to packages/ui-library/src/components/counter/index.css.ts
index 53b94c538..269b6b029 100644
--- a/packages/ui-library/src/components/internal-components/counter/index.css.ts
+++ b/packages/ui-library/src/components/counter/index.css.ts
@@ -1,5 +1,5 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const { tokenizedLight: counterLight, tokenizedDark: counterDark } = renderThemedCssStrings((componentTokens) => {
   const { Counter } = componentTokens.Feedback;
diff --git a/packages/ui-library/src/components/internal-components/counter/index.stories.ts b/packages/ui-library/src/components/counter/index.stories.ts
similarity index 88%
rename from packages/ui-library/src/components/internal-components/counter/index.stories.ts
rename to packages/ui-library/src/components/counter/index.stories.ts
index a6e6314f6..1bab839b9 100644
--- a/packages/ui-library/src/components/internal-components/counter/index.stories.ts
+++ b/packages/ui-library/src/components/counter/index.stories.ts
@@ -1,12 +1,12 @@
 /* eslint-disable no-console */
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-import { CounterVariants, FormSizes } from '../../../globals/constants';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { CounterVariants, FormSizes } from '../../globals/constants';
 import { html } from 'lit-html';
 import { BlrCounterType } from './index';
 import { BlrCounterRenderFunction } from './renderFunction';
 
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -18,7 +18,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Internal Components/Counter',
+  title: 'Components/Counter',
   argTypes: {
     theme: {
       options: Themes,
@@ -81,6 +81,12 @@ Counter provides a visual representation of a numeric quantity and typically inc
 - [**Appearance**](#appearance)
  - [**Variant**](#variant) 
  - [**Size Variant**](#size-variant) 
+
+The Counter is intended to be used when creating new components. Currently it is used like this in the following components:
+
+ - [**Text Area**](?path=/docs/components-text-area--docs)
+
+It is not intended to use the Counter directly when creating new applications.
 </Markdown>`,
       },
     },
diff --git a/packages/ui-library/src/components/internal-components/counter/index.test.ts b/packages/ui-library/src/components/counter/index.test.ts
similarity index 97%
rename from packages/ui-library/src/components/internal-components/counter/index.test.ts
rename to packages/ui-library/src/components/counter/index.test.ts
index 9f6f1387e..8e338e17c 100644
--- a/packages/ui-library/src/components/internal-components/counter/index.test.ts
+++ b/packages/ui-library/src/components/counter/index.test.ts
@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrCounterRenderFunction } from './renderFunction';
-import type { BlrCounterType } from '@boiler/ui-library/dist/';
+import type { BlrCounterType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
diff --git a/packages/ui-library/src/components/internal-components/counter/index.ts b/packages/ui-library/src/components/counter/index.ts
similarity index 77%
rename from packages/ui-library/src/components/internal-components/counter/index.ts
rename to packages/ui-library/src/components/counter/index.ts
index 50e1dfbc9..0ac7efbab 100644
--- a/packages/ui-library/src/components/internal-components/counter/index.ts
+++ b/packages/ui-library/src/components/counter/index.ts
@@ -1,13 +1,13 @@
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { CounterVariantType, FormSizesType } from '../../../globals/types';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { CounterVariantType, FormSizesType } from '../../globals/types';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { counterLight, counterDark } from './index.css';
 
 import { TAG_NAME } from './renderFunction';
 
-@customElement(TAG_NAME)
+//
 export class BlrCounter extends LitElement {
   static styles = [];
 
@@ -37,4 +37,8 @@ export class BlrCounter extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrCounter);
+}
+
 export type BlrCounterType = Omit<BlrCounter, keyof LitElement>;
diff --git a/packages/ui-library/src/components/internal-components/counter/renderFunction.ts b/packages/ui-library/src/components/counter/renderFunction.ts
similarity index 68%
rename from packages/ui-library/src/components/internal-components/counter/renderFunction.ts
rename to packages/ui-library/src/components/counter/renderFunction.ts
index 0c19996f4..5fc440df5 100644
--- a/packages/ui-library/src/components/internal-components/counter/renderFunction.ts
+++ b/packages/ui-library/src/components/counter/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrCounterType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-counter';
 
diff --git a/packages/ui-library/src/components/ui/divider/index.css.ts b/packages/ui-library/src/components/divider/index.css.ts
similarity index 72%
rename from packages/ui-library/src/components/ui/divider/index.css.ts
rename to packages/ui-library/src/components/divider/index.css.ts
index d10663d94..e6a89b787 100644
--- a/packages/ui-library/src/components/ui/divider/index.css.ts
+++ b/packages/ui-library/src/components/divider/index.css.ts
@@ -1,6 +1,5 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
-
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const { tokenizedLight: dividerLight, tokenizedDark: dividerDark } = renderThemedCssStrings((componentTokens) => {
   const { UI } = componentTokens;
diff --git a/packages/ui-library/src/components/ui/divider/index.stories.ts b/packages/ui-library/src/components/divider/index.stories.ts
similarity index 91%
rename from packages/ui-library/src/components/ui/divider/index.stories.ts
rename to packages/ui-library/src/components/divider/index.stories.ts
index f7a8d6a45..d074f8e61 100644
--- a/packages/ui-library/src/components/ui/divider/index.stories.ts
+++ b/packages/ui-library/src/components/divider/index.stories.ts
@@ -1,9 +1,10 @@
 import { html } from 'lit-html';
 import { BlrDividerType } from './index';
 import { BlrDividerRenderFunction } from './renderFunction';
-import { DividerVariations } from '../../../globals/constants';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-import '../../../index';
+
+import '../../index';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { DividerVariations } from '../../globals/constants';
 
 const sharedStyles = html`
   <style>
@@ -23,7 +24,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/UI/Divider',
+  title: 'Components/Divider',
   argTypes: {
     direction: {
       description: 'Choose direction of the component.',
diff --git a/packages/ui-library/src/components/ui/divider/index.test.ts b/packages/ui-library/src/components/divider/index.test.ts
similarity index 96%
rename from packages/ui-library/src/components/ui/divider/index.test.ts
rename to packages/ui-library/src/components/divider/index.test.ts
index 69ac9553d..4e7ee5a09 100644
--- a/packages/ui-library/src/components/ui/divider/index.test.ts
+++ b/packages/ui-library/src/components/divider/index.test.ts
@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrDividerRenderFunction } from './renderFunction';
-import type { BlrDividerType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import type { BlrDividerType } from '.';
 
 const sampleParams: BlrDividerType = { theme: 'Light', direction: 'vertical' };
 
diff --git a/packages/ui-library/src/components/ui/divider/index.ts b/packages/ui-library/src/components/divider/index.ts
similarity index 73%
rename from packages/ui-library/src/components/ui/divider/index.ts
rename to packages/ui-library/src/components/divider/index.ts
index 64d2fc985..d218a6b18 100644
--- a/packages/ui-library/src/components/ui/divider/index.ts
+++ b/packages/ui-library/src/components/divider/index.ts
@@ -1,13 +1,13 @@
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { DividerVariationTypes } from '../../../globals/types';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { property } from 'lit/decorators.js';
+
 import { classMap } from 'lit/directives/class-map.js';
 import { dividerDark, dividerLight } from './index.css';
 
 import { TAG_NAME } from './renderFunction';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { DividerVariationTypes } from '../../globals/types';
 
-@customElement(TAG_NAME)
 export class BlrDivider extends LitElement {
   @property() direction: DividerVariationTypes = 'vertical';
   @property() theme: ThemeType = 'Light';
@@ -29,4 +29,8 @@ export class BlrDivider extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrDivider);
+}
+
 export type BlrDividerType = Omit<BlrDivider, keyof LitElement>;
diff --git a/packages/ui-library/src/components/ui/divider/indexReact.ts b/packages/ui-library/src/components/divider/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/ui/divider/indexReact.ts
rename to packages/ui-library/src/components/divider/indexReact.ts
diff --git a/packages/ui-library/src/components/ui/divider/renderFunction.ts b/packages/ui-library/src/components/divider/renderFunction.ts
similarity index 68%
rename from packages/ui-library/src/components/ui/divider/renderFunction.ts
rename to packages/ui-library/src/components/divider/renderFunction.ts
index 2780c2d5b..f5127cacd 100644
--- a/packages/ui-library/src/components/ui/divider/renderFunction.ts
+++ b/packages/ui-library/src/components/divider/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrDividerType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-divider';
 
diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/index.css.ts b/packages/ui-library/src/components/form-caption-group/index.css.ts
similarity index 65%
rename from packages/ui-library/src/components/internal-components/form-caption-group/index.css.ts
rename to packages/ui-library/src/components/form-caption-group/index.css.ts
index 2b9275e7c..04e920bbb 100644
--- a/packages/ui-library/src/components/internal-components/form-caption-group/index.css.ts
+++ b/packages/ui-library/src/components/form-caption-group/index.css.ts
@@ -1,7 +1,6 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
-
-import { semanticTokens } from "../../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
-import { componentTokens } from "../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
+import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
+import { semanticTokens } from "../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 const { CaptionGroup } = componentTokens.Forms;
 const { SM, MD, LG } = semanticTokens.Forms;
diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/index.stories.ts b/packages/ui-library/src/components/form-caption-group/index.stories.ts
similarity index 73%
rename from packages/ui-library/src/components/internal-components/form-caption-group/index.stories.ts
rename to packages/ui-library/src/components/form-caption-group/index.stories.ts
index a3b5ef8f9..519430b4b 100644
--- a/packages/ui-library/src/components/internal-components/form-caption-group/index.stories.ts
+++ b/packages/ui-library/src/components/form-caption-group/index.stories.ts
@@ -2,10 +2,11 @@ import { BlrFormCaptionGroupType } from './index';
 import { BlrFormCaptionGroupRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
-import { FormSizes } from '../../../globals/constants';
+import { FormSizes } from '../../globals/constants';
+import '../../index';
 
 export default {
-  title: 'Design System/Web Components/Internal Components/Form Caption Group',
+  title: 'Components/Form Caption Group',
   argTypes: {
     size: {
       options: FormSizes,
@@ -31,6 +32,17 @@ export default {
 
 Technically both instances of the Form Caption are placed inside slots that are stacked above each other. The Form Caption Group only has one property named size to change the spacing in between the slots depending on the size of the component. For more information have a look at the internal [Form Caption](/docs/design-system-web-components-internal-components-form-caption--docs)  component
 
+The Form Caption Group is intended to be used when creating new components. Currently, it is used like this in the following components:
+        
+- [**Checkbox**](?path=/docs/components-checkbox--docs)
+- [**Number Input**](?path=/docs/components-number-input--docs)
+- [**Radio**](?path=/docs/components-radio--docs)
+- [**Radio Group**](?path=/docs/components-radio-group--docs)
+- [**Select**](?path=/docs/components-select--docs)
+- [**Text Input**](?path=/docs/components-text-input--docs)
+- [**Text Area**](?path=/docs/components-text-area--docs)
+
+It is not intended to use the Form Caption Group directly when creating new applications.
       </Markdown>
       `,
       },
diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/index.test.ts b/packages/ui-library/src/components/form-caption-group/index.test.ts
similarity index 100%
rename from packages/ui-library/src/components/internal-components/form-caption-group/index.test.ts
rename to packages/ui-library/src/components/form-caption-group/index.test.ts
diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/index.ts b/packages/ui-library/src/components/form-caption-group/index.ts
similarity index 76%
rename from packages/ui-library/src/components/internal-components/form-caption-group/index.ts
rename to packages/ui-library/src/components/form-caption-group/index.ts
index 8c0db132a..c55e463de 100644
--- a/packages/ui-library/src/components/internal-components/form-caption-group/index.ts
+++ b/packages/ui-library/src/components/form-caption-group/index.ts
@@ -1,13 +1,12 @@
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
-import { FormSizesType } from '../../../globals/types';
+import { FormSizesType } from '../../globals/types';
 import { classMap } from 'lit/directives/class-map.js';
 import { formCaptionGroupStyle } from './index.css';
 
 import { TAG_NAME } from './renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrFormCaptionGroup extends LitElement {
   static styles = [formCaptionGroupStyle];
 
@@ -27,4 +26,8 @@ export class BlrFormCaptionGroup extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrFormCaptionGroup);
+}
+
 export type BlrFormCaptionGroupType = Omit<BlrFormCaptionGroup, keyof LitElement>;
diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/renderFunction.ts b/packages/ui-library/src/components/form-caption-group/renderFunction.ts
similarity index 77%
rename from packages/ui-library/src/components/internal-components/form-caption-group/renderFunction.ts
rename to packages/ui-library/src/components/form-caption-group/renderFunction.ts
index 73fb82c9d..b3be2170d 100644
--- a/packages/ui-library/src/components/internal-components/form-caption-group/renderFunction.ts
+++ b/packages/ui-library/src/components/form-caption-group/renderFunction.ts
@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
 import { BlrFormCaptionGroupType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-form-caption-group';
 
diff --git a/packages/ui-library/src/components/internal-components/form-caption/index.css.ts b/packages/ui-library/src/components/form-caption/index.css.ts
similarity index 93%
rename from packages/ui-library/src/components/internal-components/form-caption/index.css.ts
rename to packages/ui-library/src/components/form-caption/index.css.ts
index 06fed5c6f..8c6f11043 100644
--- a/packages/ui-library/src/components/internal-components/form-caption/index.css.ts
+++ b/packages/ui-library/src/components/form-caption/index.css.ts
@@ -1,5 +1,5 @@
-import { typeSafeNestedCss as css } from "../../../utils/nested-typesafe-css-literals";
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss as css } from "../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
 export const { tokenizedLight: captionLight, tokenizedDark: captionDark } = renderThemedCssStrings((componentTokens) => {
   const { CaptionComponent } = componentTokens.Forms;
diff --git a/packages/ui-library/src/components/internal-components/form-caption/index.stories.ts b/packages/ui-library/src/components/form-caption/index.stories.ts
similarity index 88%
rename from packages/ui-library/src/components/internal-components/form-caption/index.stories.ts
rename to packages/ui-library/src/components/form-caption/index.stories.ts
index b4c286f49..b7b1e2d58 100644
--- a/packages/ui-library/src/components/internal-components/form-caption/index.stories.ts
+++ b/packages/ui-library/src/components/form-caption/index.stories.ts
@@ -1,10 +1,11 @@
 /* eslint-disable no-console */
 import { PureIconKeys } from '@boiler/icons';
-import { FormSizes, CaptionVariants } from '../../../globals/constants';
+import { FormSizes, CaptionVariants } from '../../globals/constants';
 import { BlrFormCaptionType } from './index';
 import { BlrFormCaptionRenderFunction } from './renderFunction';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit-html';
+import '../../index';
 
 const sharedStyles = html`
   <style>
@@ -15,7 +16,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Internal Components/Form Caption',
+  title: 'Components/Form Caption',
   argTypes: {
     size: {
       options: FormSizes,
@@ -70,11 +71,19 @@ export default {
       description: {
         component: `<Markdown>
         Form Caption provides either a brief hint or error message to a related form element such as Text Input or Select. It is typically displayed below the form element, and it can be used to provide additional information about the type of information a user has to provide, like an example of the correct data format.
+
         - [**Appearance**](#appearance)
           - [**Variant**](#variant)
           - [**Size Variant**](#size-variant)
         - [**Dependencies**](#dependencies)
           - [**Icon**](#icon)
+        
+        The Form Caption is intended to be used when creating new components. Currently, it is used like this in the following components:
+        
+        - [**Form Caption Group**](?path=/docs/components-form-caption-group--docs)
+        - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs)
+        
+        It is not intended to use the Form Caption directly when creating new applications.
       </Markdown>
       `,
       },
diff --git a/packages/ui-library/src/components/internal-components/form-caption/index.test.ts b/packages/ui-library/src/components/form-caption/index.test.ts
similarity index 100%
rename from packages/ui-library/src/components/internal-components/form-caption/index.test.ts
rename to packages/ui-library/src/components/form-caption/index.test.ts
diff --git a/packages/ui-library/src/components/internal-components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts
similarity index 79%
rename from packages/ui-library/src/components/internal-components/form-caption/index.ts
rename to packages/ui-library/src/components/form-caption/index.ts
index 47bcd94e9..59751cfd7 100644
--- a/packages/ui-library/src/components/internal-components/form-caption/index.ts
+++ b/packages/ui-library/src/components/form-caption/index.ts
@@ -1,17 +1,15 @@
 import { LitElement, TemplateResult, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { FormSizesType, CaptionVariantType, SizesType } from '../../../globals/types';
-import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
-import { SizelessIconType } from '@boiler/icons';
-import { calculateIconName } from '../../../utils/calculate-icon-name';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-import { getComponentConfigToken } from '../../../utils/get-component-config-token';
-
 import { TAG_NAME } from './renderFunction';
 import { captionDark, captionLight } from './index.css';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { CaptionVariantType, FormSizesType, SizesType } from '../../globals/types';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrFormCaption extends LitElement {
   static styles = [];
 
@@ -73,4 +71,8 @@ export class BlrFormCaption extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrFormCaption);
+}
+
 export type BlrFormCaptionType = Omit<BlrFormCaption, keyof LitElement>;
diff --git a/packages/ui-library/src/components/internal-components/form-caption/renderFunction.ts b/packages/ui-library/src/components/form-caption/renderFunction.ts
similarity index 70%
rename from packages/ui-library/src/components/internal-components/form-caption/renderFunction.ts
rename to packages/ui-library/src/components/form-caption/renderFunction.ts
index a0a3735a5..3919bdfef 100644
--- a/packages/ui-library/src/components/internal-components/form-caption/renderFunction.ts
+++ b/packages/ui-library/src/components/form-caption/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrFormCaptionType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-form-caption';
 
diff --git a/packages/ui-library/src/components/internal-components/form-label/form-label-inline/index.ts b/packages/ui-library/src/components/form-label/form-label-inline/index.ts
similarity index 65%
rename from packages/ui-library/src/components/internal-components/form-label/form-label-inline/index.ts
rename to packages/ui-library/src/components/form-label/form-label-inline/index.ts
index adf939d65..9222dabf5 100644
--- a/packages/ui-library/src/components/internal-components/form-label/form-label-inline/index.ts
+++ b/packages/ui-library/src/components/form-label/form-label-inline/index.ts
@@ -1,4 +1,4 @@
-import { InputSizesType } from '../../../../globals/types';
+import { InputSizesType } from '../../../globals/types';
 
 export type BlrFormLabelInlineType = {
   labelText: string;
diff --git a/packages/ui-library/src/components/internal-components/form-label/form-label-inline/renderFunction.ts b/packages/ui-library/src/components/form-label/form-label-inline/renderFunction.ts
similarity index 100%
rename from packages/ui-library/src/components/internal-components/form-label/form-label-inline/renderFunction.ts
rename to packages/ui-library/src/components/form-label/form-label-inline/renderFunction.ts
diff --git a/packages/ui-library/src/components/internal-components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts
similarity index 77%
rename from packages/ui-library/src/components/internal-components/form-label/index.stories.ts
rename to packages/ui-library/src/components/form-label/index.stories.ts
index af040514a..e95743517 100644
--- a/packages/ui-library/src/components/internal-components/form-label/index.stories.ts
+++ b/packages/ui-library/src/components/form-label/index.stories.ts
@@ -1,12 +1,10 @@
 /* eslint-disable no-console */
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-import { FormSizes, LabelVariants } from '../../../globals/constants';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { FormSizes, LabelVariants } from '../../globals/constants';
 import { BlrFormLabelType } from './index';
 import { BlrFormLabelRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
-
-// this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
 
 const sharedStyles = html`
   <style>
@@ -17,7 +15,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Internal Components/Form Label',
+  title: 'Components/Form Label',
   argTypes: {
     labelSize: {
       name: 'sizeVariant',
@@ -83,13 +81,28 @@ export default {
     layout: 'centered',
     docs: {
       description: {
-        component: `<Markdown> Form Label provides a descriptive text or caption for an input field. The <label> element must be associated with an input field using the for attribute. 
-    - [**Appearance**](#appearance)
-      - [**Size Variant**](#size-variant)
-    - [**Content / Settings**](#content--settings)
-      - [**Label Appendix**](#label-appendix)
-    - [**Validation**](#validation)
-      - [**Has Error**](#has-error)
+        component: `<Markdown>
+        Form Label provides a descriptive text or caption for an input field. The <label> element must be associated with an input field using the for attribute. 
+
+        - [**Appearance**](#appearance)
+          - [**Size Variant**](#size-variant)
+        
+        - [**Content / Settings**](#content--settings)
+          - [**Label Appendix**](#label-appendix)
+        
+        - [**Validation**](#validation)
+          - [**Has Error**](#has-error)
+        
+        The Form Label is intended to be used when creating new components. Currently, it is used like this in the following components:
+        
+        - [**Checkbox**](?path=/docs/components-checkbox--docs)
+        - [**Number Input**](?path=/docs/components-number-input--docs)
+        - [**Select**](?path=/docs/components-select--docs)
+        - [**Text Input**](?path=/docs/components-text-input--docs)
+        - [**Text Area**](?path=/docs/components-text-area--docs)
+        
+        It is not intended to use the Form Label directly when creating new applications.
+        
   </Markdown>`,
       },
     },
diff --git a/packages/ui-library/src/components/internal-components/form-label/index.test.ts b/packages/ui-library/src/components/form-label/index.test.ts
similarity index 98%
rename from packages/ui-library/src/components/internal-components/form-label/index.test.ts
rename to packages/ui-library/src/components/form-label/index.test.ts
index b622e68ec..b005964dd 100644
--- a/packages/ui-library/src/components/internal-components/form-label/index.test.ts
+++ b/packages/ui-library/src/components/form-label/index.test.ts
@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrFormLabelRenderFunction } from './renderFunction';
-import type { BlrFormLabelType } from '@boiler/ui-library/dist/';
+import type { BlrFormLabelType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
diff --git a/packages/ui-library/src/components/internal-components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts
similarity index 77%
rename from packages/ui-library/src/components/internal-components/form-label/index.ts
rename to packages/ui-library/src/components/form-label/index.ts
index c95d54ad2..c82131bd4 100644
--- a/packages/ui-library/src/components/internal-components/form-label/index.ts
+++ b/packages/ui-library/src/components/form-label/index.ts
@@ -1,13 +1,11 @@
 import { LitElement, html, nothing } from 'lit';
-import { InputSizesType, LabelVariantType } from '../../../globals/types';
-import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-
 import { TAG_NAME } from './renderFunction';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
+import { InputSizesType, LabelVariantType } from '../../globals/types';
 
-@customElement(TAG_NAME)
 export class BlrFormLabel extends LitElement {
   static styles = [];
 
@@ -44,4 +42,8 @@ export class BlrFormLabel extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrFormLabel);
+}
+
 export type BlrFormLabelType = Omit<BlrFormLabel, keyof LitElement>;
diff --git a/packages/ui-library/src/components/internal-components/form-label/renderFunction.ts b/packages/ui-library/src/components/form-label/renderFunction.ts
similarity index 70%
rename from packages/ui-library/src/components/internal-components/form-label/renderFunction.ts
rename to packages/ui-library/src/components/form-label/renderFunction.ts
index ca44c6ed6..47bc6e176 100644
--- a/packages/ui-library/src/components/internal-components/form-label/renderFunction.ts
+++ b/packages/ui-library/src/components/form-label/renderFunction.ts
@@ -1,5 +1,5 @@
 import type { BlrFormLabelType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-form-label';
 
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.css.ts b/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.css.ts
deleted file mode 100644
index be3c629a4..000000000
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.css.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { typeSafeNestedCss } from "../../../../../utils/nested-typesafe-css-literals";
-
-export const styleCustom = typeSafeNestedCss`
-  .input-row {
-    margin-top: 13px;
-  }
-`;
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.css.ts b/packages/ui-library/src/components/icon-button/index.css.ts
similarity index 88%
rename from packages/ui-library/src/components/actions/buttons/icon-button/index.css.ts
rename to packages/ui-library/src/components/icon-button/index.css.ts
index 5de5494fa..554fd9e20 100644
--- a/packages/ui-library/src/components/actions/buttons/icon-button/index.css.ts
+++ b/packages/ui-library/src/components/icon-button/index.css.ts
@@ -1,7 +1,6 @@
-import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
-
-import { componentTokens } from "../../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
-import { semanticTokens } from "../../../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
+import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
+import { semanticTokens } from "../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 const { IconButton } = componentTokens.Actions;
 const { Global, Actions } = semanticTokens;
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts b/packages/ui-library/src/components/icon-button/index.stories.ts
similarity index 96%
rename from packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts
rename to packages/ui-library/src/components/icon-button/index.stories.ts
index d41bf4fe1..b9cdb36ba 100644
--- a/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts
+++ b/packages/ui-library/src/components/icon-button/index.stories.ts
@@ -1,14 +1,12 @@
 /* eslint-disable no-console */
 import { html } from 'lit';
 import type { BlrIconButtonType } from './index';
-
 import { BlrIconButtonRenderFunction } from './renderFunction';
 import { PureIconKeys } from '@boiler/icons';
-import { ActionVariants, ActionSizes } from '../../../../globals/constants';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
-
 // this loads the all components instances and registers their html tags
-import '../../../../index';
+import '../../index';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { ActionVariants, ActionSizes } from '../../globals/constants';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -44,6 +42,7 @@ const argTypesToDisable = [
   'onBlur',
   'onSelect',
 ];
+
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};
   argTypes.forEach((argType: string) => {
@@ -60,7 +59,7 @@ const disabledArgTypes = generateDisabledArgTypes(argTypesToDisable);
 
 //Main Showcase Storybook IconButton, main argType Table
 export default {
-  title: 'Design System/Web Components/Actions/Buttons/Icon Button',
+  title: 'Components/Icon Button',
   argTypes: {
     //Appearance
     variant: {
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.test.ts b/packages/ui-library/src/components/icon-button/index.test.ts
similarity index 98%
rename from packages/ui-library/src/components/actions/buttons/icon-button/index.test.ts
rename to packages/ui-library/src/components/icon-button/index.test.ts
index 8953cfda3..049cbee7d 100644
--- a/packages/ui-library/src/components/actions/buttons/icon-button/index.test.ts
+++ b/packages/ui-library/src/components/icon-button/index.test.ts
@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrIconButtonRenderFunction } from './renderFunction';
-import type { BlrIconButtonType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import type { BlrIconButtonType } from '.';
 
 const sampleParams: BlrIconButtonType = {
   arialabel: 'Button',
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts b/packages/ui-library/src/components/icon-button/index.ts
similarity index 83%
rename from packages/ui-library/src/components/actions/buttons/icon-button/index.ts
rename to packages/ui-library/src/components/icon-button/index.ts
index f3d7742b9..2f41cdc54 100644
--- a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
+++ b/packages/ui-library/src/components/icon-button/index.ts
@@ -1,21 +1,19 @@
 /* eslint-disable no-console */
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
-import { actionDark, actionLight } from '../../../../foundation/semantic-tokens/action.css';
-import { ActionVariantType, ActionSizesType, SizesType, FormSizesType } from '../../../../globals/types';
-import { determineLoaderVariant } from '../../../../utils/determine-loader-variant';
-import { BlrIconRenderFunction } from '../../../ui/icon/renderFunction';
-import { calculateIconName } from '../../../../utils/calculate-icon-name';
-import { BlrLoaderRenderFunction } from '../../../feedback/loader/renderFunction';
-import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
-import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
-
 import { TAG_NAME } from './renderFunction';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css';
+import { ActionVariantType, ActionSizesType, FormSizesType, SizesType } from '../../globals/types';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { determineLoaderVariant } from '../../utils/determine-loader-variant';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { BlrLoaderRenderFunction } from '../loader/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrIconButton extends LitElement {
   static styles = [styleCustom];
 
@@ -138,4 +136,8 @@ export class BlrIconButton extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrIconButton);
+}
+
 export type BlrIconButtonType = Omit<BlrIconButton, keyof LitElement>;
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/indexReact.ts b/packages/ui-library/src/components/icon-button/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/actions/buttons/icon-button/indexReact.ts
rename to packages/ui-library/src/components/icon-button/indexReact.ts
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/renderFunction.ts b/packages/ui-library/src/components/icon-button/renderFunction.ts
similarity index 69%
rename from packages/ui-library/src/components/actions/buttons/icon-button/renderFunction.ts
rename to packages/ui-library/src/components/icon-button/renderFunction.ts
index d5db71b9f..c516e4870 100644
--- a/packages/ui-library/src/components/actions/buttons/icon-button/renderFunction.ts
+++ b/packages/ui-library/src/components/icon-button/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrIconButtonType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-icon-button';
 
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.css.ts b/packages/ui-library/src/components/icon-link/index.css.ts
similarity index 83%
rename from packages/ui-library/src/components/ui/icon/icon-link/index.css.ts
rename to packages/ui-library/src/components/icon-link/index.css.ts
index 5fabe1f44..071fb2caa 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/index.css.ts
+++ b/packages/ui-library/src/components/icon-link/index.css.ts
@@ -1,4 +1,4 @@
-import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const styleCustom = typeSafeNestedCss`
   .blr-icon-link {
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts b/packages/ui-library/src/components/icon-link/index.stories.ts
similarity index 78%
rename from packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
rename to packages/ui-library/src/components/icon-link/index.stories.ts
index cc6b37fb3..58544bf8c 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
+++ b/packages/ui-library/src/components/icon-link/index.stories.ts
@@ -1,15 +1,14 @@
 /* eslint-disable no-console */
 import { BlrIconLinkType } from './index';
 import { BlrIconLinkRenderFunction } from './renderFunction';
-import { PureIconKeys } from '@boiler/icons';
-import { ActionVariants, ActionSizes } from '../../../../globals/constants';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
-
+import { PureIconKeys } from '@boiler/icons/icons-optimized';
 // this loads the all components instances and registers their html tags
-import '../../../../index';
+import '../../index';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { ActionSizes, ActionVariants } from '../../globals/constants';
 
 export default {
-  title: 'Design System/Web Components/UI/Icon/Iconlink',
+  title: 'Components/Icon Link',
   argTypes: {
     icon: {
       options: [undefined, ...PureIconKeys],
@@ -39,7 +38,7 @@ export default {
 
 export const BlrIconLink = (params: BlrIconLinkType) => BlrIconLinkRenderFunction(params);
 
-BlrIconLink.storyName = 'IconLink';
+BlrIconLink.storyName = 'Icon Link';
 
 const args: BlrIconLinkType = {
   theme: 'Light',
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.test.ts b/packages/ui-library/src/components/icon-link/index.test.ts
similarity index 95%
rename from packages/ui-library/src/components/ui/icon/icon-link/index.test.ts
rename to packages/ui-library/src/components/icon-link/index.test.ts
index 429c94a82..12500a073 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/index.test.ts
+++ b/packages/ui-library/src/components/icon-link/index.test.ts
@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrIconLinkRenderFunction } from './renderFunction';
-import type { BlrIconLinkType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import type { BlrIconLinkType } from '.';
 
 const sampleParams: BlrIconLinkType = {
   arialabel: 'Button',
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.ts b/packages/ui-library/src/components/icon-link/index.ts
similarity index 74%
rename from packages/ui-library/src/components/ui/icon/icon-link/index.ts
rename to packages/ui-library/src/components/icon-link/index.ts
index cde45a819..05ff30083 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/index.ts
+++ b/packages/ui-library/src/components/icon-link/index.ts
@@ -1,22 +1,20 @@
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
 import { styleCustom as iconLinkStyleCustom } from './index.css';
-import { styleCustom as iconButtonStyleCustom } from '../../../actions/buttons/icon-button/index.css';
-import { actionDark, actionLight } from '../../../../foundation/semantic-tokens/action.css';
-import { ActionVariantType, ActionSizesType, SizesType, FormSizesType } from '../../../../globals/types';
-import { determineLoaderVariant } from '../../../../utils/determine-loader-variant';
-import { BlrIconRenderFunction } from '../renderFunction';
-import { calculateIconName } from '../../../../utils/calculate-icon-name';
-import { BlrLoaderRenderFunction } from '../../../feedback/loader/renderFunction';
-import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
-
+import { styleCustom as iconButtonStyleCustom } from '../icon-button/index.css';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css';
+import { ActionVariantType, ActionSizesType, FormSizesType, SizesType } from '../../globals/types';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { determineLoaderVariant } from '../../utils/determine-loader-variant';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { BlrLoaderRenderFunction } from '../loader/renderFunction';
 import { TAG_NAME } from './renderFunction';
 
-import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
-
-@customElement(TAG_NAME)
+//
 export class BlrIconLink extends LitElement {
   static styles = [iconLinkStyleCustom, iconButtonStyleCustom];
 
@@ -90,4 +88,8 @@ export class BlrIconLink extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrIconLink);
+}
+
 export type BlrIconLinkType = Omit<BlrIconLink, keyof LitElement>;
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/indexReact.ts b/packages/ui-library/src/components/icon-link/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/ui/icon/icon-link/indexReact.ts
rename to packages/ui-library/src/components/icon-link/indexReact.ts
diff --git a/packages/ui-library/src/components/ui/icon/icon-link/renderFunction.ts b/packages/ui-library/src/components/icon-link/renderFunction.ts
similarity index 68%
rename from packages/ui-library/src/components/ui/icon/icon-link/renderFunction.ts
rename to packages/ui-library/src/components/icon-link/renderFunction.ts
index e1e3744a5..fdce19cac 100644
--- a/packages/ui-library/src/components/ui/icon/icon-link/renderFunction.ts
+++ b/packages/ui-library/src/components/icon-link/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrIconLinkType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-icon-link';
 
diff --git a/packages/ui-library/src/components/ui/icon/index.css.ts b/packages/ui-library/src/components/icon/index.css.ts
similarity index 83%
rename from packages/ui-library/src/components/ui/icon/index.css.ts
rename to packages/ui-library/src/components/icon/index.css.ts
index 32e38433c..a6d109bb3 100644
--- a/packages/ui-library/src/components/ui/icon/index.css.ts
+++ b/packages/ui-library/src/components/icon/index.css.ts
@@ -1,6 +1,6 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
-import { componentTokens } from "../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
+import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
 
 const { UI } = componentTokens;
 
diff --git a/packages/ui-library/src/components/ui/icon/icon/index.stories.ts b/packages/ui-library/src/components/icon/index.stories.ts
similarity index 71%
rename from packages/ui-library/src/components/ui/icon/icon/index.stories.ts
rename to packages/ui-library/src/components/icon/index.stories.ts
index badf64b81..4969fae44 100644
--- a/packages/ui-library/src/components/ui/icon/icon/index.stories.ts
+++ b/packages/ui-library/src/components/icon/index.stories.ts
@@ -1,10 +1,10 @@
 import { html } from 'lit-html';
-import { Sizes } from '../../../../globals/constants';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
-import '../../../../index';
-import { BlrIconRenderFunction } from '../renderFunction';
-import { SizesType } from '../../../../globals/types';
-import { calculateIconName } from '../../../../utils/calculate-icon-name';
+import { Sizes } from '../../globals/constants';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import '../../index';
+import { BlrIconRenderFunction } from './renderFunction';
+import { SizesType } from '../../globals/types';
+import { calculateIconName } from '../../utils/calculate-icon-name';
 import { PureIconKeys, SizelessIconType } from '@boiler/icons/icons-optimized';
 
 const sharedStyles = html`
@@ -27,7 +27,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/UI/Icon/Icon',
+  title: 'Components/Icon',
   argTypes: {
     sizeVariant: {
       options: Sizes,
@@ -66,8 +66,24 @@ export default {
       description: {
         component: `<markdown>
         An icon component typically displays a small, visually recognizable graphic or symbol that represents a particular function, object, or concept.
-- [**Appearance**](#appearance)
- - [**Size Variant**](#size-variant) 
+
+        - [**Appearance**](#appearance)
+          - [**Size Variant**](#size-variant)
+        
+        The Icon is intended to be used when creating new components. Currently, it is used like this in the following components:
+        
+        - [**Text Button**](?path=/docs/components-text-button--docs)
+        - [**Checkbox**](?path=/docs/components-checkbox--docs)
+        - [**Form Caption**](?path=/docs/components-form-caption--docs)
+        - [**Select**](?path=/docs/components-select--docs)
+        - [**Text Input**](?path=/docs/components-text-input--docs)
+        - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs)
+        - [**Tab Bar**](?path=/docs/components-tabbar--docs)
+        - [**Icon Link**](?path=/docs/components-icon-link--docs)
+        - [**Number Input**](?path=/docs/components-number-input--docs)
+        
+        It is not intended to use the Icon directly when creating new applications.
+        
 </markdown>
         `,
       },
diff --git a/packages/ui-library/src/components/ui/icon/index.test.ts b/packages/ui-library/src/components/icon/index.test.ts
similarity index 96%
rename from packages/ui-library/src/components/ui/icon/index.test.ts
rename to packages/ui-library/src/components/icon/index.test.ts
index 6da40b895..7b55dd4a7 100644
--- a/packages/ui-library/src/components/ui/icon/index.test.ts
+++ b/packages/ui-library/src/components/icon/index.test.ts
@@ -2,11 +2,11 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrIconRenderFunction } from './renderFunction';
-import type { BlrIconType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { classMap } from 'lit/directives/class-map.js';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import type { BlrIconType } from '.';
 
 const TEST_CLASS = 'test-class';
 
diff --git a/packages/ui-library/src/components/ui/icon/index.ts b/packages/ui-library/src/components/icon/index.ts
similarity index 89%
rename from packages/ui-library/src/components/ui/icon/index.ts
rename to packages/ui-library/src/components/icon/index.ts
index 1b722dc6e..5b12a4f38 100644
--- a/packages/ui-library/src/components/ui/icon/index.ts
+++ b/packages/ui-library/src/components/icon/index.ts
@@ -1,16 +1,15 @@
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { IconMapping, IconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
-import { SizesType } from '../../../globals/types';
+import { SizesType } from '../../globals/types';
 import { DirectiveResult } from 'lit-html/directive';
 import { ClassMapDirective } from 'lit-html/directives/class-map';
 import { until } from 'lit-html/directives/until.js';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
 import { TAG_NAME } from './renderFunction';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 
-@customElement(TAG_NAME)
 export class BlrIcon extends LitElement {
   static styles = [styleCustom];
 
@@ -71,10 +70,20 @@ export class BlrIcon extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrIcon);
+}
+
 // BlrIconType is a new Type containing all properties of BlrIcon without the properties of LitElement
 // and some additional properties which are not part of the component, so we dont use the generic render function
 
 /*
+ 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrIconLink);
+}
+
+
 export type BlrIconType = Partial<Omit<BlrIcon, keyof LitElement>> & {
   classMap?: DirectiveResult<typeof ClassMapDirective>;
   onClick?: HTMLElement['onclick'];
diff --git a/packages/ui-library/src/components/ui/icon/indexReact.ts b/packages/ui-library/src/components/icon/indexReact.ts
similarity index 99%
rename from packages/ui-library/src/components/ui/icon/indexReact.ts
rename to packages/ui-library/src/components/icon/indexReact.ts
index 8c9c8a957..bb5927e2f 100644
--- a/packages/ui-library/src/components/ui/icon/indexReact.ts
+++ b/packages/ui-library/src/components/icon/indexReact.ts
@@ -1,6 +1,5 @@
 import React from 'react';
 import { createComponent } from '@lit-labs/react';
-
 import { BlrIcon } from '.';
 
 export const BlrTextButtonReact = createComponent({
diff --git a/packages/ui-library/src/components/ui/icon/renderFunction.ts b/packages/ui-library/src/components/icon/renderFunction.ts
similarity index 75%
rename from packages/ui-library/src/components/ui/icon/renderFunction.ts
rename to packages/ui-library/src/components/icon/renderFunction.ts
index ac6a82666..ca65d0f31 100644
--- a/packages/ui-library/src/components/ui/icon/renderFunction.ts
+++ b/packages/ui-library/src/components/icon/renderFunction.ts
@@ -1,5 +1,5 @@
 import type { BlrIconType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-icon';
 
diff --git a/packages/ui-library/src/components/feedback/loader/index.css.ts b/packages/ui-library/src/components/loader/index.css.ts
similarity index 91%
rename from packages/ui-library/src/components/feedback/loader/index.css.ts
rename to packages/ui-library/src/components/loader/index.css.ts
index 301e75dfc..a05f9495a 100644
--- a/packages/ui-library/src/components/feedback/loader/index.css.ts
+++ b/packages/ui-library/src/components/loader/index.css.ts
@@ -1,5 +1,5 @@
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const { tokenizedLight: styleCustomLight, tokenizedDark: styleCustomDark } = renderThemedCssStrings((componentTokens) => {
   const { Loader } = componentTokens.Feedback;
diff --git a/packages/ui-library/src/components/feedback/loader/index.stories.ts b/packages/ui-library/src/components/loader/index.stories.ts
similarity index 93%
rename from packages/ui-library/src/components/feedback/loader/index.stories.ts
rename to packages/ui-library/src/components/loader/index.stories.ts
index 51c470148..7b6faf244 100644
--- a/packages/ui-library/src/components/feedback/loader/index.stories.ts
+++ b/packages/ui-library/src/components/loader/index.stories.ts
@@ -1,11 +1,10 @@
 import { BlrLoaderType } from './index';
 import { BlrLoaderRenderFunction } from './renderFunction';
-import { FeedbackSizes, FeedbackVariants } from '../../../globals/constants';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit-html';
-
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { FeedbackVariants, FeedbackSizes } from '../../globals/constants';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -27,7 +26,7 @@ const defaultParams: BlrLoaderType = {
 };
 
 export default {
-  title: 'Design System/Web Components/Feedback/Loader',
+  title: 'Components/Loader',
   argTypes: {
     //Appearance
     variant: {
diff --git a/packages/ui-library/src/components/feedback/loader/index.test.ts b/packages/ui-library/src/components/loader/index.test.ts
similarity index 95%
rename from packages/ui-library/src/components/feedback/loader/index.test.ts
rename to packages/ui-library/src/components/loader/index.test.ts
index 83d06c8fb..9c42b0205 100644
--- a/packages/ui-library/src/components/feedback/loader/index.test.ts
+++ b/packages/ui-library/src/components/loader/index.test.ts
@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrLoaderRenderFunction } from './renderFunction';
-import type { BlrLoaderType } from '@boiler/ui-library/dist/';
+import type { BlrLoaderType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
diff --git a/packages/ui-library/src/components/feedback/loader/index.ts b/packages/ui-library/src/components/loader/index.ts
similarity index 78%
rename from packages/ui-library/src/components/feedback/loader/index.ts
rename to packages/ui-library/src/components/loader/index.ts
index 70a510656..942bd23b9 100644
--- a/packages/ui-library/src/components/feedback/loader/index.ts
+++ b/packages/ui-library/src/components/loader/index.ts
@@ -1,13 +1,12 @@
 import { LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleCustomLight, styleCustomDark } from './index.css';
-import { ActionSizesType, FeedbackVariantType } from '../../../globals/types';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 
 import { TAG_NAME } from './renderFunction';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { ActionSizesType, FeedbackVariantType } from '../../globals/types';
 
-@customElement(TAG_NAME)
 export class BlrLoader extends LitElement {
   static styles = [];
 
@@ -35,4 +34,8 @@ export class BlrLoader extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrLoader);
+}
+
 export type BlrLoaderType = Omit<BlrLoader, keyof LitElement>;
diff --git a/packages/ui-library/src/components/feedback/loader/indexReact.ts b/packages/ui-library/src/components/loader/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/feedback/loader/indexReact.ts
rename to packages/ui-library/src/components/loader/indexReact.ts
diff --git a/packages/ui-library/src/components/feedback/loader/renderFunction.ts b/packages/ui-library/src/components/loader/renderFunction.ts
similarity index 68%
rename from packages/ui-library/src/components/feedback/loader/renderFunction.ts
rename to packages/ui-library/src/components/loader/renderFunction.ts
index 668429dbe..d425208a5 100644
--- a/packages/ui-library/src/components/feedback/loader/renderFunction.ts
+++ b/packages/ui-library/src/components/loader/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrLoaderType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-loader';
 
diff --git a/packages/ui-library/src/components/forms/number-input/index.css.ts b/packages/ui-library/src/components/number-input/index.css.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/number-input/index.css.ts
rename to packages/ui-library/src/components/number-input/index.css.ts
index 8377126c4..66ac5dd04 100644
--- a/packages/ui-library/src/components/forms/number-input/index.css.ts
+++ b/packages/ui-library/src/components/number-input/index.css.ts
@@ -1,5 +1,5 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
 export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
   const { UserInput, SurfaceFill, Placeholder, Input, InputBorderRadius, SM, MD, LG, PrefixSuffix } = semanticTokens.Forms;
diff --git a/packages/ui-library/src/components/forms/number-input/index.stories.ts b/packages/ui-library/src/components/number-input/index.stories.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/number-input/index.stories.ts
rename to packages/ui-library/src/components/number-input/index.stories.ts
index 4f96b5f40..ff72f18f9 100644
--- a/packages/ui-library/src/components/forms/number-input/index.stories.ts
+++ b/packages/ui-library/src/components/number-input/index.stories.ts
@@ -1,14 +1,14 @@
 /* eslint-disable no-console */
 import { BlrNumberInputType } from './index';
 import { BlrNumberInputRenderFunction } from './renderFunction';
-import { FormSizes, Units } from '../../../globals/constants';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { FormSizes, Units } from '../../globals/constants';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
 import { PureIconKeys } from '@boiler/icons/icons-optimized';
 import { html } from 'lit-html';
 import { action } from '@storybook/addon-actions';
 
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
 
 const sharedStyles = html`
   <style>
@@ -45,7 +45,7 @@ const defaultParams: BlrNumberInputType = {
 };
 
 export default {
-  title: 'Design System/Web Components/Forms/Number Input',
+  title: 'Components/Number Input',
   args: {
     ...defaultParams,
     name: 'NumberInput',
diff --git a/packages/ui-library/src/components/forms/number-input/index.test.ts b/packages/ui-library/src/components/number-input/index.test.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/number-input/index.test.ts
rename to packages/ui-library/src/components/number-input/index.test.ts
index 365949d33..07c3e0be8 100644
--- a/packages/ui-library/src/components/forms/number-input/index.test.ts
+++ b/packages/ui-library/src/components/number-input/index.test.ts
@@ -5,7 +5,7 @@ import type { BlrNumberInputType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
-import { getRandomString } from '../../../utils/get-random.string';
+import { getRandomString } from '../../utils/get-random.string';
 
 const sampleParams: BlrNumberInputType = {
   placeholder: 'Type your message here ..',
diff --git a/packages/ui-library/src/components/forms/number-input/index.ts b/packages/ui-library/src/components/number-input/index.ts
similarity index 90%
rename from packages/ui-library/src/components/forms/number-input/index.ts
rename to packages/ui-library/src/components/number-input/index.ts
index a7b380037..73a235a2e 100644
--- a/packages/ui-library/src/components/forms/number-input/index.ts
+++ b/packages/ui-library/src/components/number-input/index.ts
@@ -1,22 +1,20 @@
 import { LitElement, TemplateResult, html, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { baseStyle, wrapperLight, wrapperDark, StepperComboDark, StepperComboLight } from './index.css';
 import { classMap } from 'lit-html/directives/class-map.js';
-import { BlrFormLabelRenderFunction } from '../../internal-components/form-label/renderFunction';
-import { BlrDividerRenderFunction } from '../../ui/divider/renderFunction';
-import { FormSizesType } from '../../../globals/types';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
-import { calculateIconName } from '../../../utils/calculate-icon-name';
-import { getComponentConfigToken } from '../../../utils/get-component-config-token';
-import { SizelessIconType } from '@boiler/icons';
-import { actionDark, actionLight } from '../../../foundation/semantic-tokens/action.css';
-import { BlrFormCaptionGroupRenderFunction } from '../../internal-components/form-caption-group/renderFunction';
-import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption/renderFunction';
-
 import { TAG_NAME } from './renderFunction';
+import { BlrDividerRenderFunction } from '../divider/renderFunction';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css';
+import { FormSizesType } from '../../globals/types';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
+import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
+import { BlrFormLabelRenderFunction } from '../form-label/renderFunction';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrNumberInput extends LitElement {
   static styles = [baseStyle];
 
@@ -274,4 +272,8 @@ export class BlrNumberInput extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrNumberInput);
+}
+
 export type BlrNumberInputType = Omit<BlrNumberInput, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/number-input/indexReact.ts b/packages/ui-library/src/components/number-input/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/number-input/indexReact.ts
rename to packages/ui-library/src/components/number-input/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/number-input/renderFunction.ts b/packages/ui-library/src/components/number-input/renderFunction.ts
similarity index 70%
rename from packages/ui-library/src/components/forms/number-input/renderFunction.ts
rename to packages/ui-library/src/components/number-input/renderFunction.ts
index 2ea8a0ff7..2793ce35d 100644
--- a/packages/ui-library/src/components/forms/number-input/renderFunction.ts
+++ b/packages/ui-library/src/components/number-input/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrNumberInputType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-number-input';
 
diff --git a/packages/ui-library/src/components/forms/radio/radio-group/index.css.ts b/packages/ui-library/src/components/radio-group/index.css.ts
similarity index 59%
rename from packages/ui-library/src/components/forms/radio/radio-group/index.css.ts
rename to packages/ui-library/src/components/radio-group/index.css.ts
index 1f7205368..822a8799c 100644
--- a/packages/ui-library/src/components/forms/radio/radio-group/index.css.ts
+++ b/packages/ui-library/src/components/radio-group/index.css.ts
@@ -1,4 +1,4 @@
-import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const styleCustom = typeSafeNestedCss`
   .blr-radio,
diff --git a/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts b/packages/ui-library/src/components/radio-group/index.stories.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts
rename to packages/ui-library/src/components/radio-group/index.stories.ts
index a3e1174ef..483ea25e3 100644
--- a/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts
+++ b/packages/ui-library/src/components/radio-group/index.stories.ts
@@ -1,12 +1,13 @@
 import { BlrRadioGroupType } from './index';
 import { BlrRadioGroupRenderFunction } from './renderFunction';
-import { InputSizes } from '../../../../globals/constants';
-import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
+
 import { html } from 'lit';
 // this loads the all components instances and registers their html tags
-import '../../../../index';
+import '../../index';
 import { action } from '@storybook/addon-actions';
+import { PureIconKeys } from '@boiler/icons';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { InputSizes } from '../../globals/constants';
 
 const sharedStyles = html`
   <style>
@@ -17,7 +18,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Forms/Radio Group/Radio Group',
+  title: 'Components/Radio Group',
   argTypes: {
     size: {
       name: 'sizeVariant',
diff --git a/packages/ui-library/src/components/forms/radio/radio-group/index.test.ts b/packages/ui-library/src/components/radio-group/index.test.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/radio/radio-group/index.test.ts
rename to packages/ui-library/src/components/radio-group/index.test.ts
index 7ed0af07b..d0719cd3f 100644
--- a/packages/ui-library/src/components/forms/radio/radio-group/index.test.ts
+++ b/packages/ui-library/src/components/radio-group/index.test.ts
@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrRadioGroupRenderFunction } from './renderFunction';
-import type { BlrRadioGroupType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import { BlrRadioGroupType } from '.';
 
 const sampleParams: BlrRadioGroupType = {
   theme: 'Light',
diff --git a/packages/ui-library/src/components/forms/radio/radio-group/index.ts b/packages/ui-library/src/components/radio-group/index.ts
similarity index 85%
rename from packages/ui-library/src/components/forms/radio/radio-group/index.ts
rename to packages/ui-library/src/components/radio-group/index.ts
index d8fb3d385..cca3a477c 100644
--- a/packages/ui-library/src/components/forms/radio/radio-group/index.ts
+++ b/packages/ui-library/src/components/radio-group/index.ts
@@ -1,19 +1,17 @@
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
-import { formDark, formLight } from '../../../../foundation/semantic-tokens/form.css';
-import { radioDark, radioLight } from '../../../../foundation/component-tokens/radio.css';
-import { InputSizesType, RadioOption } from '../../../../globals/types';
-import { BlrFormLabelInlineRenderFunction } from '../../../internal-components/form-label/form-label-inline/renderFunction';
 import { SizelessIconType } from '@boiler/icons';
-import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
-import { BlrFormCaptionGroupRenderFunction } from '../../../internal-components/form-caption-group/renderFunction';
-import { BlrFormCaptionRenderFunction } from '../../../internal-components/form-caption/renderFunction';
-
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { radioLight, radioDark } from '../../foundation/component-tokens/radio.css';
+import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
+import { InputSizesType, RadioOption } from '../../globals/types';
+import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
+import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
+import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
 import { TAG_NAME } from './renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrRadioGroup extends LitElement {
   static styles = [styleCustom];
 
@@ -140,4 +138,8 @@ export class BlrRadioGroup extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrRadioGroup);
+}
+
 export type BlrRadioGroupType = Omit<BlrRadioGroup, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/radio/radio-group/indexReact.ts b/packages/ui-library/src/components/radio-group/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/radio/radio-group/indexReact.ts
rename to packages/ui-library/src/components/radio-group/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/radio/radio-group/renderFunction.ts b/packages/ui-library/src/components/radio-group/renderFunction.ts
similarity index 69%
rename from packages/ui-library/src/components/forms/radio/radio-group/renderFunction.ts
rename to packages/ui-library/src/components/radio-group/renderFunction.ts
index 304ed1ba6..cb98ef69a 100644
--- a/packages/ui-library/src/components/forms/radio/radio-group/renderFunction.ts
+++ b/packages/ui-library/src/components/radio-group/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrRadioGroupType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-radio-group';
 
diff --git a/packages/ui-library/src/components/forms/radio/index.css.ts b/packages/ui-library/src/components/radio/index.css.ts
similarity index 56%
rename from packages/ui-library/src/components/forms/radio/index.css.ts
rename to packages/ui-library/src/components/radio/index.css.ts
index abd160be0..d41b7d961 100644
--- a/packages/ui-library/src/components/forms/radio/index.css.ts
+++ b/packages/ui-library/src/components/radio/index.css.ts
@@ -1,4 +1,4 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const styleCustom = typeSafeNestedCss`
   .blr-radio:disabled {
diff --git a/packages/ui-library/src/components/forms/radio/index.stories.ts b/packages/ui-library/src/components/radio/index.stories.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/radio/index.stories.ts
rename to packages/ui-library/src/components/radio/index.stories.ts
index 9f95e0426..3970af139 100644
--- a/packages/ui-library/src/components/forms/radio/index.stories.ts
+++ b/packages/ui-library/src/components/radio/index.stories.ts
@@ -1,13 +1,13 @@
 import { BlrRadioType } from './index';
 import { BlrRadioRenderFunction } from './renderFunction';
-import { InputSizes } from '../../../globals/constants';
-import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit-html';
 import { action } from '@storybook/addon-actions';
 
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
+import { PureIconKeys } from '@boiler/icons';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { InputSizes } from '../../globals/constants';
 
 const sharedStyles = html`
   <style>
@@ -18,7 +18,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Forms/Radio Group/Radio',
+  title: 'Components/Radio',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/forms/radio/index.test.ts b/packages/ui-library/src/components/radio/index.test.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/radio/index.test.ts
rename to packages/ui-library/src/components/radio/index.test.ts
index 4ad37c077..035294001 100644
--- a/packages/ui-library/src/components/forms/radio/index.test.ts
+++ b/packages/ui-library/src/components/radio/index.test.ts
@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrRadioRenderFunction } from './renderFunction';
-import type { BlrRadioType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
+import { BlrRadioType } from '.';
 
 const sampleParams: BlrRadioType = {
   checked: false,
diff --git a/packages/ui-library/src/components/forms/radio/index.ts b/packages/ui-library/src/components/radio/index.ts
similarity index 82%
rename from packages/ui-library/src/components/forms/radio/index.ts
rename to packages/ui-library/src/components/radio/index.ts
index 9983efab4..da788a7cf 100644
--- a/packages/ui-library/src/components/forms/radio/index.ts
+++ b/packages/ui-library/src/components/radio/index.ts
@@ -1,19 +1,17 @@
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
-import { InputSizesType } from '../../../globals/types';
-import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
-import { radioDark, radioLight } from '../../../foundation/component-tokens/radio.css';
-import { BlrFormLabelInlineRenderFunction } from '../../internal-components/form-label/form-label-inline/renderFunction';
-import { BlrFormCaptionGroupRenderFunction } from '../../internal-components/form-caption-group/renderFunction';
-import { SizelessIconType } from '@boiler/icons';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption/renderFunction';
-
+import { InputSizesType } from '../../globals/types';
+import { formDark, formLight } from '../../foundation/semantic-tokens/form.css';
+import { radioDark, radioLight } from '../../foundation/component-tokens/radio.css';
 import { TAG_NAME } from './renderFunction';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
+import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
+import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrRadio extends LitElement {
   static styles = [styleCustom];
 
@@ -113,4 +111,8 @@ export class BlrRadio extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrRadio);
+}
+
 export type BlrRadioType = Omit<BlrRadio, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/radio/indexReact.ts b/packages/ui-library/src/components/radio/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/radio/indexReact.ts
rename to packages/ui-library/src/components/radio/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/radio/renderFunction.ts b/packages/ui-library/src/components/radio/renderFunction.ts
similarity index 67%
rename from packages/ui-library/src/components/forms/radio/renderFunction.ts
rename to packages/ui-library/src/components/radio/renderFunction.ts
index f4aaefea2..c36fd72a5 100644
--- a/packages/ui-library/src/components/forms/radio/renderFunction.ts
+++ b/packages/ui-library/src/components/radio/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrRadioType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-radio';
 
diff --git a/packages/ui-library/src/components/forms/select/index.css.ts b/packages/ui-library/src/components/select/index.css.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/select/index.css.ts
rename to packages/ui-library/src/components/select/index.css.ts
index fc4651f49..8b793142f 100644
--- a/packages/ui-library/src/components/forms/select/index.css.ts
+++ b/packages/ui-library/src/components/select/index.css.ts
@@ -1,6 +1,6 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
 export const styleCustom = typeSafeNestedCss`
   .blr-select-option {
diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/select/index.stories.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/select/index.stories.ts
rename to packages/ui-library/src/components/select/index.stories.ts
index b7113fe78..52c2cc831 100644
--- a/packages/ui-library/src/components/forms/select/index.stories.ts
+++ b/packages/ui-library/src/components/select/index.stories.ts
@@ -2,12 +2,10 @@
 import { html } from 'lit-html';
 import { BlrSelectType } from './index';
 import { BlrSelectRenderFunction } from './renderFunction';
-import { FormSizes } from '../../../globals/constants';
+import { FormSizes } from '../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-
-// this loads the all components instances and registers their html tags
-import '../../../index';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import '../../index';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -41,7 +39,7 @@ const defaultParams: BlrSelectType = {
 };
 
 export default {
-  title: 'Design System/Web Components/Forms/Select',
+  title: 'Components/Select',
   argTypes: {
     // Appearance
     size: {
diff --git a/packages/ui-library/src/components/forms/select/index.test.ts b/packages/ui-library/src/components/select/index.test.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/select/index.test.ts
rename to packages/ui-library/src/components/select/index.test.ts
index 6fe7df7f0..09ae7c348 100644
--- a/packages/ui-library/src/components/forms/select/index.test.ts
+++ b/packages/ui-library/src/components/select/index.test.ts
@@ -1,11 +1,11 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrSelectRenderFunction } from './renderFunction';
-import type { BlrSelectType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
 import { html } from 'lit-html';
+import { BlrSelectType } from '.';
 
 const sampleParams: BlrSelectType = {
   name: 'Text Input',
diff --git a/packages/ui-library/src/components/forms/select/index.ts b/packages/ui-library/src/components/select/index.ts
similarity index 87%
rename from packages/ui-library/src/components/forms/select/index.ts
rename to packages/ui-library/src/components/select/index.ts
index fbbc50a42..ee88e9a8d 100644
--- a/packages/ui-library/src/components/forms/select/index.ts
+++ b/packages/ui-library/src/components/select/index.ts
@@ -1,25 +1,21 @@
 import { LitElement, html, nothing } from 'lit';
 import { ClassMapDirective, classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
-import { FormSizesType, SizesType } from '../../../globals/types';
-
+import { FormSizesType, SizesType } from '../../globals/types';
 import { selectInputLight, selectInputDark } from './index.css';
 import { SizelessIconType } from '@boiler/icons';
-import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
-import { calculateIconName } from '../../../utils/calculate-icon-name';
+import { formDark, formLight } from '../../foundation/semantic-tokens/form.css';
+import { calculateIconName } from '../../utils/calculate-icon-name';
 import { DirectiveResult } from 'lit-html/directive';
-
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-import { getComponentConfigToken } from '../../../utils/get-component-config-token';
-
-import { BlrFormCaptionGroupRenderFunction } from '../../internal-components/form-caption-group/renderFunction';
-import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption/renderFunction';
-import { BlrFormLabelRenderFunction } from '../../internal-components/form-label/renderFunction';
-import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
 import { TAG_NAME } from './renderFunction';
+import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
+import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
+import { BlrFormLabelRenderFunction } from '../form-label/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrSelect extends LitElement {
   static styles = [styleCustom];
 
@@ -210,4 +206,8 @@ export class BlrSelect extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrSelect);
+}
+
 export type BlrSelectType = Omit<BlrSelect, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/select/indexReact.ts b/packages/ui-library/src/components/select/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/select/indexReact.ts
rename to packages/ui-library/src/components/select/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/select/renderFunction.ts b/packages/ui-library/src/components/select/renderFunction.ts
similarity index 75%
rename from packages/ui-library/src/components/forms/select/renderFunction.ts
rename to packages/ui-library/src/components/select/renderFunction.ts
index 2aeaf8d7e..c83d0a0ab 100644
--- a/packages/ui-library/src/components/forms/select/renderFunction.ts
+++ b/packages/ui-library/src/components/select/renderFunction.ts
@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit-html';
 import { BlrSelectType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-select';
 
diff --git a/packages/ui-library/src/components/feedback/tooltip/index.css.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.css.ts
similarity index 78%
rename from packages/ui-library/src/components/feedback/tooltip/index.css.ts
rename to packages/ui-library/src/components/slider-single-value/range-legend-slider/index.css.ts
index 069b56822..a0d4d60ec 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.css.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.css.ts
@@ -1,7 +1,7 @@
 import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
 
 export const styleCustom = typeSafeNestedCss`
-  :host {
-    display: inline-block;
+  .input-row {
+    margin-top: 13px;
   }
 `;
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.stories.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.stories.ts
similarity index 89%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.stories.ts
rename to packages/ui-library/src/components/slider-single-value/range-legend-slider/index.stories.ts
index 6d15aa263..b466a4522 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.stories.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.stories.ts
@@ -1,15 +1,14 @@
 /* eslint-disable no-console */
 import { BlrRangeLegendSliderType } from './index';
 import { BlrRangeLegendSliderRenderFunction } from './renderFunction';
-import { Sizes } from '../../../../../globals/constants';
-import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../../../foundation/_tokens-generated/index.themes';
-
 // this loads the all components instances and registers their html tags
-import '../../../../../index';
+import '../../../index';
+import { PureIconKeys } from '@boiler/icons';
+import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { Sizes } from '../../../globals/constants';
 
 export default {
-  title: 'Design System/Web Components/Forms/Slider/SliderSingleValue',
+  title: 'Components/Slider Single Value',
   argTypes: {
     incrementIcon: {
       options: [undefined, ...PureIconKeys],
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.test.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.test.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.test.ts
rename to packages/ui-library/src/components/slider-single-value/range-legend-slider/index.test.ts
index 76cbaa3dc..ef787a574 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.test.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.test.ts
@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrRangeLegendSliderRenderFunction } from './renderFunction';
-import type { BlrRangeLegendSliderType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep, querySelectorAllDeep } from 'query-selector-shadow-dom';
+import { BlrRangeLegendSliderType } from '.';
 
 const sampleParams: BlrRangeLegendSliderType = {
   theme: 'Light',
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts
similarity index 90%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.ts
rename to packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts
index 05ad5e241..e83328261 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts
@@ -1,22 +1,18 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { map } from 'lit/directives/map.js';
 import { styleCustom } from './index.css';
-import { sliderDark, sliderLight } from '../../../../../foundation/component-tokens/slider-legend.css';
-import { FormSizesType, ActionVariantType } from '../../../../../globals/types';
-import { findToolTipPosition, setOnclickValue } from '../../../../../utils/range-slider-utils';
-
-import { BlrIconButtonRenderFunction } from '../../../../actions/buttons/icon-button/renderFunction';
-import { RenderBtnProps } from '../../../../../globals/types';
-
-import { SizelessIconType } from '@boiler/icons';
-import { ThemeType } from '../../../../../foundation/_tokens-generated/index.themes';
 
 import { TAG_NAME } from './renderFunction';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { sliderLight, sliderDark } from '../../../foundation/component-tokens/slider-legend.css';
+import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
+import { setOnclickValue, findToolTipPosition } from '../../../utils/range-slider-utils';
+import { BlrIconButtonRenderFunction } from '../../icon-button/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrRangeLegendSlider extends LitElement {
   static styles = [styleCustom];
 
@@ -176,4 +172,8 @@ export class BlrRangeLegendSlider extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrRangeLegendSlider);
+}
+
 export type BlrRangeLegendSliderType = Omit<BlrRangeLegendSlider, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/indexReact.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/indexReact.ts
rename to packages/ui-library/src/components/slider-single-value/range-legend-slider/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/renderFunction.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/renderFunction.ts
similarity index 72%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/renderFunction.ts
rename to packages/ui-library/src/components/slider-single-value/range-legend-slider/renderFunction.ts
index 971423b32..5779dfb08 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/renderFunction.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-legend-slider/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrRangeLegendSliderType } from '.';
-import { genericBlrComponentRenderer } from '../../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-range-legend-slider';
 
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.css.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.css.ts
similarity index 64%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.css.ts
rename to packages/ui-library/src/components/slider-single-value/range-slider/index.css.ts
index ab5502840..1c0d9d9e4 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.css.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-slider/index.css.ts
@@ -1,4 +1,4 @@
-import { typeSafeNestedCss } from "../../../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
 
 export const styleCustom = typeSafeNestedCss`
   .single-range {
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.stories.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.stories.ts
similarity index 88%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.stories.ts
rename to packages/ui-library/src/components/slider-single-value/range-slider/index.stories.ts
index 6d6b8e7b8..f96cce7dc 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.stories.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-slider/index.stories.ts
@@ -2,15 +2,14 @@
 import './index';
 import type { BlrRangeSliderType } from './index';
 import { BlrRangeSliderRenderFunction } from './renderFunction';
-import { Sizes } from '../../../../../globals/constants';
-import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../../../foundation/_tokens-generated/index.themes';
-
 // this loads the all components instances and registers their html tags
-import '../../../../../index';
+import '../../../index';
+import { PureIconKeys } from '@boiler/icons';
+import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { Sizes } from '../../../globals/constants';
 
 export default {
-  title: 'Design System/Web Components/Forms/Slider/SliderSingleValue',
+  title: 'Components/Slider Single Value',
   argTypes: {
     incrementIcon: {
       options: [undefined, ...PureIconKeys],
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.test.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.test.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.test.ts
rename to packages/ui-library/src/components/slider-single-value/range-slider/index.test.ts
index 885af13bf..c2add5948 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.test.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-slider/index.test.ts
@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrRangeSliderRenderFunction } from './renderFunction';
-import type { BlrRangeSliderType } from '@boiler/ui-library/dist/';
+import type { BlrRangeSliderType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep, querySelectorAllDeep } from 'query-selector-shadow-dom';
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.ts
similarity index 87%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.ts
rename to packages/ui-library/src/components/slider-single-value/range-slider/index.ts
index 10af7ac4e..323264c5d 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-slider/index.ts
@@ -1,25 +1,16 @@
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleCustom } from './index.css';
-import { sliderDark, sliderLight } from '../../../../../foundation/component-tokens/slider.css';
-import { FormSizesType, ActionVariantType } from '../../../../../globals/types';
-import {
-  findNearestValue,
-  findPercentage,
-  generateRangeBar,
-  setOnclickValue,
-} from '../../../../../utils/range-slider-utils';
-
-import { BlrIconButtonRenderFunction } from '../../../../actions/buttons/icon-button/renderFunction';
-import { RenderBtnProps } from '../../../../../globals/types';
-
-import { SizelessIconType } from '@boiler/icons';
-import { ThemeType } from '../../../../../foundation/_tokens-generated/index.themes';
+import { sliderDark, sliderLight } from '../../../foundation/component-tokens/slider.css';
+import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
 
 import { TAG_NAME } from './renderFunction';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { findPercentage, generateRangeBar, setOnclickValue, findNearestValue } from '../../../utils/range-slider-utils';
+import { BlrIconButtonRenderFunction } from '../../icon-button/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrRangeSlider extends LitElement {
   static styles = [styleCustom];
 
@@ -151,4 +142,8 @@ export class BlrRangeSlider extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrRangeSlider);
+}
+
 export type BlrRangeSliderType = Omit<BlrRangeSlider, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/indexReact.ts b/packages/ui-library/src/components/slider-single-value/range-slider/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/indexReact.ts
rename to packages/ui-library/src/components/slider-single-value/range-slider/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/renderFunction.ts b/packages/ui-library/src/components/slider-single-value/range-slider/renderFunction.ts
similarity index 72%
rename from packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/renderFunction.ts
rename to packages/ui-library/src/components/slider-single-value/range-slider/renderFunction.ts
index fd2739e56..d150bf184 100644
--- a/packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/renderFunction.ts
+++ b/packages/ui-library/src/components/slider-single-value/range-slider/renderFunction.ts
@@ -1,6 +1,6 @@
 // import { TAG_NAME } from '.';
 import type { BlrRangeSliderType } from '.';
-import { genericBlrComponentRenderer } from '../../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-range-slider';
 
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.css.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.css.ts
similarity index 64%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.css.ts
rename to packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.css.ts
index ab5502840..1c0d9d9e4 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.css.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.css.ts
@@ -1,4 +1,4 @@
-import { typeSafeNestedCss } from "../../../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
 
 export const styleCustom = typeSafeNestedCss`
   .single-range {
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.stories.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.stories.ts
similarity index 89%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.stories.ts
rename to packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.stories.ts
index 7f53752c5..35c58e164 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.stories.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.stories.ts
@@ -1,15 +1,14 @@
 /* eslint-disable no-console */
 import { BlrRangeLegendMinMaxSliderType } from './index';
 import { BlrRangeLegendMinMaxSliderRenderFunction } from './renderFunction';
-import { Sizes } from '../../../../../globals/constants';
-import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../../../foundation/_tokens-generated/index.themes';
-
 // this loads the all components instances and registers their html tags
-import '../../../../../index';
+import '../../../index';
+import { PureIconKeys } from '@boiler/icons';
+import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { Sizes } from '../../../globals/constants';
 
 export default {
-  title: 'Design System/Web Components/Forms/Slider/SliderTwoValues',
+  title: 'Components/Slider Two Values',
   argTypes: {
     incrementIcon: {
       options: [undefined, ...PureIconKeys],
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts
similarity index 93%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.ts
rename to packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts
index b921ab95a..b2028e088 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts
@@ -1,21 +1,17 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { map } from 'lit/directives/map.js';
 import { styleCustom } from './index.css';
-import { sliderDark, sliderLight } from '../../../../../foundation/component-tokens/slider-legend.css';
-import { FormSizesType, ActionVariantType } from '../../../../../globals/types';
-import { findToolTipPosition, setOnclickValue } from '../../../../../utils/range-slider-utils';
-
-import { BlrIconButtonRenderFunction } from '../../../../actions/buttons/icon-button/renderFunction';
-import { RenderBtnProps } from '../../../../../globals/types';
-import { SizelessIconType } from '@boiler/icons';
-import { ThemeType } from '../../../../../foundation/_tokens-generated/index.themes';
-
 import { TAG_NAME } from './renderFunction';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { sliderLight, sliderDark } from '../../../foundation/component-tokens/slider-legend.css';
+import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
+import { setOnclickValue, findToolTipPosition } from '../../../utils/range-slider-utils';
+import { BlrIconButtonRenderFunction } from '../../icon-button/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrRangeLegendMinMaxSlider extends LitElement {
   static styles = [styleCustom];
 
@@ -231,4 +227,8 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrRangeLegendMinMaxSlider);
+}
+
 export type BlrRangeLegendMinMaxSliderType = Omit<BlrRangeLegendMinMaxSlider, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/indexReact.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/indexReact.ts
rename to packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/renderFunction.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/renderFunction.ts
similarity index 74%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/renderFunction.ts
rename to packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/renderFunction.ts
index 2206c87e1..984c192b6 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/renderFunction.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrRangeLegendMinMaxSliderType } from '.';
-import { genericBlrComponentRenderer } from '../../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-range-legend-min-max-slider';
 
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.css.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.css.ts
similarity index 64%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.css.ts
rename to packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.css.ts
index ab5502840..1c0d9d9e4 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.css.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.css.ts
@@ -1,4 +1,4 @@
-import { typeSafeNestedCss } from "../../../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
 
 export const styleCustom = typeSafeNestedCss`
   .single-range {
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.stories.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.stories.ts
similarity index 89%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.stories.ts
rename to packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.stories.ts
index 3154a3b6e..c3ff69357 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.stories.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.stories.ts
@@ -1,15 +1,14 @@
 /* eslint-disable no-console */
 import { BlrRangeMinMaxSliderType } from './index';
 import { BlrRangeMinMaxSliderRenderFunction } from './renderFunction';
-import { Sizes } from '../../../../../globals/constants';
-import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../../../foundation/_tokens-generated/index.themes';
-
 // this loads the all components instances and registers their html tags
-import '../../../../../index';
+import '../../../index';
+import { PureIconKeys } from '@boiler/icons';
+import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { Sizes } from '../../../globals/constants';
 
 export default {
-  title: 'Design System/Web Components/Forms/Slider/SliderTwoValues',
+  title: 'Components/Slider Two Values',
   argTypes: {
     incrementIcon: {
       options: [undefined, ...PureIconKeys],
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.test.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.test.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.test.ts
rename to packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.test.ts
index 5ffd8d3e1..e6d77f181 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.test.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.test.ts
@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrRangeMinMaxSliderRenderFunction } from './renderFunction';
-import type { BlrRangeMinMaxSliderType } from '@boiler/ui-library/dist/';
+import type { BlrRangeMinMaxSliderType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep, querySelectorAllDeep } from 'query-selector-shadow-dom';
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts
similarity index 91%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.ts
rename to packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts
index 10f1170f9..4b0cac155 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts
@@ -1,25 +1,15 @@
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleCustom } from './index.css';
-import { sliderDark, sliderLight } from '../../../../../foundation/component-tokens/slider.css';
-import { FormSizesType, ActionVariantType } from '../../../../../globals/types';
-import {
-  findNearestValue,
-  findPercentage,
-  generateRangeBar,
-  setOnclickValue,
-} from '../../../../../utils/range-slider-utils';
-
-import { BlrIconButtonRenderFunction } from '../../../../actions/buttons/icon-button/renderFunction';
-import { RenderBtnProps } from '../../../../../globals/types';
-
-import { SizelessIconType } from '@boiler/icons';
-import { ThemeType } from '../../../../../foundation/_tokens-generated/index.themes';
-
 import { TAG_NAME } from './renderFunction';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { sliderLight, sliderDark } from '../../../foundation/component-tokens/slider-legend.css';
+import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
+import { findPercentage, generateRangeBar, findNearestValue, setOnclickValue } from '../../../utils/range-slider-utils';
+import { BlrIconButtonRenderFunction } from '../../icon-button/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrRangeMinMaxSlider extends LitElement {
   static styles = [styleCustom];
 
@@ -217,4 +207,8 @@ export class BlrRangeMinMaxSlider extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrRangeMinMaxSlider);
+}
+
 export type BlrRangeMinMaxSliderType = Omit<BlrRangeMinMaxSlider, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/indexReact.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/indexReact.ts
rename to packages/ui-library/src/components/slider-two-values/range-min-max-slider/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/renderFunction.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/renderFunction.ts
similarity index 72%
rename from packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/renderFunction.ts
rename to packages/ui-library/src/components/slider-two-values/range-min-max-slider/renderFunction.ts
index 3a6ec4e57..9f1662826 100644
--- a/packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/renderFunction.ts
+++ b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrRangeMinMaxSliderType } from '.';
-import { genericBlrComponentRenderer } from '../../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-range-min-max-slider';
 
diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.css.ts b/packages/ui-library/src/components/tab-bar/index.css.ts
similarity index 98%
rename from packages/ui-library/src/components/navigation/tab-bar/index.css.ts
rename to packages/ui-library/src/components/tab-bar/index.css.ts
index 64923472f..272608462 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/index.css.ts
+++ b/packages/ui-library/src/components/tab-bar/index.css.ts
@@ -1,5 +1,5 @@
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const styleCustom = typeSafeNestedCss`
   .panel-wrapper {
diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.stories.ts b/packages/ui-library/src/components/tab-bar/index.stories.ts
similarity index 92%
rename from packages/ui-library/src/components/navigation/tab-bar/index.stories.ts
rename to packages/ui-library/src/components/tab-bar/index.stories.ts
index 974615e43..4e44c60ad 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/index.stories.ts
+++ b/packages/ui-library/src/components/tab-bar/index.stories.ts
@@ -9,14 +9,14 @@ import {
   TabAlignmentVariants,
   TabContentVariants,
   TabVariants,
-} from '../../../globals/constants';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+} from '../../globals/constants';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
 
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
 
 export default {
-  title: 'Design System/Web Components/Navigation/TabBar',
+  title: 'Components/TabBar',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.test.ts b/packages/ui-library/src/components/tab-bar/index.test.ts
similarity index 97%
rename from packages/ui-library/src/components/navigation/tab-bar/index.test.ts
rename to packages/ui-library/src/components/tab-bar/index.test.ts
index 6bc1c595a..6d238200a 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/index.test.ts
+++ b/packages/ui-library/src/components/tab-bar/index.test.ts
@@ -1,11 +1,11 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrTabBarRenderFunction } from './renderFunction';
-import type { BlrTabBarType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
 import { html } from 'lit-html';
+import { BlrTabBarType } from '.';
 
 const sampleParams: BlrTabBarType = {
   theme: 'Light',
diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.ts b/packages/ui-library/src/components/tab-bar/index.ts
similarity index 92%
rename from packages/ui-library/src/components/navigation/tab-bar/index.ts
rename to packages/ui-library/src/components/tab-bar/index.ts
index edcb2508b..7192b5e2f 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/index.ts
+++ b/packages/ui-library/src/components/tab-bar/index.ts
@@ -1,30 +1,28 @@
 /* eslint-disable lit/binding-positions */
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
+import { property, query, queryAll, state } from 'lit/decorators.js';
 import { styleCustom, tabBarDark, tabBarLight } from './index.css';
-import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
 
+import { TAG_NAME } from './renderFunction';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css';
 import {
-  FormSizesType,
-  TabVariantType,
   OverflowVariantTypeStandard,
   OverflowVariantTypeFullWidth,
-  TabAlignmentVariantType,
   IconPositionVariant,
+  TabVariantType,
   TabContentVariantType,
+  TabAlignmentVariantType,
+  FormSizesType,
   SizesType,
-} from '../../../globals/types';
-import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
-import { actionDark, actionLight } from '../../../foundation/semantic-tokens/action.css';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-import { calculateIconName } from '../../../utils/calculate-icon-name';
-import { BlrDividerRenderFunction } from '../../ui/divider/renderFunction';
-import { getComponentConfigToken } from '../../../utils/get-component-config-token';
-
-import { TAG_NAME } from './renderFunction';
+} from '../../globals/types';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrDividerRenderFunction } from '../divider/renderFunction';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
 
-@customElement(TAG_NAME)
 export class BlrTabBar extends LitElement {
   static styles = [styleCustom];
 
@@ -248,4 +246,8 @@ export class BlrTabBar extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrTabBar);
+}
+
 export type BlrTabBarType = Omit<BlrTabBar, keyof LitElement>;
diff --git a/packages/ui-library/src/components/navigation/tab-bar/indexReact.ts b/packages/ui-library/src/components/tab-bar/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/navigation/tab-bar/indexReact.ts
rename to packages/ui-library/src/components/tab-bar/indexReact.ts
diff --git a/packages/ui-library/src/components/navigation/tab-bar/renderFunction.ts b/packages/ui-library/src/components/tab-bar/renderFunction.ts
similarity index 75%
rename from packages/ui-library/src/components/navigation/tab-bar/renderFunction.ts
rename to packages/ui-library/src/components/tab-bar/renderFunction.ts
index 444c4c3cc..cb540e713 100644
--- a/packages/ui-library/src/components/navigation/tab-bar/renderFunction.ts
+++ b/packages/ui-library/src/components/tab-bar/renderFunction.ts
@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit-html';
 import { BlrTabBarType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-tab-bar';
 
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts b/packages/ui-library/src/components/text-button/index.css.ts
similarity index 90%
rename from packages/ui-library/src/components/actions/buttons/text-button/index.css.ts
rename to packages/ui-library/src/components/text-button/index.css.ts
index fd9f9eb9e..d572d7c90 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts
+++ b/packages/ui-library/src/components/text-button/index.css.ts
@@ -1,7 +1,6 @@
-import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
-
-import { componentTokens } from "../../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
-import { semanticTokens } from "../../../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
+import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
+import { semanticTokens } from "../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 const { TextButton } = componentTokens.Actions;
 const { Global, Actions } = semanticTokens;
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts b/packages/ui-library/src/components/text-button/index.stories.ts
similarity index 97%
rename from packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts
rename to packages/ui-library/src/components/text-button/index.stories.ts
index 1d3f5e307..6b890592d 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts
+++ b/packages/ui-library/src/components/text-button/index.stories.ts
@@ -3,11 +3,10 @@ import { html } from 'lit-html';
 import { BlrTextButtonType } from './index';
 import { BlrTextButtonRenderFunction } from './renderFunction';
 import { PureIconKeys } from '@boiler/icons';
-import { ActionSizes, ActionVariants, IconPositionVariant, ButtonDisplayOptions } from '../../../../globals/constants';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
-
+import '../../index';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { ActionVariants, ActionSizes, ButtonDisplayOptions, IconPositionVariant } from '../../globals/constants';
 // this loads the all components instances and registers their html tags
-import '../../../../index';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -40,7 +39,7 @@ const defaultParams: BlrTextButtonType = {
 };
 
 export default {
-  title: 'Design System/Web Components/Actions/Buttons/Text Button',
+  title: 'Components/Text Button',
   argTypes: {
     //Appearance
     variant: {
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.test.ts b/packages/ui-library/src/components/text-button/index.test.ts
similarity index 99%
rename from packages/ui-library/src/components/actions/buttons/text-button/index.test.ts
rename to packages/ui-library/src/components/text-button/index.test.ts
index f2e46d18a..276b1c8a4 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/index.test.ts
+++ b/packages/ui-library/src/components/text-button/index.test.ts
@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrTextButtonRenderFunction } from './renderFunction';
-import type { BlrTextButtonType } from '@boiler/ui-library/dist/';
+import type { BlrTextButtonType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.ts b/packages/ui-library/src/components/text-button/index.ts
similarity index 88%
rename from packages/ui-library/src/components/actions/buttons/text-button/index.ts
rename to packages/ui-library/src/components/text-button/index.ts
index a3a1745b1..2910ac310 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/index.ts
+++ b/packages/ui-library/src/components/text-button/index.ts
@@ -1,28 +1,25 @@
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
-import { actionDark, actionLight } from '../../../../foundation/semantic-tokens/action.css';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css';
 import {
-  ActionSizesType,
-  ActionVariantType,
-  SizesType,
-  FormSizesType,
   IconPositionVariant,
+  ActionVariantType,
+  ActionSizesType,
   ButtonDisplayType,
-} from '../../../../globals/types';
-import { determineLoaderVariant } from '../../../../utils/determine-loader-variant';
-import { BlrIconRenderFunction } from '../../../ui/icon/renderFunction';
-import { calculateIconName } from '../../../../utils/calculate-icon-name';
-import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
-import { BlrLoaderRenderFunction } from '../../../feedback/loader/renderFunction';
-
+  FormSizesType,
+  SizesType,
+} from '../../globals/types';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { determineLoaderVariant } from '../../utils/determine-loader-variant';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { BlrLoaderRenderFunction } from '../loader/renderFunction';
 import { TAG_NAME } from './renderFunction';
 
-import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
-
-@customElement(TAG_NAME)
 export class BlrTextButton extends LitElement {
   static styles = [styleCustom];
 
@@ -176,4 +173,8 @@ export class BlrTextButton extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrTextButton);
+}
+
 export type BlrTextButtonType = Omit<BlrTextButton, keyof LitElement>;
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/indexReact.ts b/packages/ui-library/src/components/text-button/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/actions/buttons/text-button/indexReact.ts
rename to packages/ui-library/src/components/text-button/indexReact.ts
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/renderFunction.ts b/packages/ui-library/src/components/text-button/renderFunction.ts
similarity index 69%
rename from packages/ui-library/src/components/actions/buttons/text-button/renderFunction.ts
rename to packages/ui-library/src/components/text-button/renderFunction.ts
index bcc1dd4d5..8706db2e1 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/renderFunction.ts
+++ b/packages/ui-library/src/components/text-button/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrTextButtonType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-text-button';
 
diff --git a/packages/ui-library/src/components/forms/text-input/index.css.ts b/packages/ui-library/src/components/text-input/index.css.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/text-input/index.css.ts
rename to packages/ui-library/src/components/text-input/index.css.ts
index f12c26673..e0a37a063 100644
--- a/packages/ui-library/src/components/forms/text-input/index.css.ts
+++ b/packages/ui-library/src/components/text-input/index.css.ts
@@ -1,6 +1,6 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
 export const styleCustom = typeSafeNestedCss`
   .blr-text-input {
diff --git a/packages/ui-library/src/components/forms/text-input/index.stories.ts b/packages/ui-library/src/components/text-input/index.stories.ts
similarity index 98%
rename from packages/ui-library/src/components/forms/text-input/index.stories.ts
rename to packages/ui-library/src/components/text-input/index.stories.ts
index e06373200..c382c7be3 100644
--- a/packages/ui-library/src/components/forms/text-input/index.stories.ts
+++ b/packages/ui-library/src/components/text-input/index.stories.ts
@@ -1,13 +1,13 @@
 /* eslint-disable no-console */
 import { BlrTextInputType } from './index';
 import { BlrTextInputRenderFunction } from './renderFunction';
-import { FormSizes, InputTypes } from '../../../globals/constants';
+import { FormSizes, InputTypes } from '../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit-html';
 
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -26,7 +26,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Forms/Text Input',
+  title: 'Components/Text Input',
   argTypes: {
     //Appearance
     size: {
diff --git a/packages/ui-library/src/components/forms/text-input/index.test.ts b/packages/ui-library/src/components/text-input/index.test.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/text-input/index.test.ts
rename to packages/ui-library/src/components/text-input/index.test.ts
index c842aeddd..4eb25b917 100644
--- a/packages/ui-library/src/components/forms/text-input/index.test.ts
+++ b/packages/ui-library/src/components/text-input/index.test.ts
@@ -1,11 +1,11 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrTextInputRenderFunction } from './renderFunction';
-import type { BlrTextInputType } from '@boiler/ui-library/dist/';
+import type { BlrTextInputType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
-import { getRandomString } from '../../../utils/get-random.string';
+import { getRandomString } from '../../utils/get-random.string';
 
 const sampleParams: BlrTextInputType = {
   theme: 'Light',
diff --git a/packages/ui-library/src/components/forms/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts
similarity index 89%
rename from packages/ui-library/src/components/forms/text-input/index.ts
rename to packages/ui-library/src/components/text-input/index.ts
index f23080394..194bda6c5 100644
--- a/packages/ui-library/src/components/forms/text-input/index.ts
+++ b/packages/ui-library/src/components/text-input/index.ts
@@ -1,23 +1,20 @@
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
-import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
+import { formDark, formLight } from '../../foundation/semantic-tokens/form.css';
 import { textInputLight, textInputDark } from './index.css';
-import { InputTypes, FormSizesType, SizesType } from '../../../globals/types';
-import { BlrFormLabelRenderFunction } from '../../internal-components/form-label/renderFunction';
+import { InputTypes, FormSizesType, SizesType } from '../../globals/types';
 import { SizelessIconType } from '@boiler/icons';
-import { calculateIconName } from '../../../utils/calculate-icon-name';
-import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
+import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
+import { BlrFormLabelRenderFunction } from '../form-label/renderFunction';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
 import { TAG_NAME } from './renderFunction';
 
-import { getComponentConfigToken } from '../../../utils/get-component-config-token';
-import { BlrFormCaptionGroupRenderFunction } from '../../internal-components/form-caption-group/renderFunction';
-import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption/renderFunction';
-
-@customElement(TAG_NAME)
 export class BlrTextInput extends LitElement {
   static styles = [styleCustom];
 
@@ -243,4 +240,8 @@ export class BlrTextInput extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrTextInput);
+}
+
 export type BlrTextInputType = Omit<BlrTextInput, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/text-input/indexReact.ts b/packages/ui-library/src/components/text-input/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/text-input/indexReact.ts
rename to packages/ui-library/src/components/text-input/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/text-input/renderFunction.ts b/packages/ui-library/src/components/text-input/renderFunction.ts
similarity index 69%
rename from packages/ui-library/src/components/forms/text-input/renderFunction.ts
rename to packages/ui-library/src/components/text-input/renderFunction.ts
index 01ab3d399..b75cda62f 100644
--- a/packages/ui-library/src/components/forms/text-input/renderFunction.ts
+++ b/packages/ui-library/src/components/text-input/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrTextInputType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-text-input';
 
diff --git a/packages/ui-library/src/components/forms/textarea/index.css.ts b/packages/ui-library/src/components/textarea/index.css.ts
similarity index 87%
rename from packages/ui-library/src/components/forms/textarea/index.css.ts
rename to packages/ui-library/src/components/textarea/index.css.ts
index 3dabdaa7b..a01280401 100644
--- a/packages/ui-library/src/components/forms/textarea/index.css.ts
+++ b/packages/ui-library/src/components/textarea/index.css.ts
@@ -1,7 +1,7 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
-import { semanticTokens } from "../../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
+import { semanticTokens } from "../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
 
 const { SM, MD, LG } = semanticTokens.Forms;
 
diff --git a/packages/ui-library/src/components/forms/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts
similarity index 99%
rename from packages/ui-library/src/components/forms/textarea/index.stories.ts
rename to packages/ui-library/src/components/textarea/index.stories.ts
index c12863a10..b0f998f3f 100644
--- a/packages/ui-library/src/components/forms/textarea/index.stories.ts
+++ b/packages/ui-library/src/components/textarea/index.stories.ts
@@ -2,12 +2,12 @@
 import { html } from 'lit-html';
 import { BlrTextareaType } from './index';
 import { BlrTextareaRenderFunction } from './renderFunction';
-import { FormSizes, Resizes } from '../../../globals/constants';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { PureIconKeys } from '@boiler/icons';
 
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { FormSizes, Resizes } from '../../globals/constants';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -55,7 +55,7 @@ const defaultParams: BlrTextareaType = {
 
 //Main Showcase Storybook Textarea, main argType Table
 export default {
-  title: 'Design System/Web Components/Forms/Text Area',
+  title: 'Components/Text Area',
   argTypes: {
     //Appearance
     theme: {
diff --git a/packages/ui-library/src/components/forms/textarea/index.test.ts b/packages/ui-library/src/components/textarea/index.test.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/textarea/index.test.ts
rename to packages/ui-library/src/components/textarea/index.test.ts
index b23215fa4..929d028b0 100644
--- a/packages/ui-library/src/components/forms/textarea/index.test.ts
+++ b/packages/ui-library/src/components/textarea/index.test.ts
@@ -1,11 +1,9 @@
 import '@boiler/ui-library/dist/';
-
+import { getRandomString } from '../../utils/get-random.string';
 import { BlrTextareaRenderFunction } from './renderFunction';
-import { BlrTextareaType } from './index';
-
 import { fixture, expect } from '@open-wc/testing';
-import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
-import { getRandomString } from '../../../utils/get-random.string';
+import { querySelectorDeep, querySelectorAllDeep } from 'query-selector-shadow-dom';
+import type { BlrTextareaType } from '.';
 
 const sampleParams: BlrTextareaType = {
   theme: 'Light',
diff --git a/packages/ui-library/src/components/forms/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
similarity index 91%
rename from packages/ui-library/src/components/forms/textarea/index.ts
rename to packages/ui-library/src/components/textarea/index.ts
index 556f4810a..68060e2d5 100644
--- a/packages/ui-library/src/components/forms/textarea/index.ts
+++ b/packages/ui-library/src/components/textarea/index.ts
@@ -1,20 +1,17 @@
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { styleCustom, textAreaDark, textAreaLight } from './index.css';
-import { CounterVariantType, FormSizesType, WarningLimits, ResizeType } from '../../../globals/types';
-import { BlrFormLabelRenderFunction } from '../../internal-components/form-label/renderFunction';
-import { SizelessIconType } from '@boiler/icons';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-import { BlrCounterRenderFunction } from '../../internal-components/counter/renderFunction';
-import { BlrFormCaptionGroupRenderFunction } from '../../internal-components/form-caption-group/renderFunction';
-import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
-
-import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption/renderFunction';
-
+import { CounterVariantType, FormSizesType, WarningLimits, ResizeType } from '../../globals/types';
 import { TAG_NAME } from './renderFunction';
+import { SizelessIconType } from '@boiler/icons';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
+import { BlrCounterRenderFunction } from '../counter/renderFunction';
+import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
+import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
+import { BlrFormLabelRenderFunction } from '../form-label/renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrTextarea extends LitElement {
   static styles = [styleCustom];
 
@@ -247,4 +244,8 @@ export class BlrTextarea extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrTextarea);
+}
+
 export type BlrTextareaType = Omit<BlrTextarea, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/textarea/renderFunction.ts b/packages/ui-library/src/components/textarea/renderFunction.ts
similarity index 69%
rename from packages/ui-library/src/components/forms/textarea/renderFunction.ts
rename to packages/ui-library/src/components/textarea/renderFunction.ts
index ef2b332d6..28dc1ea33 100644
--- a/packages/ui-library/src/components/forms/textarea/renderFunction.ts
+++ b/packages/ui-library/src/components/textarea/renderFunction.ts
@@ -1,5 +1,5 @@
 import type { BlrTextareaType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-textarea';
 
diff --git a/packages/ui-library/src/components/forms/toggle-switch/index.css.ts b/packages/ui-library/src/components/toggle-switch/index.css.ts
similarity index 99%
rename from packages/ui-library/src/components/forms/toggle-switch/index.css.ts
rename to packages/ui-library/src/components/toggle-switch/index.css.ts
index b44608821..9ab165b12 100644
--- a/packages/ui-library/src/components/forms/toggle-switch/index.css.ts
+++ b/packages/ui-library/src/components/toggle-switch/index.css.ts
@@ -1,5 +1,5 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
-import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
 export const styleCustom = typeSafeNestedCss/* css */ `
   .blr-label-toggleswitch {
diff --git a/packages/ui-library/src/components/forms/toggle-switch/index.stories.ts b/packages/ui-library/src/components/toggle-switch/index.stories.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/toggle-switch/index.stories.ts
rename to packages/ui-library/src/components/toggle-switch/index.stories.ts
index a2d3299ee..c46ecc96d 100644
--- a/packages/ui-library/src/components/forms/toggle-switch/index.stories.ts
+++ b/packages/ui-library/src/components/toggle-switch/index.stories.ts
@@ -2,11 +2,11 @@
 import { BlrToggleSwitchType } from './index';
 import { BlrToggleSwitchRenderFunction } from './renderFunction';
 import { PureIconKeys } from '@boiler/icons';
-import { FormSizes, IconPositionVariant } from '../../../globals/constants';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { FormSizes, IconPositionVariant } from '../../globals/constants';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit-html';
+import '../../index';
 
-// Shared Style inside the Stories
 const sharedStyles = html`
   <style>
     .stories-toggle-switch {
@@ -42,11 +42,8 @@ const defaultParams: BlrToggleSwitchType = {
   onBlur: logEventType,
 };
 
-// this loads the all components instances and registers their html tags
-import '../../../index';
-
 export default {
-  title: 'Design System/Web Components/Forms/Toggle Switch',
+  title: 'Components/Toggle Switch',
   argTypes: {
     size: {
       name: 'sizeVariant',
diff --git a/packages/ui-library/src/components/forms/toggle-switch/index.test.ts b/packages/ui-library/src/components/toggle-switch/index.test.ts
similarity index 97%
rename from packages/ui-library/src/components/forms/toggle-switch/index.test.ts
rename to packages/ui-library/src/components/toggle-switch/index.test.ts
index b45de02c4..148a5efec 100644
--- a/packages/ui-library/src/components/forms/toggle-switch/index.test.ts
+++ b/packages/ui-library/src/components/toggle-switch/index.test.ts
@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrToggleSwitchRenderFunction } from './renderFunction';
-import type { BlrToggleSwitchType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import { BlrToggleSwitchType } from '.';
 
 const sampleParams: BlrToggleSwitchType = {
   label: 'Toggle Switch Option',
diff --git a/packages/ui-library/src/components/forms/toggle-switch/index.ts b/packages/ui-library/src/components/toggle-switch/index.ts
similarity index 90%
rename from packages/ui-library/src/components/forms/toggle-switch/index.ts
rename to packages/ui-library/src/components/toggle-switch/index.ts
index 3eb9e380f..b4fd72227 100644
--- a/packages/ui-library/src/components/forms/toggle-switch/index.ts
+++ b/packages/ui-library/src/components/toggle-switch/index.ts
@@ -1,24 +1,18 @@
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { SizelessIconType } from '@boiler/icons';
-
-import { BlrFormLabelInlineRenderFunction } from '../../internal-components/form-label/form-label-inline/renderFunction';
-import { FormSizesType, IconPositionVariant } from '../../../globals/types';
-
-import { styleCustom, toggleSwitchDark, toggleSwitchLight } from './index.css';
-import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption/renderFunction';
-import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
-
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
-
+import { formDark, formLight } from '../../foundation/semantic-tokens/form.css';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { TAG_NAME } from './renderFunction';
+import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { calculateIconName } from '../../utils/calculate-icon-name';
+import { getComponentConfigToken } from '../../utils/get-component-config-token';
+import { FormSizesType, IconPositionVariant } from '../../globals/types';
+import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
+import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
+import { styleCustom, toggleSwitchLight, toggleSwitchDark } from './index.css';
 
-import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
-import { calculateIconName } from '../../../utils/calculate-icon-name';
-import { getComponentConfigToken } from '../../../utils/get-component-config-token';
-
-@customElement(TAG_NAME)
 export class BlrToggleSwitch extends LitElement {
   static styles = [styleCustom];
 
@@ -260,4 +254,8 @@ export class BlrToggleSwitch extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrToggleSwitch);
+}
+
 export type BlrToggleSwitchType = Omit<BlrToggleSwitch, keyof LitElement>;
diff --git a/packages/ui-library/src/components/forms/toggle-switch/indexReact.ts b/packages/ui-library/src/components/toggle-switch/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/forms/toggle-switch/indexReact.ts
rename to packages/ui-library/src/components/toggle-switch/indexReact.ts
diff --git a/packages/ui-library/src/components/forms/toggle-switch/renderFunction.ts b/packages/ui-library/src/components/toggle-switch/renderFunction.ts
similarity index 71%
rename from packages/ui-library/src/components/forms/toggle-switch/renderFunction.ts
rename to packages/ui-library/src/components/toggle-switch/renderFunction.ts
index e3891a816..4516c0e66 100644
--- a/packages/ui-library/src/components/forms/toggle-switch/renderFunction.ts
+++ b/packages/ui-library/src/components/toggle-switch/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrToggleSwitchType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-label-toggleswitch';
 
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts b/packages/ui-library/src/components/tooltip-bubble/index.css.ts
similarity index 91%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
rename to packages/ui-library/src/components/tooltip-bubble/index.css.ts
index 8c5cdbb7d..54552c587 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.css.ts
+++ b/packages/ui-library/src/components/tooltip-bubble/index.css.ts
@@ -1,5 +1,5 @@
-import { renderThemedCssStrings } from "../../../../foundation/_tokens-generated/index.pseudo.generated";
-import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
+import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
 
 export const { tokenizedLight: light, tokenizedDark: dark } = renderThemedCssStrings((componentTokens) => {
   const { Tooltip } = componentTokens.Feedback;
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts b/packages/ui-library/src/components/tooltip-bubble/index.stories.ts
similarity index 94%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
rename to packages/ui-library/src/components/tooltip-bubble/index.stories.ts
index 7a8ddc908..3eb5a4b85 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
+++ b/packages/ui-library/src/components/tooltip-bubble/index.stories.ts
@@ -1,13 +1,13 @@
 import { html } from 'lit';
 
-import '../../../../index';
+import '../../index';
 import { BlrTooltipBubbleType } from '.';
 
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 import { BlrTooltipBubbleRenderFunction } from './renderFunction';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
 
 export default {
-  title: 'Design System/Web Components/Feedback/Tooltip/Tooltip Bubble',
+  title: 'Components/Tooltip Bubble',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts b/packages/ui-library/src/components/tooltip-bubble/index.test.ts
similarity index 90%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts
rename to packages/ui-library/src/components/tooltip-bubble/index.test.ts
index 5a3fb4176..2e08a748a 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.test.ts
+++ b/packages/ui-library/src/components/tooltip-bubble/index.test.ts
@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrTooltipBubbleRenderFunction } from './renderFunction';
-import type { BlrTooltipBubbleType } from '@boiler/ui-library/dist/';
+import type { BlrTooltipBubbleType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts b/packages/ui-library/src/components/tooltip-bubble/index.ts
similarity index 86%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
rename to packages/ui-library/src/components/tooltip-bubble/index.ts
index 53db30bf0..6578b9446 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.ts
+++ b/packages/ui-library/src/components/tooltip-bubble/index.ts
@@ -1,11 +1,10 @@
 import { LitElement, css, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { light, dark } from './index.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
-import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 
-@customElement(TAG_NAME)
 export class BlrTooltipBubble extends LitElement {
   static styles = [
     css`
@@ -47,4 +46,8 @@ export class BlrTooltipBubble extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrTooltipBubble);
+}
+
 export type BlrTooltipBubbleType = Omit<BlrTooltipBubble, keyof LitElement>;
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts b/packages/ui-library/src/components/tooltip-bubble/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/indexReact.ts
rename to packages/ui-library/src/components/tooltip-bubble/indexReact.ts
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts b/packages/ui-library/src/components/tooltip-bubble/renderFunction.ts
similarity index 71%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
rename to packages/ui-library/src/components/tooltip-bubble/renderFunction.ts
index fc1ba2675..3fcad1129 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/renderFunction.ts
+++ b/packages/ui-library/src/components/tooltip-bubble/renderFunction.ts
@@ -1,5 +1,5 @@
 import { BlrTooltipBubbleType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-tooltip-bubble';
 
diff --git a/packages/ui-library/src/components/tooltip/index.css.ts b/packages/ui-library/src/components/tooltip/index.css.ts
new file mode 100644
index 000000000..384c62a14
--- /dev/null
+++ b/packages/ui-library/src/components/tooltip/index.css.ts
@@ -0,0 +1,7 @@
+import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
+
+export const styleCustom = typeSafeNestedCss`
+  :host {
+    display: inline-block;
+  }
+`;
diff --git a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts b/packages/ui-library/src/components/tooltip/index.stories.ts
similarity index 96%
rename from packages/ui-library/src/components/feedback/tooltip/index.stories.ts
rename to packages/ui-library/src/components/tooltip/index.stories.ts
index ef1ac7314..fc66a787a 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
+++ b/packages/ui-library/src/components/tooltip/index.stories.ts
@@ -1,10 +1,10 @@
 // this loads the all components instances and registers their html tags
-import '../../../index';
+import '../../index';
 import { html } from 'lit-html';
 import { BlrTooltipType } from './index';
-import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-import { TooltipPlacement } from '../../../globals/constants';
 import { BlrTooltipRenderFunction } from './renderFunction';
+import { Themes } from '../../foundation/_tokens-generated/index.themes';
+import { TooltipPlacement } from '../../globals/constants';
 
 const sharedStyles = html`
   <style>
@@ -43,7 +43,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Feedback/Tooltip/Tooltip',
+  title: 'Components/Tooltip',
   argTypes: {
     theme: {
       options: Themes,
diff --git a/packages/ui-library/src/components/feedback/tooltip/index.test.ts b/packages/ui-library/src/components/tooltip/index.test.ts
similarity index 92%
rename from packages/ui-library/src/components/feedback/tooltip/index.test.ts
rename to packages/ui-library/src/components/tooltip/index.test.ts
index 049659ba7..bb6f62f98 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.test.ts
+++ b/packages/ui-library/src/components/tooltip/index.test.ts
@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrTooltipRenderFunction } from './renderFunction';
-import type { BlrTooltipType } from '@boiler/ui-library/dist/';
+import type { BlrTooltipType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { html } from 'lit';
diff --git a/packages/ui-library/src/components/feedback/tooltip/index.ts b/packages/ui-library/src/components/tooltip/index.ts
similarity index 87%
rename from packages/ui-library/src/components/feedback/tooltip/index.ts
rename to packages/ui-library/src/components/tooltip/index.ts
index 6048e7b13..23334549f 100644
--- a/packages/ui-library/src/components/feedback/tooltip/index.ts
+++ b/packages/ui-library/src/components/tooltip/index.ts
@@ -1,16 +1,16 @@
 import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { Placement as PlacementType } from '@floating-ui/dom';
-import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 import { tooltipPosition } from './tooltip-position';
 import { styleCustom } from './index.css';
 import { TAG_NAME } from './renderFunction';
-import { BlrTooltipBubbleRenderFunction } from './tooltip-bubble/renderFunction';
+
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { BlrTooltipBubbleRenderFunction } from '../tooltip-bubble/renderFunction';
 
 const enterEvents = ['pointerenter', 'focus'];
 const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
-@customElement(TAG_NAME)
 export class BlrTooltip extends LitElement {
   static styles = [styleCustom];
 
@@ -64,4 +64,8 @@ export class BlrTooltip extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrTooltip);
+}
+
 export type BlrTooltipType = Omit<BlrTooltip, keyof LitElement>;
diff --git a/packages/ui-library/src/components/feedback/tooltip/indexReact.ts b/packages/ui-library/src/components/tooltip/indexReact.ts
similarity index 100%
rename from packages/ui-library/src/components/feedback/tooltip/indexReact.ts
rename to packages/ui-library/src/components/tooltip/indexReact.ts
diff --git a/packages/ui-library/src/components/feedback/tooltip/renderFunction.ts b/packages/ui-library/src/components/tooltip/renderFunction.ts
similarity index 75%
rename from packages/ui-library/src/components/feedback/tooltip/renderFunction.ts
rename to packages/ui-library/src/components/tooltip/renderFunction.ts
index 0c026ee42..f4798dc41 100644
--- a/packages/ui-library/src/components/feedback/tooltip/renderFunction.ts
+++ b/packages/ui-library/src/components/tooltip/renderFunction.ts
@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
 import { BlrTooltipType } from '.';
-import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-tooltip';
 
diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-position.ts b/packages/ui-library/src/components/tooltip/tooltip-position.ts
similarity index 95%
rename from packages/ui-library/src/components/feedback/tooltip/tooltip-position.ts
rename to packages/ui-library/src/components/tooltip/tooltip-position.ts
index 0dc4141b9..af2a2dc20 100644
--- a/packages/ui-library/src/components/feedback/tooltip/tooltip-position.ts
+++ b/packages/ui-library/src/components/tooltip/tooltip-position.ts
@@ -7,7 +7,7 @@ import {
   arrow,
   Placement as PlacementType,
 } from '@floating-ui/dom';
-import { componentTokens } from '../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs';
+import { componentTokens } from '../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs';
 
 const {
   Feedback: { Tooltip },
diff --git a/packages/ui-library/src/foundation/icons/index.stories.ts b/packages/ui-library/src/foundation/icons/index.stories.ts
index d04bd340b..ff4c5b0b1 100644
--- a/packages/ui-library/src/foundation/icons/index.stories.ts
+++ b/packages/ui-library/src/foundation/icons/index.stories.ts
@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import { IconKeys } from '@boiler/icons';
-import { BlrIconType } from '../../components/ui/icon/index';
-import { BlrIconRenderFunction } from '../../components/ui/icon/renderFunction';
+import { BlrIconType } from '../../components/icon/index';
+import { BlrIconRenderFunction } from '../../components/icon/renderFunction';
 
 import { Sizes } from '../../globals/constants';
 import { getIconName } from '../../utils/get-icon-name';
diff --git a/packages/ui-library/src/index.ts b/packages/ui-library/src/index.ts
index 41140ad2a..f1fd6592f 100644
--- a/packages/ui-library/src/index.ts
+++ b/packages/ui-library/src/index.ts
@@ -1,57 +1,57 @@
 // Actions
-export { BlrIconButton } from './components/actions/buttons/icon-button';
+export { BlrIconButton } from './components/icon-button';
 
-export { BlrTextButton } from './components/actions/buttons/text-button';
+export { BlrTextButton } from './components/text-button';
 
 // Feedback
-export { BlrLoader } from './components/feedback/loader';
+export { BlrLoader } from './components/loader';
 
-export { BlrTooltipBubble } from './components/feedback/tooltip/tooltip-bubble';
+export { BlrTooltipBubble } from './components/tooltip-bubble';
 
-export { BlrTooltip } from './components/feedback/tooltip';
+export { BlrTooltip } from './components/tooltip';
 
 // Forms
-export { BlrCheckbox } from './components/forms/checkbox';
+export { BlrCheckbox } from './components/checkbox';
 
-export { BlrNumberInput } from './components/forms/number-input';
+export { BlrNumberInput } from './components/number-input';
 
-export { BlrRadio } from './components/forms/radio';
+export { BlrRadio } from './components/radio';
 
-export { BlrRadioGroup } from './components/forms/radio/radio-group';
+export { BlrRadioGroup } from './components/radio-group';
 
-export { BlrSelect } from './components/forms/select';
+export { BlrSelect } from './components/select';
 
-export { BlrRangeSlider } from './components/forms/slider/slider-single-value/range-slider';
+export { BlrRangeSlider } from './components/slider-single-value/range-slider';
 
-export { BlrRangeLegendSlider } from './components/forms/slider/slider-single-value/range-legend-slider';
+export { BlrRangeLegendSlider } from './components/slider-single-value/range-legend-slider';
 
-export { BlrRangeMinMaxSlider } from './components/forms/slider/slider-two-values/range-min-max-slider';
+export { BlrRangeMinMaxSlider } from './components/slider-two-values/range-min-max-slider';
 
-export { BlrRangeLegendMinMaxSlider } from './components/forms/slider/slider-two-values/range-legend-min-max-slider';
+export { BlrRangeLegendMinMaxSlider } from './components/slider-two-values/range-legend-min-max-slider';
 
-export { BlrTextInput } from './components/forms/text-input';
+export { BlrTextInput } from './components/text-input';
 
-export { BlrTextarea } from './components/forms/textarea';
+export { BlrTextarea } from './components/textarea';
 
-export { BlrToggleSwitch } from './components/forms/toggle-switch';
+export { BlrToggleSwitch } from './components/toggle-switch';
 
 // Internal
-export { BlrCounter } from './components/internal-components/counter';
+export { BlrCounter } from './components/counter';
 
-export { BlrFormCaptionGroup } from './components/internal-components/form-caption-group';
+export { BlrFormCaptionGroup } from './components/form-caption-group';
 
-export { BlrFormCaption } from './components/internal-components/form-caption';
+export { BlrFormCaption } from './components/form-caption';
 
-export { BlrFormLabel } from './components/internal-components/form-label';
+export { BlrFormLabel } from './components/form-label';
 
 // Navigation
-export { BlrTabBar } from './components/navigation/tab-bar';
+export { BlrTabBar } from './components/tab-bar';
 
 // UI
-export { BlrButtonGroup } from './components/ui/button-group';
+export { BlrButtonGroup } from './components/button-group';
 
-export { BlrDivider } from './components/ui/divider';
+export { BlrDivider } from './components/divider';
 
-export { BlrIcon } from './components/ui/icon';
+export { BlrIcon } from './components/icon';
 
-export { BlrIconLink } from './components/ui/icon/icon-link';
+export { BlrIconLink } from './components/icon-link';
diff --git a/packages/ui-library/src/links.stories.ts b/packages/ui-library/src/links.stories.ts
index 500761326..0474a2651 100644
--- a/packages/ui-library/src/links.stories.ts
+++ b/packages/ui-library/src/links.stories.ts
@@ -2,7 +2,7 @@
 import { html } from 'lit';
 
 export default {
-  title: 'Design System/Examples',
+  title: 'Examples/Vanilla-JS Example App',
   argTypes: {},
 };