diff --git a/lib/index.ts b/lib/index.ts
index 73abd36dc..a93bd829d 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -52,6 +52,7 @@ export * from '@/components/atoms/RawA';
 export * from '@/components/atoms/RawNav';
 export * from '@/components/atoms/FancySpacingBox';
 export * from '@/components/atoms/DateInput';
+export * from '@/components/atoms/SystemMessage';
 export * from '@/components/atoms/SystemMessageBox';
 export * from '@/components/atoms/NumberInput';
 export * from '@/components/atoms/PasswordInput';
@@ -62,6 +63,7 @@ export * from '@/components/atoms/TitleForComponent';
 export * from '@/components/atoms/ColoredText';
 export * from '@/components/atoms/DisableBox';
 export * from '@/components/atoms/PasswordStrengthMeter';
+export * from '@/components/atoms/DynamicComponentWrapper';
 
 // ---------- Molecules ------- //
 export * from '@/components/molecules/FancyInfoText';
@@ -108,6 +110,8 @@ export * from '@/components/molecules/TabSwitch';
 export * from '@/components/molecules/FancyNavBar';
 export * from '@/components/molecules/LabeledInput';
 export * from '@/components/molecules/Stepper';
+export * from '@/components/atoms/RawButton';
+export * from '@/components/molecules/Fieldset';
 
 // ---------- Organisms ------- //
 export * from '@/components/organisms/FancyButton';
@@ -131,6 +135,7 @@ export * from '@/components/organisms/FancyNumberInput';
 export * from '@/components/organisms/FancyPasswordInput';
 export * from '@/components/organisms/FancyTextInput';
 export * from '@/components/organisms/FancyColorInput';
+export * from '@/components/organisms/FancyListBox';
 
 // ---------- Templates ------- //
 export * from '@/components/templates/FancyInfoCard';
@@ -157,6 +162,8 @@ export * from '@/utils/hooks/useIntersectionObserver';
 export * from '@/utils/hooks/useWindowDimensions';
 export * from '@/design/theme/FancyThemeProvider';
 export * from '@/utils/functions/clampNumber';
+export * from '@/utils/functions/copyToClipBoard';
+export * from '@/utils/functions/calcCSSValuesWithOffset';
 
 // ---------- Design ------- //
 export * from '@/design/designFunctions/calcBorderRadiusOnAlignment';
@@ -182,6 +189,7 @@ export * from '@/design/designFunctions/leftRightCenterToFlexJustify';
 export * from '@/design/designFunctions/getThemeOrValueAsCss';
 export * from '@/design/designFunctions/calcBorderRadiusWithPadding';
 export * from '@/design/theme/theme';
+export * from '@/design/designFunctions/generateThemeColorSteps';
 
 // ---------- Interfaces ------- //
 export * from '@/types';
@@ -198,7 +206,7 @@ export * from '@/components/atoms/RawSlider/TRawSlider.model';
 // ---------- Store ------- //
 export * from '@/design/theme/themeStore';
 export * from '@/design/theme/globalStyle/DefaultStyle';
-export * from '@/design/theme/generateThemeToCssVars';
+export * from '@/design/theme/generateObjectToCssVariables';
 export * from '@/design/theme/applyThemeToDomStyleSheet';
 
 // ---------- SVGs ------- //
diff --git a/src/App.tsx b/src/App.tsx
index bd1a96f0b..9cd7f54f5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,7 +40,7 @@ import SkeletonRoute from '@/Routes/SkeletonRoute/SkeletonRoute';
 import TextGradientRoute from '@/Routes/TextGradientRoute/TextGradientRoute';
 import StepperRoute from '@/Routes/StepperRoute/StepperRoute';
 import PasswordStrengthMeterRoute from '@/Routes/PasswordStrengthMeterRoute/PasswordStrengthMeterRoute';
-
+import { useFancyModalStore } from './Routes/ModalRoute/ModalRoute';
 // const Icon = (
 //   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
 //     <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11.666 1.89c.682 0 1.139.47 1.187 1.107H14v-.11c-.053-1.187-1.024-2-2.342-2-1.604 0-2.518 1.05-2.518 2.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114h-1.147c-.048.615-.497 1.05-1.187 1.05-.839 0-1.318-.62-1.318-1.727v-.742c0-1.112.488-1.754 1.318-1.754zm-6.188.926h.044L6.542 11h1.006L9 5.001H7.818l-.82 4.355h-.056L5.97 5.001h-.94l-.972 4.355h-.053l-.827-4.355H2L3.452 11h1.005l1.02-4.184z" />
@@ -70,13 +70,16 @@ const OwnUl = styled.ul<{ theme: TTheme }>`
 `;
 
 function App() {
+  const closeModal = useFancyModalStore((state) => state.closeModal);
+  const modals = useFancyModalStore((state) => state.modals);
+
   return (
     <div className="App">
       <Router>
         <FancyThemeProvider>
           <DefaultStyle />
           <FancySwipeUpModal appendToDomID="modal" />
-          <FancyModal appendToDomID="modal" />
+          <FancyModal appendToDomID="modal" closeModal={closeModal} modals={modals} />
           <div>
             <nav>
               <OwnUl>
diff --git a/src/Routes/BottonRoute/ButtonRoute.tsx b/src/Routes/BottonRoute/ButtonRoute.tsx
index 2e4ee83f9..a5f66470f 100644
--- a/src/Routes/BottonRoute/ButtonRoute.tsx
+++ b/src/Routes/BottonRoute/ButtonRoute.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
 import { css } from 'styled-components';
+import { SVGChevronLeft } from '@/components/icons';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -54,8 +55,8 @@ export default function ButtonRoute() {
       </DesignArea>
       <DesignArea title="Button Types in wide" style={backgroundColor}>
         <FancyButton icon={Icon} label="Button" themeType="primary" align="left" iconAlign="left" wide />
-        <FancyButton icon={Icon} label="Button" themeType="secondary" align="right" />
-        <FancyButton icon={Icon} label="Button" themeType="accent" />
+        <FancyButton icon={Icon} outlined sizeC="sm" label="Button" themeType="secondary" align="right" />
+        <FancyButton icon={Icon} label="Button" sizeC="sm" themeType="accent" />
         <FancyButton icon={Icon} label="Button" themeType="transparent" align="left" />
       </DesignArea>
       <DesignArea title="Outlined Buttons" style={backgroundColor}>
@@ -99,6 +100,13 @@ export default function ButtonRoute() {
         />
       </DesignArea>
       <DesignArea title="1:1 Buttons" style={backgroundColor}>
+        <FancyButton
+          icon={
+            <span style={{ marginRight: '2px' }}>
+              <SVGChevronLeft />
+            </span>
+          }
+        />
         <FancyButton
           icon={Icon}
           sizeC="md"
diff --git a/src/Routes/CheckboxRoute/CheckboxRoute.tsx b/src/Routes/CheckboxRoute/CheckboxRoute.tsx
index 74823175a..78283070f 100644
--- a/src/Routes/CheckboxRoute/CheckboxRoute.tsx
+++ b/src/Routes/CheckboxRoute/CheckboxRoute.tsx
@@ -96,7 +96,7 @@ export default function CheckboxRoute() {
           </DesignArea>
         </DesignWrapper>
       </Card>
-      <FancyRadioList label="YAAAA MOOIIIN" name="hii" items={itemList} />
+      <FancyRadioList legend="YAAAA MOOIIIN" name="hii" items={itemList} />
     </>
   );
 }
diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
index 0d039531e..3a485361d 100644
--- a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
+++ b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -11,6 +11,8 @@ import PasswordStrengthMeter from '@/components/atoms/PasswordStrengthMeter/Pass
 import styled from 'styled-components';
 import { FancyNumberInput } from '@/components/organisms/FancyNumberInput';
 import { FancyFlexBox } from '@/components/templates/FancyFlexBox';
+import { FancyTabSwitch } from '@/components/organisms/FancyTabSwitch';
+import DynamicComponentWrapper from '@/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -79,27 +81,21 @@ export default function ExperimentalRoute() {
             onClick={() => switchTheme()}
           />
         </DesignArea>
-        <FancyFlexBox align="flex-start" justify="flex-start">
-          <FancyNumberInput
-            underline={false}
-            label="Day"
-            placeholder="DD"
-            maxLength={2}
-            externalStyle={{ maxWidth: '6ch !important' }}
-          />
-          <FancyNumberInput label="Month" placeholder="MM" maxLength={2} externalStyle={{ width: '6ch !important' }} />
-          <FancyNumberInput label="Year" placeholder="YYYY" maxLength={4} externalStyle={{ width: '7ch !important' }} />
-        </FancyFlexBox>
+        <DynamicComponentWrapper wrapperComponent={<a href="https://fui.cool" />}>
+          <p>Test</p>
+        </DynamicComponentWrapper>
+
+        <FancyTabSwitch wide label="test" layer={1} values={defaultProps} />
       </DesignWrapper>
     </>
   );
 }
 
 const defaultProps = [
-  { label: 'hi1', value: 'hi1', id: '1' },
-  { label: 'hi2', value: 'hi2', id: '2' },
-  { label: 'hi3', value: 'hi3', id: '3' },
-  { label: 'hi4', value: 'hi4', id: '4' },
+  { label: 'hi1', value: 'hi1', itemKey: '1' },
+  { label: 'hi2', value: 'hi2', itemKey: '2' },
+  { label: 'hi3', value: 'hi3', itemKey: '3' },
+  { label: 'hi4', value: 'hi4', itemKey: '4' },
 ];
 
 const Box = styled.div`
diff --git a/src/Routes/FancyContentRoute/FancyContentRoute.tsx b/src/Routes/FancyContentRoute/FancyContentRoute.tsx
index bcae62e78..2aabad820 100644
--- a/src/Routes/FancyContentRoute/FancyContentRoute.tsx
+++ b/src/Routes/FancyContentRoute/FancyContentRoute.tsx
@@ -14,7 +14,7 @@ export default function FancyContentRoute() {
           <FancyContent.Icon sizeC="xs" themeType="primary">
             <SVGCheckMark />
           </FancyContent.Icon>
-          <FancyContent.Title themeType="primary">Hiii</FancyContent.Title>
+          <FancyContent.Title>Hiii</FancyContent.Title>
           <FancyContent.Description>Hiii</FancyContent.Description>
         </FancyContent>
 
@@ -22,6 +22,13 @@ export default function FancyContentRoute() {
           <FancyContent.Description>Hiii</FancyContent.Description>
           <FancyContent.Title>Hiii</FancyContent.Title>
         </FancyContent>
+
+        <FancyContent align="center" justify="center" gapBetweenIcon="12px">
+          <FancyContent.Image sizeH="sm">
+            <img src="https://via.placeholder.com/150" alt="placeholder" />
+          </FancyContent.Image>
+          <FancyContent.Title>Hiii</FancyContent.Title>
+        </FancyContent>
       </DesignArea>
     </DesignWrapper>
   );
diff --git a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx
index ae0c043f3..23b31ec2f 100644
--- a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx
+++ b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx
@@ -9,7 +9,7 @@ export default function FancyLayoutRoute() {
   return (
     <DesignWrapper>
       <DesignArea title="Fancy Grid" style={{ height: '100%', width: '100%' }}>
-        <FancyGrid grid={6} gap="1rem">
+        <FancyGrid simpleGrid={6} gap="1rem">
           <FancyGrid.Item gridSpace={3} breakpoints={[{ breakpoint: '500px', gridSize: 6 }]}>
             <FancyButton label="Ji" wide />
           </FancyGrid.Item>
diff --git a/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx b/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
index 736b5de27..541aaf558 100644
--- a/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
+++ b/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
@@ -5,7 +5,16 @@ export default function FancyListBoxRoute() {
   return (
     <DesignWrapper>
       <DesignArea title="FancyListBox">
-        <FancyListBox>
+        <FancyListBox
+          layer={2}
+          sizeC="md"
+          itemSettings={{
+            hoverLayer: 3,
+            layer: 1,
+            themeType: 'primary',
+            sizeC: undefined,
+          }}
+        >
           <span>Moooiin</span>
 
           <span>Moooiin</span>
diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx
index a3f2eb539..ec2d7a8f2 100644
--- a/src/Routes/HeaderRoute/HeaderRoute.tsx
+++ b/src/Routes/HeaderRoute/HeaderRoute.tsx
@@ -122,7 +122,7 @@ export default function HeaderRoute() {
     <section>
       <FancyFlexBox className="hii"></FancyFlexBox>
       <Header externalStyle={{ height: '44px', padding: '0 12px' }}>
-        <FancyGrid grid={8} gap="12px">
+        <FancyGrid simpleGrid={8} gap="12px">
           <FancyGrid.Item gridSpace={1}>
             <FancyGrid.Item.FlexBox
               align="center"
diff --git a/src/Routes/ModalRoute/ModalRoute.tsx b/src/Routes/ModalRoute/ModalRoute.tsx
index e5ea2aeae..7f13e7167 100644
--- a/src/Routes/ModalRoute/ModalRoute.tsx
+++ b/src/Routes/ModalRoute/ModalRoute.tsx
@@ -1,9 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
-
-import FancyModal from '../../components/organisms/FancyModal/FancyModal';
-import { useFancyModalStore } from '../../components/organisms/FancyModal/FancyModal.state';
+import { createFancyModalStore } from '../../components/organisms/FancyModal/createFancyModalStore';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
+import { FancyModalHeadLine } from '@/components/molecules/FancyModalHeadLine';
+import { Typography } from '@/components/atoms/Typography';
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFancyModalStore = createFancyModalStore();
 
 export default function ModalRoute() {
   const createModal = useFancyModalStore((state) => state.openModal);
@@ -13,7 +14,11 @@ export default function ModalRoute() {
     createModal(
       'hi',
       <div>
-        hi
+        <FancyModalHeadLine
+          onXButtonClick={() => closeModal('hi')}
+          title={'Test'}
+          subTitle={<Typography variant="bodytextSm">Test</Typography>}
+        />
         <FancyButton />
       </div>,
       { isCloseable: true }
diff --git a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
index 045e14ad1..726a75324 100644
--- a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
+++ b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
@@ -6,7 +6,7 @@ import { css } from 'styled-components';
 import { Card } from '@/components/molecules/Card';
 
 const switchValues = [
-  { itemKey: '1', value: 'Tab 1', label: 'Tab 1 djkjk dklkdd' },
+  { itemKey: '1', value: 'Tab 1', label: 'Tab 1 ' },
   { itemKey: '2', value: 'Tab 2', label: 'Tab 2' },
   { itemKey: '3', value: 'Tab 3', label: 'Tab 3' },
 ];
@@ -50,19 +50,20 @@ export default function TabSwitchRoute() {
 
   return (
     <>
-      <FancyTabSwitch
+      {/* <FancyTabSwitch
         label="test"
         sizeC="sm"
         values={switchValues1}
         borderRadius={'xxl'}
         currentSelect={test}
         handler={(id: string) => setTest(id)}
-      />
+      /> */}
       <Card layer={1}>
         <DesignWrapper>
           <DesignArea
             title="TabSwitch"
             style={css`
+              width: 500px;
               flex-direction: column;
             `}
           >
@@ -141,14 +142,13 @@ export default function TabSwitchRoute() {
             />
 
             <FancyTabSwitch
-              sizeC="lg"
+              direction="vertical"
+              sizeC="sm"
               label="test"
               wide
               outlined
-              direction="vertical"
               values={switchValues}
-              borderRadius={'xl'}
-              layer={3}
+              layer={5}
               currentSelect={test}
               handler={(id: string) => setTest(id)}
             />
@@ -156,8 +156,9 @@ export default function TabSwitchRoute() {
               label="test"
               wide
               values={switchValues}
+              spacingToEdge="xxs"
+              borderRadius={'md'}
               layer={2}
-              borderRadius={'xl'}
               currentSelect={test}
               handler={(id: string) => setTest(id)}
             />
diff --git a/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts b/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts
index b3702aec6..2d4770ac3 100644
--- a/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts
+++ b/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts
@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 
-type TItem = {
+export type TDropDownSelectItem = {
   value: string;
   key: string;
 };
@@ -8,7 +8,7 @@ type TItem = {
 // the incoming props
 export type TDropDownSelect = {
   align?: 'left' | 'center';
-  values?: TItem[] | string[];
+  values?: TDropDownSelectItem[] | string[];
   value?: string;
   disabled?: boolean;
   placeholder?: string;
diff --git a/src/components/atoms/DropDownSelect/index.ts b/src/components/atoms/DropDownSelect/index.ts
index 9f07a3e19..91dd76fc8 100644
--- a/src/components/atoms/DropDownSelect/index.ts
+++ b/src/components/atoms/DropDownSelect/index.ts
@@ -1 +1,8 @@
 export { default as DropDownSelect } from './DropDownSelect';
+
+export type {
+  TDropDownSelectItem,
+  TDropDownSelect,
+  TDropDownSelectNativeAttrs,
+  TDropDownSelectWithNativeAttrs,
+} from './TDropDownSelect.model';
diff --git a/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx
new file mode 100644
index 000000000..aadf90ef1
--- /dev/null
+++ b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx
@@ -0,0 +1,48 @@
+import DynamicComponentWrapper from './DynamicComponentWrapper'; // Assuming component file is in the same directory
+
+# DynamicComponentWrapper
+
+Wrap React children with a dynamically specified component.
+
+## Overview
+
+This component provides a simple way to encapsulate each child element within a React component that you define. This is particularly useful for adding consistent styling or behavior across a group of children.
+
+## Props
+
+| Prop               | Type                 | Description                                                                                                     |
+| :----------------- | :------------------- | :-------------------------------------------------------------------------------------------------------------- |
+| `children`         | `React.ReactNode`    | The children elements to be wrapped.                                                                            |
+| `wrapperComponent` | `React.ReactElement` | The component to wrap each child. This must be a valid React element (e.g., `<div>`, a custom component, etc.). |
+
+## Usage
+
+```jsx
+import React from 'react';
+import DynamicComponentWrapper from 'fui-fancyui';
+
+const ExampleComponent = () => (
+  <DynamicComponentWrapper WrapperComponent={<Link href="http://fui.cool" />}>Click me!</DynamicComponentWrapper>
+);
+
+export default ExampleComponent;
+```
+
+In the above example:
+
+1. Each child (`<p>Child 1</p>` and `<p>Child 2</p>`) will be wrapped in an `<li>` element.
+2. The `<li>` element has a blue text color style applied to it.
+
+## Example
+
+```jsx
+<DynamicComponentWrapper wrapperComponent={<div style={{ border: '1px solid gray', padding: '10px' }}>}>
+  <h2>This is wrapped text</h2>
+  <p>Another wrapped paragraph.</p>
+</DynamicComponentWrapper>
+```
+
+## Considerations
+
+- **Valid React Elements:** Ensure `wrapperComponent` is a valid React element (not a component function).
+- **Deeply Nested Children:** This component works well for children at a single level. If your children have deep nesting, consider refactoring your child structure or using a more complex recursive approach.
diff --git a/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.tsx b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.tsx
new file mode 100644
index 000000000..2c45fcd54
--- /dev/null
+++ b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.tsx
@@ -0,0 +1,11 @@
+import { cloneElement } from 'react';
+import { TDynamicComponentWrapper } from './TDynamicComponentWrapper.model';
+
+// --------------------------------------------------------------------------- //
+// - This component wrapps every childrens with the passed wrapper component - //
+// --------------------------------------------------------------------------- //
+export default function DynamicComponentWrapper(props: TDynamicComponentWrapper) {
+  const { children, wrapperComponent } = props;
+
+  return cloneElement(wrapperComponent, {}, children);
+}
diff --git a/src/components/atoms/DynamicComponentWrapper/TDynamicComponentWrapper.model.ts b/src/components/atoms/DynamicComponentWrapper/TDynamicComponentWrapper.model.ts
new file mode 100644
index 000000000..f03c14c4a
--- /dev/null
+++ b/src/components/atoms/DynamicComponentWrapper/TDynamicComponentWrapper.model.ts
@@ -0,0 +1,4 @@
+export type TDynamicComponentWrapper = {
+  children: React.ReactNode;
+  wrapperComponent: React.ReactElement;
+};
diff --git a/src/components/atoms/DynamicComponentWrapper/index.ts b/src/components/atoms/DynamicComponentWrapper/index.ts
new file mode 100644
index 000000000..e71bd643b
--- /dev/null
+++ b/src/components/atoms/DynamicComponentWrapper/index.ts
@@ -0,0 +1,3 @@
+export { default as DynamicComponentWrapper } from './DynamicComponentWrapper';
+
+export type { TDynamicComponentWrapper } from './TDynamicComponentWrapper.model';
diff --git a/src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx b/src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx
index e9a8232fa..fbbbc5cc3 100644
--- a/src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx
+++ b/src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { TDynamicElementWrapperWithHTMLAttrs } from './TDynamicElementWrapper.model';
 import { StyledDynamicElementWrapper } from './DynamicElementWrapper.style';
 
diff --git a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts
index 10e682c1b..049f00594 100644
--- a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts
+++ b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.model.ts
@@ -3,13 +3,14 @@ import { CSSProp } from 'styled-components';
 
 import { TCssFiltersTypes } from '@/design/designFunctions/createCssFilterString';
 import { TComponentSizesExtended } from '@/types/TComponentSizes';
+import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
 
 export type TFancyImageWrapper = {
   aspectRatio?: string; // e.g. "16/9"
   children?: React.ReactNode;
   filter?: TCssFiltersTypes;
   externalStyle?: CSSProp;
-  borderRadius?: string;
+  borderRadius?: TThemeArrayOrValueCSS;
   sizeW?: TComponentSizesExtended | 'fit' | string;
   sizeH?: TComponentSizesExtended | 'fit' | string;
   objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
diff --git a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
index 5630a2b28..1fa5ee010 100644
--- a/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
+++ b/src/components/atoms/FancyImageWrapper/FancyImageWrapper.style.tsx
@@ -7,8 +7,7 @@ import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 import { globalSizes } from '@/design/theme/globalSizes';
 import { TComponentSizesExtended } from '@/types/TComponentSizes';
 import { createCssFilterString } from '@/design/designFunctions/createCssFilterString';
-import { checkThemeValue } from '@/design/designFunctions/checkThemeValue';
-import { TBorderRadiusSizes } from '@/types/TBorderRadiusSizes';
+import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
 
 type TStyledImage = TStyledPrefixAndPicker<
   TFancyImageWrapper,
@@ -47,13 +46,13 @@ export const ImageWrapper = styled.div<TStyledImage & { theme: TTheme }>`
   filter: ${({ $filter }) => $filter && createCssFilterString($filter)};
   aspect-ratio: ${({ $aspectRatio }) => ($aspectRatio ? `${$aspectRatio};` : '')};
   line-height: 0;
+  position: relative; // is needed for NextImage to work properly with fill
 
   img {
     width: 100%;
     height: 100%;
     object-fit: ${({ $objectFit }) => ($objectFit ? $objectFit : 'cover')};
-    border-radius: ${({ $borderRadius, theme }) =>
-      checkThemeValue($borderRadius) ? theme.borderRadius[$borderRadius as TBorderRadiusSizes] : $borderRadius};
+    border-radius: ${({ $borderRadius }) => arrayToCssValues($borderRadius, 'borderRadius')};
   }
 
   ${({ $externalStyle }) => $externalStyle};
diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
index 2b21335a9..6ead3e4a8 100644
--- a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
+++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
@@ -33,7 +33,9 @@ export const StyledSVG = styled.i<IStyledSVGAtom & { theme: TTheme }>`
   width: ${({ $sizeC }) => sizes[$sizeC ?? 'xxs']};
   aspect-ratio: 1/1;
   color: ${({ $isActive, $systemMessage, $isPassive, theme, $themeType = 'secondary', $layer = 0 }) =>
-    !$isPassive && calcIconColor({ theme, $isActive, $systemMessage, $layer, $themeType })};
+    $themeType === 'inherit'
+      ? 'inherit'
+      : !$isPassive && calcIconColor({ theme, $isActive, $systemMessage, $layer, $themeType })};
   ${({ $externalStyle }) => $externalStyle};
   will-change: transform;
 
diff --git a/src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts b/src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts
index 91c7d1cf2..ca5958f03 100644
--- a/src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts
+++ b/src/components/atoms/FancySVGAtom/TFancySVGAtom.model.ts
@@ -14,7 +14,7 @@ export type TFancySVGAtom = {
   isPassive?: boolean;
   isActive?: boolean;
   systemMessage?: TUiColorsSystemMessage;
-  themeType?: TUiColorsNotTransparent;
+  themeType?: TUiColorsNotTransparent | 'inherit';
   layer?: TLayer;
 };
 
diff --git a/src/components/atoms/FancyXButton/FancyXButton.model.ts b/src/components/atoms/FancyXButton/FancyXButton.model.ts
index d1b86a5cc..ac6a20c40 100644
--- a/src/components/atoms/FancyXButton/FancyXButton.model.ts
+++ b/src/components/atoms/FancyXButton/FancyXButton.model.ts
@@ -1,5 +1,7 @@
+import { TFancySVGAtom } from '@/components/atoms/FancySVGAtom';
 import { TLayer } from '@/types/TLayer';
 import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
+
 import React from 'react';
 import { CSSProp } from 'styled-components';
 
@@ -7,6 +9,7 @@ export type TFancyXButton = {
   themeType?: TUiColorsNotTransparent;
   layer?: TLayer;
   externalStyle?: CSSProp;
+  sizeC?: TFancySVGAtom['sizeC'];
 };
 
 export type TFancyXButtonNativeAttrs = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'>;
diff --git a/src/components/atoms/FancyXButton/FancyXButton.style.tsx b/src/components/atoms/FancyXButton/FancyXButton.style.tsx
index 439ad11c3..cc54353dc 100644
--- a/src/components/atoms/FancyXButton/FancyXButton.style.tsx
+++ b/src/components/atoms/FancyXButton/FancyXButton.style.tsx
@@ -1,4 +1,4 @@
-import { styled } from 'styled-components';
+import { CSSProp, styled } from 'styled-components';
 
 import { TLayer } from '@/types/TLayer';
 import { TTheme } from '@/types/TTheme';
@@ -11,6 +11,7 @@ interface IStyledFancyXButton {
   $themeType?: TUiColorsNotTransparent;
   $layer?: TLayer;
   theme: TTheme;
+  $externalStyle?: CSSProp;
 }
 export const StyledFancyXButton = styled.button<IStyledFancyXButton>`
   padding: 0;
@@ -25,4 +26,6 @@ export const StyledFancyXButton = styled.button<IStyledFancyXButton>`
     color: ${({ $themeType = 'accent', $layer, theme }) =>
       Color(getBackgroundColor({ $themeType, $layer, theme })).darken(0.5).hex()};
   }
+
+  ${({ $externalStyle }) => $externalStyle}
 `;
diff --git a/src/components/atoms/FancyXButton/FancyXButton.tsx b/src/components/atoms/FancyXButton/FancyXButton.tsx
index f448b0c16..1d9517a25 100644
--- a/src/components/atoms/FancyXButton/FancyXButton.tsx
+++ b/src/components/atoms/FancyXButton/FancyXButton.tsx
@@ -7,11 +7,11 @@ import { SVGXlg } from '@/components/icons/';
 // --------------- The main Component for the X Close Button------- ---------- //
 // --------------------------------------------------------------------------- //
 export default function FancyXButton(props: TFancyXButtonWithHTMLAttrs) {
-  const { themeType, layer, ...htmlProps } = props;
+  const { themeType, layer, externalStyle, sizeC, ...htmlProps } = props;
   //check wich design comes in and add the right color object uiColor or systemMessages  to the button
   return (
-    <StyledFancyXButton $themeType={themeType} $layer={layer} {...htmlProps}>
-      <FancySVGAtom themeType={themeType} layer={layer}>
+    <StyledFancyXButton $themeType={themeType} $layer={layer} $externalStyle={externalStyle} {...htmlProps}>
+      <FancySVGAtom themeType={themeType} layer={layer} sizeC={sizeC}>
         <SVGXlg />
       </FancySVGAtom>
     </StyledFancyXButton>
diff --git a/src/components/atoms/Header/docu/Header.stories.tsx b/src/components/atoms/Header/docu/Header.stories.tsx
index 4de4659da..f8112e564 100644
--- a/src/components/atoms/Header/docu/Header.stories.tsx
+++ b/src/components/atoms/Header/docu/Header.stories.tsx
@@ -101,7 +101,7 @@ export const Primary: Story = {
 export const Advancedheader: Story = {
   render: (args) => (
     <Header {...args} externalStyle={{ height: '44px', padding: '0 12px' }}>
-      <FancyGrid grid={8} gap="12px">
+      <FancyGrid simpleGrid={8} gap="12px">
         <FancyGrid.Item gridSpace={2}>
           <FancyGrid.Item.FlexBox align="center" justify="flex-start" className={'mooiiin'}>
             <RawA style={{ height: '100%' }} href="https://fui.cool">
diff --git a/src/components/atoms/NumberInput/NumberInput.tsx b/src/components/atoms/NumberInput/NumberInput.tsx
index 6b162d210..2674a5cbb 100644
--- a/src/components/atoms/NumberInput/NumberInput.tsx
+++ b/src/components/atoms/NumberInput/NumberInput.tsx
@@ -52,9 +52,7 @@ const NumberInput = forwardRef<HTMLInputElement, TNumberInputWithNativeAttrs>((p
       $layer={layer}
       max={max}
       onChange={handleChange}
-      onKeyDown={(e) => {
-        handleKeyDown(e);
-      }}
+      onKeyDown={handleKeyDown}
       $externalStyle={externalStyle}
       $width={inputWidth}
       $align={align}
diff --git a/src/components/atoms/SimpleDialog/SimpleDialog.style.ts b/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
index c22337c88..fb104cca8 100644
--- a/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
+++ b/src/components/atoms/SimpleDialog/SimpleDialog.style.ts
@@ -15,14 +15,14 @@ type TStyledDialog = {
 
 export const StyledDialog = styled(animated.div)<TStyledDialog>`
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: ${({ theme }) => theme.spacing.xl};
+  top: calc(50vh + env(safe-area-inset-bottom));
+  left: 50vw;
+  transform: translate(-50vh, -50vw);
+  padding: ${({ theme }) => theme.spacing.lg};
   border-radius: ${({ theme }) => theme.borderRadius.lg};
   border: none;
-  width: 70%;
-  max-height: 85%;
+  width: 80%;
   ${({ theme, $themeType, $layer = 1 }) => getColorsForComponent({ theme, $themeType, $layer })}
   z-index: 1000;
+  outline: none;
 `;
diff --git a/src/components/atoms/SystemMessage/SystemMessage.tsx b/src/components/atoms/SystemMessage/SystemMessage.tsx
index cffbd03fe..dc10f9278 100644
--- a/src/components/atoms/SystemMessage/SystemMessage.tsx
+++ b/src/components/atoms/SystemMessage/SystemMessage.tsx
@@ -1,14 +1,23 @@
 import { StyledSystemMessageWrapper } from '@/components/atoms/SystemMessage/SystemMessage.style';
 import { Typography } from '@/components/atoms/Typography';
 
-import { TSystemMessage } from '@/components/atoms/SystemMessage/TSystemMassage.model';
+import { TSystemMessageWithHTMLAttrs } from '@/components/atoms/SystemMessage/TSystemMassage.model';
 import { TTypography } from '@/components/atoms/Typography/Typography.model';
 
 // --------------------------------------------------------------------------- //
 // ------- Only a SystemMessage(Text) that renders in different colors ------- //
 // --------------------------------------------------------------------------- //
-export default function SystemMessage(props: TSystemMessage & { textSettings?: TTypography }) {
-  const { themeType, layer, systemMessageState, children, textSettings, ownTypographyComponent, externalStyle } = props;
+export default function SystemMessage(props: TSystemMessageWithHTMLAttrs & { textSettings?: TTypography }) {
+  const {
+    themeType,
+    layer,
+    systemMessageState,
+    children,
+    textSettings,
+    ownTypographyComponent,
+    externalStyle,
+    ...htmlProps
+  } = props;
 
   return (
     <StyledSystemMessageWrapper
@@ -16,6 +25,7 @@ export default function SystemMessage(props: TSystemMessage & { textSettings?: T
       $layer={layer}
       $systemMessageState={systemMessageState}
       $externalStyle={externalStyle}
+      {...htmlProps}
     >
       {!ownTypographyComponent && (
         <Typography variant="subTextFootnote" tabIndex={-1} lineHeight={1} {...textSettings}>
diff --git a/src/components/atoms/SystemMessage/TSystemMassage.model.ts b/src/components/atoms/SystemMessage/TSystemMassage.model.ts
index 3bcc7e55e..b2685496f 100644
--- a/src/components/atoms/SystemMessage/TSystemMassage.model.ts
+++ b/src/components/atoms/SystemMessage/TSystemMassage.model.ts
@@ -12,3 +12,7 @@ export type TSystemMessage = {
   ownTypographyComponent?: boolean;
   externalStyle?: CSSProp;
 };
+
+export type TSystemMessageHTMLAttrs = React.HTMLAttributes<HTMLSpanElement>;
+
+export type TSystemMessageWithHTMLAttrs = TSystemMessage & TSystemMessageHTMLAttrs;
diff --git a/src/components/atoms/SystemMessage/index.ts b/src/components/atoms/SystemMessage/index.ts
index 731bbaf00..37d2392c0 100644
--- a/src/components/atoms/SystemMessage/index.ts
+++ b/src/components/atoms/SystemMessage/index.ts
@@ -1,2 +1,3 @@
 export { default as SystemMessage } from './SystemMessage';
-export type { TSystemMessage } from './TSystemMassage.model';
+
+export type { TSystemMessage, TSystemMessageHTMLAttrs, TSystemMessageWithHTMLAttrs } from './TSystemMassage.model';
diff --git a/src/components/atoms/TitleForComponent/TTitleForComponent.model.ts b/src/components/atoms/TitleForComponent/TTitleForComponent.model.ts
index 92de9373f..288848f4d 100644
--- a/src/components/atoms/TitleForComponent/TTitleForComponent.model.ts
+++ b/src/components/atoms/TitleForComponent/TTitleForComponent.model.ts
@@ -7,5 +7,5 @@ export type TTitleForComponent = {
   children?: ReactNode;
   gap?: TSpacings;
   title?: TTypography | ReactNode;
-  titleAlign?: TTextAlignLC;
+  align?: TTextAlignLC;
 };
diff --git a/src/components/atoms/TitleForComponent/TitleForComponent.stories.tsx b/src/components/atoms/TitleForComponent/TitleForComponent.stories.tsx
index 502dc3a1e..1be44a717 100644
--- a/src/components/atoms/TitleForComponent/TitleForComponent.stories.tsx
+++ b/src/components/atoms/TitleForComponent/TitleForComponent.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
   },
   // Define arguments for the story
   argTypes: {
-    titleAlign: {
+    align: {
       description: 'The alignment of the Title.',
       control: { type: 'select' },
       type: { name: 'string', required: false },
@@ -68,6 +68,6 @@ export const Primary: Story = {
       children: 'This is a text input',
     },
     gap: 'xs',
-    titleAlign: 'left',
+    align: 'left',
   },
 };
diff --git a/src/components/atoms/TitleForComponent/TitleForComponent.tsx b/src/components/atoms/TitleForComponent/TitleForComponent.tsx
index 4ebd18123..183a0a6c1 100644
--- a/src/components/atoms/TitleForComponent/TitleForComponent.tsx
+++ b/src/components/atoms/TitleForComponent/TitleForComponent.tsx
@@ -9,11 +9,11 @@ import { TTitleForComponent } from './TTitleForComponent.model';
 // ------ This Component Wrapps only the component and adds a Wrapper -------- //
 // --------------------------------------------------------------------------- //
 export default function TitleForComponent(props: TTitleForComponent) {
-  const { children, title, titleAlign, gap = 'xs' } = props;
+  const { children, title, align, gap = 'xs' } = props;
 
   return (
     <Wrapper $spacing={gap}>
-      {title && <TitleWrapper $align={titleAlign}>{getCorrectTitle(title)}</TitleWrapper>}
+      {title && <TitleWrapper $align={align}>{getCorrectTitle(title)}</TitleWrapper>}
       {children}
     </Wrapper>
   );
diff --git a/src/components/atoms/Typography/Typography.model.ts b/src/components/atoms/Typography/Typography.model.ts
index e8aa5bc62..912c4c94f 100644
--- a/src/components/atoms/Typography/Typography.model.ts
+++ b/src/components/atoms/Typography/Typography.model.ts
@@ -13,6 +13,7 @@ export type TTypography = {
   externalStyle?: CSSProp;
   htmlFor?: string;
   themeType?: TUiColorsNotTransparent;
+  textAlign?: 'left' | 'center' | 'right';
   layer?: TLayer;
 } & Omit<React.HTMLAttributes<HTMLElement>, 'style'> &
   Omit<TgenerateFontVariants, 'themeFonts'>;
diff --git a/src/components/atoms/Typography/Typography.style.tsx b/src/components/atoms/Typography/Typography.style.tsx
index d640ad181..c27fe4364 100644
--- a/src/components/atoms/Typography/Typography.style.tsx
+++ b/src/components/atoms/Typography/Typography.style.tsx
@@ -13,10 +13,14 @@ export type TStyledComponentProps = {
 };
 
 // Base styled component for common styles
-export type TGenerateStyle = TStyledPrefixAndPicker<TTypography, 'themeType' | 'layer' | 'externalStyle'> &
+export type TGenerateStyle = TStyledPrefixAndPicker<
+  TTypography,
+  'themeType' | 'layer' | 'externalStyle' | 'textAlign'
+> &
   TStyledComponentProps;
 const BaseStyledComponent = styled.span<TStyledComponentProps & TGenerateStyle & { theme: TTheme }>`
   color: ${({ theme, $themeType, $layer = 0 }) => $themeType && getBackgroundColor({ theme, $themeType, $layer })};
+  ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign};`}
   ${({ $variant }) => $variant};
   ${({ $externalStyle }) => $externalStyle}
 `;
diff --git a/src/components/atoms/Typography/Typography.tsx b/src/components/atoms/Typography/Typography.tsx
index bbc61c1ae..7d5e5944b 100644
--- a/src/components/atoms/Typography/Typography.tsx
+++ b/src/components/atoms/Typography/Typography.tsx
@@ -20,6 +20,7 @@ export default function Typography(props: TTypography) {
     lineHeight,
     fontWeight,
     letterSpacing,
+    textAlign,
     ...htmlProps
   } = props;
   // get the theme font sizes
@@ -33,6 +34,7 @@ export default function Typography(props: TTypography) {
 
   return (
     <ComponentElement
+      $textAlign={textAlign}
       $variant={fontVariants[variant]}
       $themeType={themeType}
       $layer={layer}
diff --git a/src/components/molecules/BottomBarIcon/sizeSettings.ts b/src/components/molecules/BottomBarIcon/sizeSettings.ts
index ca71442bc..3d132b201 100644
--- a/src/components/molecules/BottomBarIcon/sizeSettings.ts
+++ b/src/components/molecules/BottomBarIcon/sizeSettings.ts
@@ -1,8 +1,8 @@
-import { TSpacings } from '@/types/TSpacings';
 import { TSizeSettings } from '@/types/TSizeSettings';
+import { TGlobalElementSizes } from '@/types/TGlobalElementSizes';
 
 type TSizeObj = {
-  sizeIcon: TSpacings;
+  sizeIcon: TGlobalElementSizes;
 };
 
 export const sizeSettings: TSizeSettings<TSizeObj> = {
diff --git a/src/components/molecules/Button/Button.style.tsx b/src/components/molecules/Button/Button.style.tsx
index 52bd8590e..7a7e24760 100644
--- a/src/components/molecules/Button/Button.style.tsx
+++ b/src/components/molecules/Button/Button.style.tsx
@@ -12,7 +12,6 @@ import { RawButton } from '@/components/atoms/RawButton';
 import { sizeSettings } from '@/components/molecules/Button/sizeSettings';
 
 export const ButtonStyle = styled.span<IGenerateThemeDesignForComponent & TStyledPrefixAndPicker<TButton>>`
-  display: inline-flex;
   height: fit-content;
   border: none;
   cursor: pointer;
@@ -32,7 +31,7 @@ export const ButtonStyle = styled.span<IGenerateThemeDesignForComponent & TStyle
   ${({ $sizeC, $borderRadius }) =>
     $borderRadius !== false && generateBorderRadiusForComponent({ sizeC: $sizeC, borderRadius: $borderRadius })};
 
-  ${({ $sizeC, $noSize }) => !$noSize && generateButtonSizeAndPadding($sizeC ?? 'md', true)}
+  ${({ $sizeC, $noSize, $outlined }) => !$noSize && generateButtonSizeAndPadding($sizeC ?? 'md', true, $outlined)}
 
   font-size: ${({ $sizeC, theme }) => theme.fontSizes[sizeSettings[$sizeC ?? 'md'].fontSize].fontSize};
   font-weight: bold;
diff --git a/src/components/molecules/Button/Button.tsx b/src/components/molecules/Button/Button.tsx
index e20953602..ff91bdfdd 100644
--- a/src/components/molecules/Button/Button.tsx
+++ b/src/components/molecules/Button/Button.tsx
@@ -20,6 +20,7 @@ export default function Button(props: TButtonWithNativeAttrs) {
     textHover,
     notAButton,
     noSize,
+    className,
     ...htmlProps
   } = props;
 
@@ -37,6 +38,7 @@ export default function Button(props: TButtonWithNativeAttrs) {
       $textHover={textHover}
       $disabled={disabled}
       $noSize={noSize}
+      className={notAButton ? className : undefined}
     >
       {children}
     </ButtonStyle>
@@ -47,7 +49,7 @@ export default function Button(props: TButtonWithNativeAttrs) {
       {notAButton ? (
         <Button {...htmlProps} />
       ) : (
-        <StyledButton $wide={wide} {...htmlProps} disabled={disabled}>
+        <StyledButton $wide={wide} className={className} {...htmlProps} disabled={disabled}>
           <Button />
         </StyledButton>
       )}
diff --git a/src/components/molecules/Button/utils/generateButtonSizeAndPadding.ts b/src/components/molecules/Button/utils/generateButtonSizeAndPadding.ts
index b715cd38a..f4ff06e5b 100644
--- a/src/components/molecules/Button/utils/generateButtonSizeAndPadding.ts
+++ b/src/components/molecules/Button/utils/generateButtonSizeAndPadding.ts
@@ -3,8 +3,28 @@ import { css } from 'styled-components';
 import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
 import { TComponentSizes } from '@/types/TComponentSizes';
 import { sizeSettings } from '../sizeSettings';
+import { calcCSSValuesWithOffset } from '@/utils/functions/calcCSSValuesWithOffset';
+
+export const generateButtonSizeAndPadding = (
+  sizeC: TComponentSizes,
+  spacingLeftRightx2?: boolean,
+  outlined?: boolean
+) => {
+  // if the button is outlined, we need to shrink the padding by 2px
+  if (outlined) {
+    const generatedPadding = arrayToCssValues(
+      spacingLeftRightx2 ? sizeSettings[sizeC].padding : sizeSettings[sizeC].padding[0],
+      'spacing'
+    );
+
+    if (generatedPadding) {
+      const shrinkedPaddingWithBorder = calcCSSValuesWithOffset(generatedPadding, -2);
+      return css`
+        padding: ${shrinkedPaddingWithBorder};
+      `;
+    }
+  }
 
-export const generateButtonSizeAndPadding = (sizeC: TComponentSizes, spacingLeftRightx2?: boolean) => {
   return css`
     padding: ${arrayToCssValues(
       spacingLeftRightx2 ? sizeSettings[sizeC].padding : sizeSettings[sizeC].padding[0],
diff --git a/src/components/molecules/FancyContent/FancyContent.tsx b/src/components/molecules/FancyContent/FancyContent.tsx
index a8c563304..30d10bf6c 100644
--- a/src/components/molecules/FancyContent/FancyContent.tsx
+++ b/src/components/molecules/FancyContent/FancyContent.tsx
@@ -5,6 +5,7 @@ import { TFancyContentHTMLAttrs } from './FancyContent.model';
 import FancyContentIcon from '@/components/molecules/FancyContent/utils/FancyContentIcon';
 import FancyContentTitle from '@/components/molecules/FancyContent/utils/FancyContentText';
 import FancyContentDescription from '@/components/molecules/FancyContent/utils/FancyContentDescription';
+import FancyContentImage from '@/components/molecules/FancyContent/utils/FancyContentImage';
 
 // --------------------------------------------------------------------------- //
 // ------- The conent Components handles the Content of The componets -------- //
@@ -31,7 +32,7 @@ function FancyContent(props: TFancyContentHTMLAttrs) {
 
   React.Children.forEach(children, (child) => {
     if (React.isValidElement(child)) {
-      if (child.type === FancyContent.Icon) {
+      if (child.type === FancyContent.Icon || child.type === FancyContent.Image) {
         iconElement = child;
       } else {
         contentGroup.push(child);
@@ -74,6 +75,7 @@ function FancyContent(props: TFancyContentHTMLAttrs) {
 }
 
 // Link the subcomponents to the main component
+FancyContent.Image = FancyContentImage;
 FancyContent.Icon = FancyContentIcon;
 FancyContent.Title = FancyContentTitle;
 FancyContent.Description = FancyContentDescription;
diff --git a/src/components/molecules/FancyContent/docu/FancyContent.mdx b/src/components/molecules/FancyContent/docu/FancyContent.mdx
index b34e71822..351e4875e 100644
--- a/src/components/molecules/FancyContent/docu/FancyContent.mdx
+++ b/src/components/molecules/FancyContent/docu/FancyContent.mdx
@@ -54,6 +54,8 @@ function ExampleComponent() {
 
 <Canvas />
 
+<Canvas of={FancyContentStories.WithImage} />
+
 ## Component Properties
 
 <Controls />
diff --git a/src/components/molecules/FancyContent/docu/FancyContent.stories.tsx b/src/components/molecules/FancyContent/docu/FancyContent.stories.tsx
index b15047cc8..bf457647e 100644
--- a/src/components/molecules/FancyContent/docu/FancyContent.stories.tsx
+++ b/src/components/molecules/FancyContent/docu/FancyContent.stories.tsx
@@ -106,3 +106,15 @@ export const WithAllProps: Story = {
     directionTextGroup: 'column',
   },
 };
+
+export const WithImage: Story = {
+  render: (args) => (
+    <FancyContent {...args} align="center" justify="center">
+      <FancyContent.Image>
+        <img src="https://via.placeholder.com/150" alt="placeholder" />
+      </FancyContent.Image>
+      <FancyContent.Title>Text</FancyContent.Title>
+    </FancyContent>
+  ),
+  args: {},
+};
diff --git a/src/components/molecules/FancyContent/utils/FancyContentImage.tsx b/src/components/molecules/FancyContent/utils/FancyContentImage.tsx
new file mode 100644
index 000000000..dc3c66b2f
--- /dev/null
+++ b/src/components/molecules/FancyContent/utils/FancyContentImage.tsx
@@ -0,0 +1,23 @@
+import { FancyImageWrapper, TFancyImageWrapperWithNativeAttrs } from '@/components/atoms/FancyImageWrapper';
+
+export default function FancyContentImage(props: TFancyImageWrapperWithNativeAttrs) {
+  const {
+    aspectRatio,
+    borderRadius = 'complete',
+    sizeH = 'sm',
+    children,
+    objectFit = 'cover',
+    ...wrapperProps
+  } = props;
+  return (
+    <FancyImageWrapper
+      sizeH={sizeH}
+      aspectRatio={aspectRatio}
+      borderRadius={borderRadius}
+      objectFit={objectFit}
+      {...wrapperProps}
+    >
+      {children}
+    </FancyImageWrapper>
+  );
+}
diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
index 681951463..f10bc742c 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts
@@ -1,8 +1,15 @@
+import React from 'react';
+import { TFancyLine } from '@/components/atoms/FancyLine';
+import { TSpacings } from '@/types/TSpacings';
+
 export type TFancyModalHeadLine = {
-  title?: string;
-  subTitle?: string;
   alignCenter?: boolean;
-  hr?: boolean;
+  title?: string | React.ReactNode;
+  subTitle?: string | React.ReactNode;
+  gapBetweenText?: TSpacings;
+  hr?: TFancyLine;
+  onXButtonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
-export type TFancyModalHeadLineWithHTMLProps = TFancyModalHeadLine & React.HTMLProps<HTMLDivElement>;
+export type TFancyModalHeadLineWithHTMLProps = TFancyModalHeadLine &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
index b57807376..b4b9db787 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.style.tsx
@@ -1,16 +1,41 @@
-import { TTheme } from '@/types/TTheme';
 import { styled } from 'styled-components';
 
-export const StyledHeadLine = styled.div<{ $alignCenter?: boolean; theme: TTheme }>`
+import { TSpacings } from '@/types/TSpacings';
+import { TTheme } from '@/types/TTheme';
+import { TFancyModalHeadLine } from './FancyModalHeadLine.model';
+import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
+
+export const StyledHeadLine = styled.div<{ theme: TTheme; $gap?: TSpacings }>`
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  gap: ${({ theme }) => theme.spacing.xxs};
-  align-items: ${({ $alignCenter }) => ($alignCenter ? 'center' : 'flex-start')};
 
   hr {
     margin-top: ${({ theme }) => theme.spacing.xs};
     width: 100%;
   }
 `;
+
+type TStyledHeadLineTitles = TStyledPrefixAndPicker<TFancyModalHeadLine, 'alignCenter' | 'gapBetweenText'>;
+export const StyledHeadLineTitles = styled.span<TStyledHeadLineTitles & { theme: TTheme }>`
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ $alignCenter }) => ($alignCenter ? 'center' : 'flex-start')};
+  gap: ${({ theme, $gapBetweenText }) => $gapBetweenText && theme.spacing[$gapBetweenText || 'xxs']};
+  padding: ${({ $alignCenter, theme }) => ($alignCenter ? `0 ${theme.spacing.xl}` : `0 ${theme.spacing.xl} 0 0 `)};
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+export const HeadLineWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  position: relative;
+`;
+
+export const IconWrapper = styled.span<{ theme: TTheme }>`
+  position: absolute;
+  right: ${({ theme }) => theme.spacing.xs};
+  top: ${({ theme }) => theme.spacing.xs};
+`;
diff --git a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
index 2cc9df721..4e191d701 100644
--- a/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
+++ b/src/components/molecules/FancyModalHeadLine/FancyModalHeadLine.tsx
@@ -1,20 +1,67 @@
+import React from 'react';
 import { Typography } from '@/components/atoms/Typography';
 import { FancyLine } from '@/components/atoms/FancyLine';
 
-import { TFancyModalHeadLine } from './FancyModalHeadLine.model';
-import { StyledHeadLine } from './FancyModalHeadLine.style';
+import { TFancyModalHeadLine, TFancyModalHeadLineWithHTMLProps } from './FancyModalHeadLine.model';
+import { HeadLineWrapper, StyledHeadLine, StyledHeadLineTitles, IconWrapper } from './FancyModalHeadLine.style';
+import { FancyXButton } from '@/components/atoms/FancyXButton';
 
 // --------------------------------------------------------------------------- //
 // -------- The main HeadLineComponent for the heading for the modals -------- //
 // --------------------------------------------------------------------------- //
-export default function FancyModalHeadLine(props: TFancyModalHeadLine) {
-  const { title, subTitle, alignCenter = true, hr = true, ...htmlProps } = props;
+export default function FancyModalHeadLine(props: TFancyModalHeadLineWithHTMLProps) {
+  const { title, subTitle, alignCenter = false, hr = {}, gapBetweenText = 'xxs', onXButtonClick, ...htmlProps } = props;
+
+  const TitleReactNode = createTitleNode(title);
+  const SubTitleReactNode = createSubtitleNode(subTitle);
 
   return (
-    <StyledHeadLine $alignCenter={alignCenter} {...htmlProps}>
-      {title && <Typography variant="bodytextLg">{title}</Typography>}
-      {subTitle && <Typography variant="bodytextSm">{subTitle}</Typography>}
+    <StyledHeadLine {...htmlProps}>
+      <HeadLineWrapper>
+        <StyledHeadLineTitles $gapBetweenText={gapBetweenText} $alignCenter={alignCenter}>
+          {title && TitleReactNode}
+          {subTitle && SubTitleReactNode}
+        </StyledHeadLineTitles>
+        <IconWrapper>
+          <FancyXButton onClick={onXButtonClick && onXButtonClick} />
+        </IconWrapper>
+      </HeadLineWrapper>
       {hr && (title || subTitle) && <FancyLine direction="horizontal" />}
     </StyledHeadLine>
   );
 }
+
+function checkForValidReactNode(node?: React.ReactNode | string): node is React.ReactNode {
+  if (!node) return false;
+  if (React.isValidElement(node)) return true;
+
+  return false;
+}
+
+function createTitleNode(title: TFancyModalHeadLine['title']) {
+  if (title && typeof title === 'string') {
+    return (
+      <Typography variant="bodytextLg" fontWeight="bold">
+        {title}
+      </Typography>
+    );
+  }
+
+  if (checkForValidReactNode(title)) return title;
+
+  return null;
+}
+
+function createSubtitleNode(subTitle: TFancyModalHeadLine['subTitle']) {
+  if (subTitle && typeof subTitle === 'string') {
+    return (
+      <Typography variant="bodytextSm" fontWeight="bold">
+        {subTitle}
+      </Typography>
+    );
+  }
+
+  if (checkForValidReactNode(subTitle)) return subTitle;
+
+  return null;
+}
diff --git a/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx b/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
index 75149690c..c5add1bf2 100644
--- a/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
+++ b/src/components/molecules/FancyModalHeadLine/docu/FancyModalHeadLine.stories.tsx
@@ -22,22 +22,38 @@ const meta = {
       },
     },
     title: {
-      description: 'The main title text to be displayed. If not provided, no title will be shown.',
+      description:
+        'The main title text to be displayed. If not provided, no title will be shown. It Supports React nodes, we recomend to use the Typography as prop.',
       control: {
         type: 'text',
       },
     },
     subTitle: {
-      description: 'The subtitle text to be displayed beneath the title. If not provided, no subtitle will be shown.',
+      description:
+        'The subtitle text to be displayed beneath the title. If not provided, no subtitle will be shown. It Supports React nodes, we recomend to use the Typography as prop',
       control: {
         type: 'text',
       },
     },
     hr: {
       description:
-        'Determines whether a decorative horizontal rule (`<hr>`) should be displayed beneath the title and subtitle. Defaults to `true`.',
+        'Determines whether a decorative horizontal rule (`<hr>`) should be displayed beneath the title and subtitle. FancyLine Props can be passed here.',
       control: {
-        type: 'boolean',
+        type: 'object',
+      },
+    },
+    onXButtonClick: {
+      description:
+        'Callback function that is triggered when the X button is clicked. If not provided, the X button will not be displayed.',
+      control: {
+        type: 'function',
+      },
+    },
+    gapBetweenText: {
+      description:
+        'The amount of space between the title and subtitle. This can be set to any of the predefined spacings in the theme. Defaults to `xxs`.',
+      control: {
+        type: 'select',
       },
     },
   },
@@ -53,6 +69,6 @@ export const Primary: Story = {
     alignCenter: true,
     title: 'Title',
     subTitle: 'SubTitle',
-    hr: true,
+    hr: {},
   },
 };
diff --git a/src/components/molecules/FancyTabSwitchButton/TFancyTabSwitchButton.model.ts b/src/components/molecules/FancyTabSwitchButton/TFancyTabSwitchButton.model.ts
index 529284a5e..4e45e6dda 100644
--- a/src/components/molecules/FancyTabSwitchButton/TFancyTabSwitchButton.model.ts
+++ b/src/components/molecules/FancyTabSwitchButton/TFancyTabSwitchButton.model.ts
@@ -4,6 +4,8 @@ import { CSSProp } from 'styled-components';
 import { TComponentSizes } from '@/types/TComponentSizes';
 import { TLayer } from '@/types/TLayer';
 import { TUiColorsMain } from '@/types/TUiColorsMain';
+import { TUiColorsMainAndAccent } from '@/types/TUiColorsMainAndAccent';
+import { TTextAlignLR } from '@/types/TTextAlignLR';
 
 export type TTabSwitchDetailsLabelIcon = {
   itemKey: string;
@@ -21,9 +23,9 @@ export type TTabSwitchButton = {
   selected: boolean;
   onClick?: (key: string) => void;
   themeType?: TUiColorsMain;
-  activeTextThemeType?: TUiColorsMain;
+  activeTextThemeType?: TUiColorsMainAndAccent;
   layer?: TLayer;
-  iconAlign?: 'left' | 'right';
+  iconAlign?: TTextAlignLR;
   sizeC?: TComponentSizes;
   externalStyle?: CSSProp;
 };
diff --git a/src/components/molecules/Fieldset/Fieldset.style.tsx b/src/components/molecules/Fieldset/Fieldset.style.tsx
index ace6227e0..4eaab2881 100644
--- a/src/components/molecules/Fieldset/Fieldset.style.tsx
+++ b/src/components/molecules/Fieldset/Fieldset.style.tsx
@@ -11,6 +11,6 @@ export const StyledFieldset = styled.fieldset<{ $disabled?: boolean }>`
   ${({ $disabled }) => $disabled && disabledStyle}
 `;
 
-export const StyledLegend = styled.legend<{ alignLabel?: TTextAlignLC; theme: TTheme }>`
-  margin: 0 ${({ alignLabel }) => (alignLabel === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xxs};
+export const StyledLegend = styled.legend<{ $alignLegend?: TTextAlignLC; theme: TTheme }>`
+  margin: 0 ${({ $alignLegend }) => ($alignLegend === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xxs};
 `;
diff --git a/src/components/molecules/Fieldset/Fieldset.tsx b/src/components/molecules/Fieldset/Fieldset.tsx
index 35ed0baa5..ba51edc75 100644
--- a/src/components/molecules/Fieldset/Fieldset.tsx
+++ b/src/components/molecules/Fieldset/Fieldset.tsx
@@ -6,19 +6,19 @@ import { StyledFieldset, StyledLegend } from './Fieldset.style';
 // ---- A Fieldset that Provides a Label and a Fieldset for some childs ------ //
 // --------------------------------------------------------------------------- //
 export default function Fieldset(props: TFieldsetWithHTMLAttributes) {
-  const { children, label, alignLabel, typographySettings, disabled, ...htmlAttrs } = props;
+  const { children, legend, alignLegend, typographySettings, disabled, ...htmlAttrs } = props;
 
   return (
     <StyledFieldset $disabled={disabled} {...htmlAttrs}>
-      {label && (
-        <StyledLegend alignLabel={alignLabel}>
+      {legend && (
+        <StyledLegend $alignLegend={alignLegend}>
           <Typography
             elType={typographySettings?.elType || 'span'}
             variant={typographySettings?.variant ?? 'interactiveLg'}
             fontWeight={typographySettings?.fontWeight ?? 'bold'}
             {...typographySettings}
           >
-            {label}
+            {legend}
           </Typography>
         </StyledLegend>
       )}
diff --git a/src/components/molecules/Fieldset/TFieldset.model.ts b/src/components/molecules/Fieldset/TFieldset.model.ts
index 4d1202224..faaee3966 100644
--- a/src/components/molecules/Fieldset/TFieldset.model.ts
+++ b/src/components/molecules/Fieldset/TFieldset.model.ts
@@ -4,8 +4,8 @@ import { TTextAlignLC } from '@/types/TTextAlignLC';
 import { TTypography } from '@/components/atoms/Typography';
 
 export type TFieldset = {
-  label?: string;
-  alignLabel?: TTextAlignLC;
+  legend?: string;
+  alignLegend?: TTextAlignLC;
   typographySettings?: TTypography;
   disabled?: boolean;
 };
diff --git a/src/components/molecules/Fieldset/docu/Fieldset.mdx b/src/components/molecules/Fieldset/docu/Fieldset.mdx
index 1098cbe95..4c13eb0fb 100644
--- a/src/components/molecules/Fieldset/docu/Fieldset.mdx
+++ b/src/components/molecules/Fieldset/docu/Fieldset.mdx
@@ -26,7 +26,7 @@ import { TFieldset, TFieldsetWithHTMLAttributes } from 'fui-fancyui';
 
 ## Example Usage
 
-Below is an example demonstrating how to use the `Fieldset` component in a form. This example includes a label with customized typography settings.
+Below is an example demonstrating how to use the `Fieldset` component in a form. This example includes a legend with customized typography settings.
 
 ```jsx
 import React from 'react';
@@ -37,7 +37,7 @@ function ExampleForm() {
     <form>
       <Fieldset
         label="Personal Information"
-        alignLabel="center"
+        alignLegend="center"
         typographySettings={{
           elType: 'span',
           variant: 'interactiveLg',
diff --git a/src/components/molecules/Fieldset/docu/Fieldset.stories.tsx b/src/components/molecules/Fieldset/docu/Fieldset.stories.tsx
index 68d1c7776..b31fc0946 100644
--- a/src/components/molecules/Fieldset/docu/Fieldset.stories.tsx
+++ b/src/components/molecules/Fieldset/docu/Fieldset.stories.tsx
@@ -19,14 +19,14 @@ const meta = {
 
   // Define arguments for the story
   argTypes: {
-    alignLabel: {
+    alignLegend: {
       description: 'The alignment of the label relative to the fieldset.',
       control: {
         type: 'select',
         options: ['left', 'center'],
       },
     },
-    label: {
+    legend: {
       description: 'The label to be displayed for the fieldset.',
       control: {
         type: 'text',
@@ -61,8 +61,8 @@ export const Primary: Story = {
     </Fieldset>
   ),
   args: {
-    alignLabel: 'left',
-    label: 'This is a label',
+    alignLegend: 'left',
+    legend: 'This is a label',
     typographySettings: {
       variant: 'interactiveLg',
       fontWeight: 'bold',
diff --git a/src/components/molecules/ListBox/ListBox.style.tsx b/src/components/molecules/ListBox/ListBox.style.tsx
index 4a1966f47..c39b27a07 100644
--- a/src/components/molecules/ListBox/ListBox.style.tsx
+++ b/src/components/molecules/ListBox/ListBox.style.tsx
@@ -18,6 +18,7 @@ export const generateFancyBoxStyle = (props: TgenerateFancyBoxStyle) => {
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
+    overflow: hidden;
     ${$boxShadow && boxShadow.md};
 
     ${$externalStyle}
diff --git a/src/components/molecules/ListBox/ListBox.tsx b/src/components/molecules/ListBox/ListBox.tsx
index a4cdfdc48..d9103ee3a 100644
--- a/src/components/molecules/ListBox/ListBox.tsx
+++ b/src/components/molecules/ListBox/ListBox.tsx
@@ -1,6 +1,6 @@
 import { FancyBox } from '@/components/atoms/FancyBox';
 import { generateFancyBoxStyle } from './ListBox.style';
-import { ListBoxItem } from './ListBoxItem';
+import { ListBoxItem } from './ListBoxItem/ListBoxItem';
 import { TListBoxWithFancyBoxAttrs } from './TListBox.model';
 
 // --------------------------------------------------------------------------- //
diff --git a/src/components/molecules/ListBox/ListBoxItem.tsx b/src/components/molecules/ListBox/ListBoxItem.tsx
deleted file mode 100644
index 4700e42f2..000000000
--- a/src/components/molecules/ListBox/ListBoxItem.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { styled, CSSProp, css } from 'styled-components';
-
-import { RawLI } from '@/components/atoms/RawLI';
-import { TComponentSizes } from '@/types/TComponentSizes';
-import { sizeSettings } from './sizeSettings';
-import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
-
-export type TListBoxItemProps = {
-  children?: React.ReactNode;
-  externalStyle?: CSSProp;
-  sizeC?: TComponentSizes;
-};
-// --------------------------------------------------------------------------- //
-// ------- The List Item for The ListBox to handle the distances -------- //
-// --------------------------------------------------------------------------- //
-function ListBoxItem(props: TListBoxItemProps) {
-  const { children, externalStyle, sizeC = 'md' } = props;
-  return (
-    <StyledLi $sizeC={sizeC} $externalStyle={externalStyle}>
-      {children}
-    </StyledLi>
-  );
-}
-
-// This convention is used to allow the Storybook to render the component
-ListBoxItem.displayName = 'ListBox.Item';
-export { ListBoxItem };
-
-// ------------------------------------------- //
-// ------- The style for the component ------- //
-// ------------------------------------------- //
-// handle the distances between the items and the edeges of the list
-const StyledLi = styled(RawLI)<{ $externalStyle?: CSSProp; $sizeC: TComponentSizes }>`
-  ${({ $sizeC }) => css`
-    padding: ${arrayToCssValues(sizeSettings[$sizeC ?? 'md'].padding, 'spacing')};
-  `}
-
-  ${({ $externalStyle }) => $externalStyle}
-`;
diff --git a/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx b/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx
new file mode 100644
index 000000000..7b04b5c40
--- /dev/null
+++ b/src/components/molecules/ListBox/ListBoxItem/ListBoxItem.tsx
@@ -0,0 +1,39 @@
+import { css } from 'styled-components';
+
+import { FancyBox } from '@/components/atoms/FancyBox';
+import { TListBoxItemProps } from '@/components/molecules/ListBox/ListBoxItem/TListBoxItem.model';
+import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
+import { sizeSettings } from '../sizeSettings';
+import { generateBackgroundColor } from '@/design/designFunctions/generateItemTheme/utils/generateBackgroundColor';
+
+// --------------------------------------------------------------------------- //
+// ------- The List Item for The ListBox to handle the distances -------- //
+// --------------------------------------------------------------------------- //
+function ListBoxItem(props: TListBoxItemProps) {
+  const { children, externalStyle, sizeC, layer = 0, themeType = 'transparent', hoverLayer } = props;
+
+  return (
+    <FancyBox
+      as={'li'}
+      padding={sizeC ? arrayToCssValues(sizeSettings[sizeC].padding, 'spacing') : undefined}
+      themeType={themeType}
+      layer={layer}
+      externalStyle={css`
+        list-style: none;
+        ${externalStyle}
+
+        &:hover {
+          background-color: ${generateBackgroundColor({ $themeType: themeType, $layer: hoverLayer })};
+        }
+
+        transition: background-color 0.3s;
+      `}
+    >
+      {children}
+    </FancyBox>
+  );
+}
+
+// This convention is used to allow the Storybook to render the component
+ListBoxItem.displayName = 'ListBox.Item';
+export { ListBoxItem };
diff --git a/src/components/molecules/ListBox/ListBoxItem/TListBoxItem.model.ts b/src/components/molecules/ListBox/ListBoxItem/TListBoxItem.model.ts
new file mode 100644
index 000000000..64055f949
--- /dev/null
+++ b/src/components/molecules/ListBox/ListBoxItem/TListBoxItem.model.ts
@@ -0,0 +1,13 @@
+import { CSSProp } from 'styled-components';
+import { TComponentSizes } from '@/types/TComponentSizes';
+import { TLayer } from '@/types/TLayer';
+import { TUiColorTypes } from '@/types/TUiColorTypes';
+
+export type TListBoxItemProps = {
+  children?: React.ReactNode;
+  externalStyle?: CSSProp;
+  sizeC?: TComponentSizes;
+  themeType?: TUiColorTypes;
+  layer?: TLayer;
+  hoverLayer?: TLayer;
+};
diff --git a/src/components/molecules/Modal/Modal.tsx b/src/components/molecules/Modal/Modal.tsx
index d2f3f5e7c..bcdd4a580 100644
--- a/src/components/molecules/Modal/Modal.tsx
+++ b/src/components/molecules/Modal/Modal.tsx
@@ -14,14 +14,23 @@ export default function Modal(props: TModalWithHTMLAttributes) {
   // close the modal when the user clicks on the backdrop
   const closeModalHanlder = () => {
     if (isCloseable === false) return;
+    // enable the scroll on the body when the modal is closed
+    document.body.style.overflow = 'auto';
     //if a components needs controle from outside
     if (onClose && id) onClose(id);
     setModalVisible(false);
   };
 
   useEffect(() => {
-    if (isOpen) setModalVisible(true);
-    else setModalVisible(false);
+    if (isOpen) {
+      // disable the scroll on the body when the modal is open
+      document.body.style.overflowY = 'hidden';
+      setModalVisible(true);
+    } else {
+      // enable the scroll on the body when the modal is closed
+      document.body.style.overflowY = 'auto';
+      setModalVisible(false);
+    }
   }, [isOpen]);
 
   return (
diff --git a/src/components/molecules/TabSwitch/TTabSwitch.model.ts b/src/components/molecules/TabSwitch/TTabSwitch.model.ts
index fd2540e2a..0ad6292bc 100644
--- a/src/components/molecules/TabSwitch/TTabSwitch.model.ts
+++ b/src/components/molecules/TabSwitch/TTabSwitch.model.ts
@@ -6,11 +6,13 @@ import { TTabSwitchDetailsChildren, TTabSwitchDetailsLabelIcon } from '@/compone
 import { TLayer } from '@/types/TLayer';
 import { TUiColorsMain } from '@/types/TUiColorsMain';
 import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+import { TUiColorsMainAndAccent } from '@/types/TUiColorsMainAndAccent';
 
 export type TTabSwitch = {
   wide?: boolean;
   sizeC?: TComponentSizes;
   textColor?: TUiColorsMain;
+  activeTextThemeType?: TUiColorsMainAndAccent;
   textLayer?: TLayer;
   disabled?: boolean;
   tabSpacing?: TSpacings;
@@ -22,8 +24,7 @@ export type TTabSwitch = {
   currentSelect?: string;
   iconAlign?: 'left' | 'right';
   switchIndicatorThemeType?: TUiColorsNotTransparent;
-  activeTextThemeType?: TUiColorsMain;
   handler?: (value: string) => void;
 };
 
-export type TTabSwitchWithHTMLAtts = TTabSwitch & React.HTMLAttributes<HTMLDivElement>;
+export type TTabSwitchWithHTMLAtts = TTabSwitch & React.HTMLAttributes<HTMLUListElement>;
diff --git a/src/components/molecules/TabSwitch/TabSwitch.tsx b/src/components/molecules/TabSwitch/TabSwitch.tsx
index b5c5b6777..f2dc4be6d 100644
--- a/src/components/molecules/TabSwitch/TabSwitch.tsx
+++ b/src/components/molecules/TabSwitch/TabSwitch.tsx
@@ -3,13 +3,13 @@ import React, { useRef, useState } from 'react';
 import { SwitchActiveIndicator } from '@/components/atoms/SwitchActiveIndicator';
 import { FancyTabSwitchButton } from '@/components/molecules/FancyTabSwitchButton';
 import { generateBorderRadiusForComponentOnlyValue } from '@/design/designFunctions/generateBorderRadiusForComponent';
-import { TTabSwitch } from './TTabSwitch.model';
+import { TTabSwitchWithHTMLAtts } from './TTabSwitch.model';
 import { ItemWrapper, ULButtonSwitchList } from './TabSwitch.style';
 
 // --------------------------------------------------------------------------- //
 // ------------ The tap SwitchComponent to slect specifc values -------------- //
 // --------------------------------------------------------------------------- //
-export default function TabSwitch(props: TTabSwitch) {
+export default function TabSwitch(props: TTabSwitchWithHTMLAtts) {
   const {
     values,
     textColor = 'secondary',
@@ -27,6 +27,7 @@ export default function TabSwitch(props: TTabSwitch) {
     activeTextThemeType,
     switchIndicatorThemeType,
     indicatorType,
+    ...htmlProps
   } = props;
 
   // Define the state for the currently selected tab
@@ -65,6 +66,7 @@ export default function TabSwitch(props: TTabSwitch) {
       $direction={direction}
       $disabled={disabled}
       role="radiogroup"
+      {...htmlProps}
     >
       {/* Generate a list item for each switch value */}
       {values.map((item, i) => (
diff --git a/src/components/organisms/FancyButton/FancyButton.style.tsx b/src/components/organisms/FancyButton/FancyButton.style.tsx
index 33ca3b031..e04a7a13b 100644
--- a/src/components/organisms/FancyButton/FancyButton.style.tsx
+++ b/src/components/organisms/FancyButton/FancyButton.style.tsx
@@ -5,6 +5,7 @@ import { TLeftRightCenterToFlexJustify } from '@/design/designFunctions/leftRigh
 import { TComponentSizes } from '@/types/TComponentSizes';
 import { sizeSettings } from './sizeSettings';
 import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
+import { calcCSSValuesWithOffset } from '@/utils/functions/calcCSSValuesWithOffset';
 
 interface IGenerateFancyButton {
   $sizeC: TComponentSizes;
@@ -12,14 +13,16 @@ interface IGenerateFancyButton {
   $justifyContent?: TLeftRightCenterToFlexJustify;
   $iconAlign?: 'left' | 'right';
   $icon?: boolean;
+  $outlined?: boolean;
 }
 export const generateFancyButton = (props: IGenerateFancyButton) => {
-  const { $sizeC, $oneToOne, $justifyContent, $iconAlign, $icon } = props;
+  const { $sizeC, $oneToOne, $justifyContent, $iconAlign, $icon, $outlined } = props;
 
   return css`
+    display: inline-flex;
     justify-content: ${$justifyContent ?? 'center'};
     ${$oneToOne && generate1To1Button($sizeC)};
-    ${!$oneToOne && generateSize($sizeC, $icon, $iconAlign)};
+    ${!$oneToOne && generateSize($sizeC, $icon, $iconAlign, $outlined)};
   `;
 };
 
@@ -34,7 +37,12 @@ const generate1To1Button = ($sizeC: TComponentSizes) => {
   `;
 };
 
-const generateSize = ($sizeC: TComponentSizes, $icon?: boolean, $iconAlign?: IGenerateFancyButton['$iconAlign']) => {
+const generateSize = (
+  $sizeC: TComponentSizes,
+  $icon?: boolean,
+  $iconAlign?: IGenerateFancyButton['$iconAlign'],
+  outlined?: boolean
+) => {
   let padding = sizeSettings[$sizeC].padding;
 
   // if there is an icon, we need to adjust the padding
@@ -53,7 +61,19 @@ const generateSize = ($sizeC: TComponentSizes, $icon?: boolean, $iconAlign?: IGe
     padding = sizeSettings[$sizeC].padding;
   }
 
+  const cssValues = arrayToCssValues(padding, 'spacing');
+
+  // clac offset for outlined buttons
+  if (outlined && cssValues) {
+    const shrinkedPaddingWithBorder = calcCSSValuesWithOffset(cssValues, -2);
+
+    return css`
+      padding: ${shrinkedPaddingWithBorder};
+    `;
+  }
+
+  // return the padding
   return css`
-    padding: ${arrayToCssValues(padding, 'spacing')};
+    padding: ${cssValues};
   `;
 };
diff --git a/src/components/organisms/FancyButton/FancyButton.tsx b/src/components/organisms/FancyButton/FancyButton.tsx
index 9d4f6854c..18d52d5eb 100644
--- a/src/components/organisms/FancyButton/FancyButton.tsx
+++ b/src/components/organisms/FancyButton/FancyButton.tsx
@@ -24,6 +24,7 @@ export default function FancyButton(props: TFancyButtonWithHTMLAttrs) {
     externalStyle,
     oneToOne,
     gap,
+    outlined,
     ...buttonProps
   } = props;
   // handle icon alignment
@@ -35,12 +36,14 @@ export default function FancyButton(props: TFancyButtonWithHTMLAttrs) {
     $sizeC: sizeC,
     $oneToOne: oneToOne ?? (Boolean(!label) && Boolean(icon)),
     $justifyContent: leftRightCenterToFlexJustify[align ?? 'center'],
+    $outlined: outlined,
   });
 
   return (
     <Button
       sizeC={sizeC}
       noSize={true}
+      outlined={outlined}
       externalStyle={css`
         ${generateFancyStyle};
         ${externalStyle};
diff --git a/src/components/organisms/FancyChipList/FancyChipList.model.ts b/src/components/organisms/FancyChipList/FancyChipList.model.ts
index 5cd6b6c1e..5db87c399 100644
--- a/src/components/organisms/FancyChipList/FancyChipList.model.ts
+++ b/src/components/organisms/FancyChipList/FancyChipList.model.ts
@@ -11,7 +11,7 @@ export type TFancyChipList = {
   outlined?: boolean;
   chips?: TChip[];
   inputPlaceholder?: string;
-  label?: string;
+  legend?: string;
   sizeC?: 'sm' | 'md' | 'lg';
   editable?: boolean;
   handler?: (chips: TChip[]) => void;
diff --git a/src/components/organisms/FancyChipList/FancyChipList.tsx b/src/components/organisms/FancyChipList/FancyChipList.tsx
index 2a5570071..f66cb59ff 100644
--- a/src/components/organisms/FancyChipList/FancyChipList.tsx
+++ b/src/components/organisms/FancyChipList/FancyChipList.tsx
@@ -19,7 +19,7 @@ export default function FancyChipList(props: TFancyChipList) {
     chips = [],
     inputPlaceholder,
     outlined,
-    label,
+    legend,
     sizeC = 'md',
     editable,
     systemInformation,
@@ -66,7 +66,7 @@ export default function FancyChipList(props: TFancyChipList) {
   };
 
   return (
-    <Fieldset label={label} typographySettings={{ variant: 'interactiveLg' }}>
+    <Fieldset legend={legend} typographySettings={{ variant: 'interactiveLg' }}>
       <ChipList themeType={themeType} layer={layer} outlined={outlined} sizeC={sizeC} systemMessage={systemInformation}>
         {/* // Mapping through each chip in the state to render a FancyChip */}
         {chipState.map((chip, index) => (
diff --git a/src/components/organisms/FancyChipList/docu/FancyChipList.stories.tsx b/src/components/organisms/FancyChipList/docu/FancyChipList.stories.tsx
index 5cdf6a0e7..abf08ad04 100644
--- a/src/components/organisms/FancyChipList/docu/FancyChipList.stories.tsx
+++ b/src/components/organisms/FancyChipList/docu/FancyChipList.stories.tsx
@@ -28,7 +28,7 @@ const meta = {
         type: 'array',
       },
     },
-    label: {
+    legend: {
       description: 'The Label of the ChipList',
       control: {
         type: 'text',
@@ -80,7 +80,7 @@ export const Primary: Story = {
       { id: '2', label: 'Chip 2' },
     ],
     sizeC: 'md',
-    label: 'ChipList',
+    legend: 'ChipList',
     themeType: 'primary',
     layer: 1,
     outlined: false,
@@ -94,7 +94,7 @@ export const WithoutChips: Story = {
   args: {
     chips: [],
     sizeC: 'md',
-    label: 'ChipList',
+    legend: 'ChipList',
     themeType: 'primary',
     layer: 1,
     outlined: false,
diff --git a/src/components/organisms/FancyColorDisplay/FancyColorDisplay.tsx b/src/components/organisms/FancyColorDisplay/FancyColorDisplay.tsx
index 2cf5fb630..9399afbdd 100644
--- a/src/components/organisms/FancyColorDisplay/FancyColorDisplay.tsx
+++ b/src/components/organisms/FancyColorDisplay/FancyColorDisplay.tsx
@@ -19,14 +19,12 @@ export default function FancyColorDisplay(props: TFancyColorDisplay) {
 
   // Function to copy the color to the clipboard
   const copyValue = () => {
-    copyToClipBoard(colorValue.toString())
-      .then(() => {
-        setCopyd(true);
-        setTimeout(() => setCopyd(false), 1000);
-      })
-      .catch((err) => {
-        console.error('Failed to copy: ', err);
-      });
+    setCopyd(true);
+    copyToClipBoard(colorValue.toString());
+
+    setTimeout(() => {
+      setCopyd(false);
+    }, 500);
   };
 
   return (
diff --git a/src/components/organisms/FancyListBox/TFancyListBox.model.ts b/src/components/organisms/FancyListBox/TFancyListBox.model.ts
index 35775ee49..d978b160e 100644
--- a/src/components/organisms/FancyListBox/TFancyListBox.model.ts
+++ b/src/components/organisms/FancyListBox/TFancyListBox.model.ts
@@ -2,16 +2,17 @@ import { ReactNode } from 'react';
 import { TFancyLineWithHTMLAttributes } from '@/components/atoms/FancyLine/TFancyLine.model';
 import { TTitleForComponent } from '@/components/atoms/TitleForComponent';
 import { TListBoxWithFancyBoxAttrs } from '@/components/molecules/ListBox';
-import { TListBoxItemProps } from '@/components/molecules/ListBox/ListBoxItem';
+import { TListBoxItemProps } from '@/components/molecules/ListBox/ListBoxItem/TListBoxItem.model';
 import { TLayer } from '@/types/TLayer';
 import { TUiColorsMain } from '@/types/TUiColorsMain';
 
 export type TFancyListBox = {
   children?: ReactNode;
-  seperator?: TFancyLineWithHTMLAttributes;
+  seperator?: TFancyLineWithHTMLAttributes | null;
   boxTitle?: {
-    titleAlign?: TTitleForComponent['titleAlign'];
+    align?: TTitleForComponent['align'];
     title: TTitleForComponent['title'];
+    gap?: TTitleForComponent['gap'];
   };
   themeType?: Exclude<TUiColorsMain, 'accent'>;
   layer?: TLayer;
diff --git a/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx b/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
index 63c8ee62f..3a714d035 100644
--- a/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
+++ b/src/components/organisms/FancyListBox/docu/FancyListBox.stories.tsx
@@ -100,6 +100,26 @@ export const Primary: Story = {
   },
 };
 
+export const WithHoverStyle: Story = {
+  render: (args) => (
+    <FancyListBox {...args}>
+      <p>Hi</p>
+      <p>Hi</p>
+      <p>Hi</p>
+      <p>Hi</p>
+      <p>Hi</p>
+      <p>Hi</p>
+    </FancyListBox>
+  ),
+  args: {
+    itemSettings: {
+      themeType: 'primary',
+      layer: 1,
+      hoverLayer: 3,
+    },
+  },
+};
+
 export const WithMoreApplyedProps: Story = {
   render: (args) => (
     <FancyListBox {...args}>
@@ -125,7 +145,7 @@ export const WithMoreApplyedProps: Story = {
         variant: 'bodytextLg',
         children: 'Title',
       },
-      titleAlign: 'left',
+      align: 'left',
     },
     outlined: false,
     itemSettings: {
diff --git a/src/components/organisms/FancyModal/FancyModal.state.tsx b/src/components/organisms/FancyModal/FancyModal.state.tsx
deleted file mode 100644
index 707599fbb..000000000
--- a/src/components/organisms/FancyModal/FancyModal.state.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { create } from 'zustand';
-
-import { TModalStatus } from '@/types/TModalStatus';
-import { TModal } from '@/components/molecules/Modal';
-
-type TModalConfig = Omit<TModal, 'id' | 'children' | 'status' | 'isOpen'>;
-
-type IModals = {
-  id: string;
-  children: React.ReactNode;
-  status: TModalStatus;
-  config?: TModalConfig;
-};
-
-//   openModal(id, <div>hi</div>, {})
-
-// --------------------------------------------------------------------------- //
-// --------------------- The state for the ModalModuel ----------------------- //
-// --------------------------------------------------------------------------- //
-interface IModalModule {
-  modals: IModals[];
-  openModal: (id: string, content: React.ReactNode, config: TModalConfig) => void;
-  removeModal: (id: string) => void;
-  closeModal: (id: string) => void;
-}
-export const useFancyModalStore = create<IModalModule>((set) => ({
-  // the state array for the modals
-  modals: [],
-  // add a new modal to the state array
-  openModal: (id, children, config) =>
-    set((state) => ({
-      modals: [...state.modals, { id, children, status: 'open', config }],
-    })),
-  // change the status of the modal to closing
-  closeModal: (id) =>
-    set((state) => ({
-      modals: state.modals.map((modal) => (modal.id === id ? { ...modal, status: 'closing' } : modal)),
-    })),
-  // remove the modal from the state array
-  removeModal: (id) =>
-    set((state) => ({
-      modals: state.modals.filter((modal) => modal.id !== id),
-    })),
-}));
diff --git a/src/components/organisms/FancyModal/FancyModal.tsx b/src/components/organisms/FancyModal/FancyModal.tsx
index 8ef3701b8..3867d1d11 100644
--- a/src/components/organisms/FancyModal/FancyModal.tsx
+++ b/src/components/organisms/FancyModal/FancyModal.tsx
@@ -2,40 +2,17 @@ import { Modal } from '@/components/molecules/Modal';
 import { FancyPortal } from '@/components/shared/FancyPortal';
 
 import { TFancyModal } from './TFancyModal.modal';
-import { useFancyModalStore } from './FancyModal.state';
 
 // --------------------------------------------------------------------------- //
 // ----------------- The modalModule to build up a Moadal  ------------------- //
 // --------------------------------------------------------------------------- //
-export default function FancyModal({ appendToDomID }: TFancyModal) {
-  const modals = useFancyModalStore((state) => state.modals);
-  const closeModal = useFancyModalStore((state) => state.closeModal);
-  const removeModal = useFancyModalStore((state) => state.removeModal);
-
-  const closeModalHandler = (id: string) => {
-    // closing the modal is a two step process
-    // first we set the status to "closing" with the closeModal function
-    // this will trigger the animation in the modal component
-    closeModal(id);
-
-    //wait for the animation and remove the modal from the store
-    setTimeout(() => {
-      removeModal(id);
-    }, 300);
-  };
-
+export default function FancyModal({ appendToDomID, modals, closeModal }: TFancyModal) {
   return (
     <>
       {/* ----- The FancModal Ports the Modal out of the root div in the spearte "modal" div ----- */}
       <FancyPortal appendToID={appendToDomID}>
-        {modals.map((modal, key) => (
-          <Modal
-            key={key}
-            isOpen={modal.status === 'open'}
-            onClose={() => closeModalHandler(modal.id)}
-            {...modal.config}
-          >
-            {/* ----- The Content of the Modal ----- */}
+        {modals?.map((modal, key) => (
+          <Modal key={key} isOpen={modal.status === 'open'} onClose={() => closeModal(modal.id)} {...modal.config}>
             {modal.children}
           </Modal>
         ))}
diff --git a/src/components/organisms/FancyModal/TFancyModal.modal.ts b/src/components/organisms/FancyModal/TFancyModal.modal.ts
index c8ae50571..c438436b0 100644
--- a/src/components/organisms/FancyModal/TFancyModal.modal.ts
+++ b/src/components/organisms/FancyModal/TFancyModal.modal.ts
@@ -1,3 +1,7 @@
+import { TFancyModals } from '@/components/organisms/FancyModal/createFancyModalStore';
+
 export type TFancyModal = {
   appendToDomID: string;
+  modals: TFancyModals[];
+  closeModal: (id: string) => void;
 };
diff --git a/src/components/organisms/FancyModal/createFancyModalStore.tsx b/src/components/organisms/FancyModal/createFancyModalStore.tsx
new file mode 100644
index 000000000..e59238039
--- /dev/null
+++ b/src/components/organisms/FancyModal/createFancyModalStore.tsx
@@ -0,0 +1,46 @@
+import { create } from 'zustand';
+
+import { TModalStatus } from '@/types/TModalStatus';
+import { TModal } from '@/components/molecules/Modal';
+
+type TModalConfig = Omit<TModal, 'id' | 'children' | 'status' | 'isOpen'>;
+
+export type TFancyModals = {
+  id: string;
+  children: React.ReactNode;
+  status: TModalStatus;
+  config?: TModalConfig;
+};
+
+//   openModal(id, <div>hi</div>, {})
+
+// --------------------------------------------------------------------------- //
+// --------------------- The state for the ModalModuel ----------------------- //
+// --------------------------------------------------------------------------- //
+interface IModalModule {
+  modals: TFancyModals[];
+  openModal: (id: string, content: React.ReactNode, config?: TModalConfig) => void;
+  closeModal: (id: string) => void;
+}
+
+export function createFancyModalStore() {
+  return create<IModalModule>((set) => ({
+    modals: [],
+    openModal: (id, children, config) =>
+      set((state) => ({
+        modals: [...state.modals, { id, children, status: 'open', config }],
+      })),
+    closeModal: (id) => {
+      set((state) => ({
+        modals: state.modals.map((modal) => (modal.id === id ? { ...modal, status: 'closing' } : modal)),
+      }));
+
+      setTimeout(() => {
+        // After animation duration (if applicable)
+        set((state) => ({
+          modals: state.modals.filter((modal) => modal.id !== id),
+        }));
+      }, 300); // Adjust delay if using a different transition time
+    },
+  }));
+}
diff --git a/src/components/organisms/FancyModal/docu/FancyModal.mdx b/src/components/organisms/FancyModal/docu/FancyModal.mdx
index 8533d61e3..1fbe464b1 100644
--- a/src/components/organisms/FancyModal/docu/FancyModal.mdx
+++ b/src/components/organisms/FancyModal/docu/FancyModal.mdx
@@ -10,9 +10,15 @@ import * as FancyModalStoies from './FancyModal.stories';
 
 ### Setting Up FancyModal
 
-1. **Render the Main Component in the Base File**:
+1. **Create the Store:**
 
-   Ensure that the `<FancyModal />` component is added to a suitable location in your main file for correct modal behavior.
+   Begin by creating an instance of your modal store:
+
+   ```javascript
+   import { createFancyModalStore } from 'fui-fancyui';
+
+   const useFancyModalStore = createFancyModalStore();
+   ```
 
 2. **Specify the DOM Element for Rendering**:
 
@@ -22,57 +28,89 @@ import * as FancyModalStoies from './FancyModal.stories';
    <div id="modalTest"></div>
    ```
 
+3. **Render the FancyModal Component:**
+
+   In your desired location, render the `<FancyModal />` component. Provide it with the necessary props:
+
+   ```jsx
+   import { FancyModal } from 'fui-fancyui';
+
+   const useFancyModalStore = createFancyModalStore();
+
+   function MyComponent() {
+     const closeModal = useFancyModalStore((state) => state.closeModal);
+     const modals = useFancyModalStore((state) => state.modals);
+
+     return (
+       <body>
+         {/* ...other components */}
+         <FancyModal modals={modals} closeModal={closeModal} />
+       </body>
+     );
+   }
+   ```
+
 ### Implementing the Modal
 
-1. **Import the Store in the Component**:
+1. **Use the Store in Your Component:**
 
-   Within the component where you plan to initiate the modal, start by importing the `useFancyModalStore`.
+   Access the `openModal` and `closeModal` functions from the store you created:
 
-   ```jsx
+   ```javascript
    const openModal = useFancyModalStore((state) => state.openModal);
+   const closeModal = useFancyModalStore((state) => state.closeModal);
    ```
 
-2. **Open the Modal**:
+2. **Open the Modal:**
 
-   To display the modal, employ the `openModal` function. This function requires the following parameters:
+   Call the `openModal` function to trigger the modal. It requires the following:
 
-   - `appendToDomID`: The ID corresponding to the DOM element where the modal will appear.
-   - Child components: The specific content or components you want to show within the modal.
-   - Configuration object: This sets various modal properties.
+   - `id`: A unique identifier for your modal.
+   - `children`: The content you want to display inside the modal (JSX).
+   - `config` (optional): An object for customization (e.g., `isCloseAble`).
 
    ```jsx
+   const openMoal = useFancyModalStore((state) => state.openModal);
+   const closeModal = useFancyModalStore((state) => state.closeModal);
+
    const openModalHandler = () => {
      openModal(
-       'modalTest',
-       <div style={{ display: 'flex', direction: 'column', gap: '18px' }}>
+       'myUniqueModalId',
+       <div>
          <FancyTextInput label="Email" />
-         <FancyButton onClick={() => closeModal('modalTest')} label="Close Modal"></FancyButton>
+         <FancyButton onClick={() => closeModal('myUniqueModalId')} label="Close Modal" />
        </div>,
-       {
-         isCloseAble: false,
-       }
+       { isCloseAble: false } // Example configuration
      );
    };
    ```
 
-3. **Close the Modal**:
-
-   To terminate an active modal, use the `closeModal` method from the `useFancyModalStore`.
-
-   ```jsx
-   const closeModal = useFancyModalStore((state) => state.closeModal);
-   ```
+3. **Close the Modal:**
 
-   Subsequently, invoke `closeModal` using the ID of the modal you wish to shut, as depicted in the `openModalHandler` example.
+   Invoke `closeModal` with the unique `id` of the modal you want to close. (This is already handled within the button in the example above.)
 
 <Canvas />
 
 ### Configuration Options
 
-The FancyModal's adaptability is showcased through the configuration object provided during modal initiation. One available option is:
+You can still customize the `FancyModal` using the `config` object passed to `openModal`. For example:
 
-- `isCloseAble`: A boolean that denotes whether users can manually terminate the modal.
+- `isCloseAble`: Determines if users can manually close the modal.
+
+  ```jsx
+  const config = {
+  backDrop?: boolean; // default is true
+  onClose?: (id: string) => void;
+  isCloseable?: boolean; // is the modal closeable by the user
+  themeType?: TUiColorsNotTransparent;
+  layer?: TLayer;
+  }
+  ```
 
 ### Conclusion
 
-The evolved FancyModal, bolstered by `useFancyModalStore`, offers developers a smoother and more intuitive modal management experience. This refurbished framework undeniably simplifies the modal integration process, ensuring both efficient development and streamlined user interactions.
+The `createFancyModalStore` function now gives you more flexibility to manage multiple modal instances within your application. This enhanced architecture simplifies modal implementation and provides a cleaner, more scalable approach.
+
+```
+
+```
diff --git a/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx b/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
index 9e4ed229c..fc49b482f 100644
--- a/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
+++ b/src/components/organisms/FancyModal/docu/FancyModal.stories.tsx
@@ -3,10 +3,11 @@ import { Meta, StoryObj } from '@storybook/react';
 
 // Import the component to be tested
 import FancyModal from '../FancyModal';
-import { useFancyModalStore } from '../FancyModal.state';
+import { createFancyModalStore } from '../createFancyModalStore';
 import { FancyButton } from '../../FancyButton';
 import { TModal } from '../../../molecules/Modal';
 import { FancyTextInput } from '../../FancyTextInput';
+import { TFancyModal } from '@/components/organisms/FancyModal';
 
 // Define metadata for the story
 const meta = {
@@ -24,17 +25,39 @@ const meta = {
     },
   },
   // Define arguments for the story
-  argTypes: {},
+  argTypes: {
+    appendToDomID: {
+      description: 'The ID of the DOM element to which the modal should be appended.',
+      control: {
+        type: 'text',
+      },
+    },
+    modals: {
+      description: 'An array of modals to be displayed by the FancyModal component.',
+      control: {
+        type: 'object',
+      },
+    },
+    closeModal: {
+      description: 'A function to close the modal with the specified ID.',
+      control: {
+        type: 'function',
+      },
+    },
+  },
   // Add tags to the story
-} satisfies Meta<typeof HelperComponent>;
+} satisfies Meta<TFancyModal>;
 
 // Export the metadata
 export default meta;
 // Define the story object
 type Story = StoryObj<typeof meta>;
 
+const useFancyModalStore = createFancyModalStore();
+
 function HelperComponent(props: React.ComponentProps<typeof FancyModal> & Omit<TModal, 'onClose' | 'isOpen'>) {
   const { appendToDomID, children, ...configProps } = props;
+  const modals = useFancyModalStore((state) => state.modals);
   const openModal = useFancyModalStore((state) => state.openModal);
   const closeModal = useFancyModalStore((state) => state.closeModal);
 
@@ -54,7 +77,7 @@ function HelperComponent(props: React.ComponentProps<typeof FancyModal> & Omit<T
   };
   return (
     <>
-      <FancyModal appendToDomID="modal" />
+      <FancyModal appendToDomID="modal" modals={modals} closeModal={closeModal} />
       <FancyButton label="Open Modal" onClick={() => openModalHandler()} />
     </>
   );
@@ -71,7 +94,9 @@ export const Primary: Story = {
     </>
   ),
   args: {
+    modals: [],
     appendToDomID: '',
     children: <></>,
+    closeModal: () => {},
   },
 };
diff --git a/src/components/organisms/FancyModal/index.ts b/src/components/organisms/FancyModal/index.ts
index 98a19d74e..9d3e26c9a 100644
--- a/src/components/organisms/FancyModal/index.ts
+++ b/src/components/organisms/FancyModal/index.ts
@@ -1,3 +1,3 @@
 export { default as FancyModal } from './FancyModal';
-
+export { createFancyModalStore } from './createFancyModalStore';
 export type { TFancyModal } from './TFancyModal.modal';
diff --git a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
index 08ff6a244..8329f39d6 100644
--- a/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
+++ b/src/components/organisms/FancyTabSwitch/FancyTabSwitch.tsx
@@ -33,15 +33,15 @@ export default function FancyTabSwitch(props: FancyTabSwitchWithTabSwitchAtts) {
   } = props;
 
   return (
-    <Fieldset label={label} disabled={disabled} className={className}>
+    <Fieldset legend={label} disabled={disabled} className={className}>
       <FancyBox
         outlined={outlined}
-        outlinedRemoveBorder={true}
+        outlinedRemoveBorder={outlined ? false : true}
         themeType={themeType}
         layer={layer}
         borderRadius={generateBorderRadiusForComponentOnlyValue({ borderRadius, sizeC })}
         externalStyle={css`
-          padding: ${arrayToCssValues(spacingToEdge, 'borderRadius')};
+          padding: ${arrayToCssValues(spacingToEdge, 'spacing')};
           overflow: hidden;
           background-color: ${themeType === 'transparent' && 'transparent'};
           border: ${themeType === 'transparent' && 'solid 1.5px transparent'};
@@ -54,10 +54,11 @@ export default function FancyTabSwitch(props: FancyTabSwitchWithTabSwitchAtts) {
           outlined={outlined}
           activeTextThemeType={activeTextColor}
           switchIndicatorThemeType={switchIndicatorThemeType}
-          borderRadius={calcBorderRadiusWithPadding(
-            generateBorderRadiusForComponentOnlyValue({ borderRadius, sizeC }) ?? '0',
-            spacingToEdge ?? '0'
-          )}
+          borderRadius={calcBorderRadiusWithPadding({
+            borderRadius: generateBorderRadiusForComponentOnlyValue({ borderRadius, sizeC }) ?? '0',
+            padding: spacingToEdge ?? '0',
+            inset: true,
+          })}
           textColor={getOpositMainThemeType(themeType)}
           wide={wide}
           sizeC={sizeC}
diff --git a/src/components/organisms/FancyTabSwitch/TFancyTabSwitch.model.ts b/src/components/organisms/FancyTabSwitch/TFancyTabSwitch.model.ts
index ecabd648c..8985f91f1 100644
--- a/src/components/organisms/FancyTabSwitch/TFancyTabSwitch.model.ts
+++ b/src/components/organisms/FancyTabSwitch/TFancyTabSwitch.model.ts
@@ -2,13 +2,14 @@ import { TTabSwitchWithHTMLAtts } from '@/components/molecules/TabSwitch/TTabSwi
 import { TLayer } from '@/types/TLayer';
 import { TSpacings } from '@/types/TSpacings';
 import { TUiColorsMain } from '@/types/TUiColorsMain';
+import { TUiColorsMainAndAccent } from '@/types/TUiColorsMainAndAccent';
 
 export type TFancyTabSwitch = {
   label?: string;
   themeType?: TUiColorsMain | 'transparent';
   layer?: TLayer;
   spacingToEdge?: TSpacings;
-  activeTextColor?: TUiColorsMain;
+  activeTextColor?: TUiColorsMainAndAccent;
 };
 
 export type FancyTabSwitchWithTabSwitchAtts = TFancyTabSwitch & Omit<TTabSwitchWithHTMLAtts, 'themeType'>;
diff --git a/src/components/organisms/FancyToastMessage/index.ts b/src/components/organisms/FancyToastMessage/index.ts
index 3be8386b0..036167f52 100644
--- a/src/components/organisms/FancyToastMessage/index.ts
+++ b/src/components/organisms/FancyToastMessage/index.ts
@@ -1,3 +1,4 @@
 export { default as FancyToastMessage } from './FancyToastMessage';
+export { useFancyToastMessageStore } from './FancyToastMessage.state';
 
 export type { TFancyToastMessageStore, TFancyToastMessage } from './TFancyToastMessage.model';
diff --git a/src/components/templates/FancyGrid/FancyGrid.model.ts b/src/components/templates/FancyGrid/FancyGrid.model.ts
index 291dfe4c5..bd4f15330 100644
--- a/src/components/templates/FancyGrid/FancyGrid.model.ts
+++ b/src/components/templates/FancyGrid/FancyGrid.model.ts
@@ -1,17 +1,26 @@
 import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+import { TThemeValueOrCSS } from 'lib';
 import { CSSProp } from 'styled-components';
 
 export interface ICustomBreakpoint {
   breakpoint: string; // Breakpoint-Größe, z.B. '768px'
   gridSize: number; // Anzahl der Spalten für diesen Breakpoint
   gap?: string; // Optional: Angepasster Gap für diesen Breakpoint
+  columns?: number; // Optional: Anzahl der Spalten für diesen Breakpoint
+  rows?: string[]; // Optional: Anzahl der Reihen für diesen Breakpoint
+  rowGap?: string; // Optional: Angepasster RowGap für diesen Breakpoint
+  columnGap?: string; // Optional: Angepasster ColumnGap für diesen Breakpoint
 }
 
 export interface FancyGridProps {
-  grid?: number;
+  simpleGrid?: number;
   gap?: string;
   padding?: TThemeArrayOrValueCSS;
   margin?: TThemeArrayOrValueCSS;
+  gridTemplateRows?: (string | number)[];
+  gridTemplateColumns?: (string | number)[];
+  rowGap?: TThemeValueOrCSS;
+  columnGap?: TThemeValueOrCSS;
   children?: React.ReactNode;
   externalStyle?: CSSProp;
   breakpoints?: ICustomBreakpoint[];
diff --git a/src/components/templates/FancyGrid/FancyGrid.style.tsx b/src/components/templates/FancyGrid/FancyGrid.style.tsx
index 16c8d90ef..7d93bffb7 100644
--- a/src/components/templates/FancyGrid/FancyGrid.style.tsx
+++ b/src/components/templates/FancyGrid/FancyGrid.style.tsx
@@ -3,25 +3,35 @@ import { css, styled } from 'styled-components';
 import { FancyGridProps } from '@/components/templates/FancyGrid/FancyGrid.model';
 import { TStyledPrefixAndOmiter } from '@/types/TStyledPrefixAndOmiter';
 import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
+import { getThemeOrValueAsCSS } from '@/design/designFunctions/getThemeOrValueAsCss';
 
 type TFancyGridProps = TStyledPrefixAndOmiter<FancyGridProps>;
 export const GridContainer = styled.div<TFancyGridProps & { as: React.ElementType }>`
   display: grid;
-  grid-template-columns: repeat(${({ $grid }) => $grid}, 1fr);
-  grid-gap: ${({ $gap }) => $gap};
+
+  grid-template-columns: ${({ $simpleGrid }) => $simpleGrid && `repeat(${$simpleGrid})`};
+  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows?.join(' ')};
+  grid-template-columns: ${({ $gridTemplateColumns }) => $gridTemplateColumns?.join(' ')};
+  grid-row-gap: ${({ $rowGap }) => getThemeOrValueAsCSS($rowGap)};
+  grid-column-gap: ${({ $columnGap }) => getThemeOrValueAsCSS($columnGap)};
+
   margin: ${({ $margin }) => arrayToCssValues($margin, 'spacing')};
   padding: ${({ $padding }) => arrayToCssValues($padding, 'spacing')};
 
-  ${({ $externalStyle }) => $externalStyle}
-
+  // Breakpoint handling
+  /* Responsive Breakpoints */
   ${({ $breakpoints }) =>
-    $breakpoints &&
-    $breakpoints.map(
+    $breakpoints?.map(
       (breakpoint) => css`
         @media (min-width: ${breakpoint.breakpoint}) {
-          grid-template-columns: repeat(${breakpoint.gridSize}, 1fr);
-          ${breakpoint.gap ? `grid-gap: ${breakpoint.gap};` : ''}
+          grid-template-columns: ${breakpoint.gridSize && `repeat(${breakpoint.gridSize})`};
+          grid-template-columns: ${breakpoint?.rows?.join(' ')};
+          grid-template-rows: ${breakpoint?.rows?.join(' ')};
+          grid-row-gap: ${breakpoint.rowGap};
+          grid-column-gap: ${breakpoint.columnGap};
         }
       `
     )}
+
+  ${({ $externalStyle }) => $externalStyle}; // Apply external styles if providedƒ
 `;
diff --git a/src/components/templates/FancyGrid/FancyGrid.tsx b/src/components/templates/FancyGrid/FancyGrid.tsx
index a224fdb8b..fa65095d7 100644
--- a/src/components/templates/FancyGrid/FancyGrid.tsx
+++ b/src/components/templates/FancyGrid/FancyGrid.tsx
@@ -10,7 +10,21 @@ import { FancyGridItem } from '@/components/templates/FancyGridItem';
 // ------- The FancyGrid to allocate the grid and give the items space ------- //
 // --------------------------------------------------------------------------- //
 function FancyGrid<T extends React.ElementType = 'div'>(props: TDynamicElement<T> & FancyGridProps) {
-  const { children, grid = 12, gap, as, breakpoints, margin, padding, externalStyle } = props;
+  const {
+    children,
+    simpleGrid,
+    gap,
+    as,
+    breakpoints,
+    margin,
+    padding,
+    externalStyle,
+    gridTemplateColumns,
+    gridTemplateRows,
+    rowGap,
+    columnGap,
+    ...htmlProps
+  } = props;
 
   return (
     <GridContainer
@@ -19,8 +33,13 @@ function FancyGrid<T extends React.ElementType = 'div'>(props: TDynamicElement<T
       $margin={margin}
       $padding={padding}
       $externalStyle={externalStyle}
-      $grid={grid}
+      $simplesimpleGrid={simpleGrid}
+      $gridTemplateColumns={gridTemplateColumns}
+      $gridTemplateRows={gridTemplateRows}
+      $gridRowGap={rowGap}
+      $gridColumnGap={columnGap}
       $gap={gap}
+      {...htmlProps}
     >
       {children}
     </GridContainer>
diff --git a/src/components/templates/FancyGrid/docu/FancyGrid.mdx b/src/components/templates/FancyGrid/docu/FancyGrid.mdx
index 104e2783e..0caf0b480 100644
--- a/src/components/templates/FancyGrid/docu/FancyGrid.mdx
+++ b/src/components/templates/FancyGrid/docu/FancyGrid.mdx
@@ -25,7 +25,7 @@ import FancyGrid from './FancyGrid';
 
 const MyComponent = () => {
   return (
-    <FancyGrid grid={12} gap="10px">
+    <FancyGrid simpleGrid={12} gap="10px">
       {/* Place grid items here */}
     </FancyGrid>
   );
@@ -48,7 +48,7 @@ import FancyGrid, { FancyGridItem } from './FancyGrid';
 
 const MyComponent = () => {
   return (
-    <FancyGrid grid={12} gap="10px">
+    <FancyGrid simpleGrid={12} gap="10px">
       <FancyGridItem gridSpace={4}>{/* Content for the first item */}</FancyGridItem>
       <FancyGridItem gridSpace={4}>{/* Content for the second item */}</FancyGridItem>
       {/* More items... */}
@@ -72,7 +72,7 @@ const MyComponent = () => {
   const itemBreakpoints = [{ breakpoint: '768px', gridSize: 1 }];
 
   return (
-    <FancyGrid grid={12} gap="10px" breakpoints={gridBreakpoints}>
+    <FancyGrid simpleGrid={12} gap="10px" breakpoints={gridBreakpoints}>
       <FancyGridItem gridSpace={3} breakpoints={itemBreakpoints}>
         {/* Content for an item */}
       </FancyGridItem>
diff --git a/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx b/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
index 1200d2672..9207c7e3d 100644
--- a/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
+++ b/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
   },
   // Define arguments for the story
   argTypes: {
-    grid: {
+    simpleGrid: {
       description: 'The value of the input',
       defaultValue: '12',
       control: {
@@ -52,6 +52,30 @@ const meta = {
         type: 'object',
       },
     },
+    gridTemplateColumns: {
+      description: 'The grid template columns',
+      control: {
+        type: 'object',
+      },
+    },
+    gridTemplateRows: {
+      description: 'The grid template rows',
+      control: {
+        type: 'object',
+      },
+    },
+    rowGap: {
+      description: 'The row gap',
+      control: {
+        type: 'select',
+      },
+    },
+    columnGap: {
+      description: 'The column gap',
+      control: {
+        type: 'select',
+      },
+    },
   },
 } satisfies Meta<typeof FancyGrid>;
 
@@ -87,8 +111,41 @@ export const Primary: Story = {
   args: {
     padding: ['sm', 'md', 'lg', 'xl'],
     margin: ['sm', 'md', 'lg', 'xl'],
-    grid: 12,
+    simpleGrid: 12,
     gap: '12px',
     breakpoints: [{ breakpoint: '500px', gridSize: 6 }],
   },
 };
+
+// Define the secondary story with row and column grid
+export const Secondary: Story = {
+  render: (args) => (
+    <FancyGrid {...args}>
+      <FancyGrid.Item gridColumn={1} gridRow={1}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={2} gridRow={1}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={3} gridRow={1}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={1} gridRow={2}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={2} gridRow={2}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+      <FancyGrid.Item gridColumn={3} gridRow={2}>
+        <FancyButton label="Ji" wide />
+      </FancyGrid.Item>
+    </FancyGrid>
+  ),
+  args: {
+    padding: ['sm', 'md', 'lg', 'xl'],
+    margin: ['sm', 'md', 'lg', 'xl'],
+    gap: 'sm',
+    gridTemplateColumns: ['1fr', '1fr', '1fr'],
+    gridTemplateRows: ['1fr', '1fr'],
+  },
+};
diff --git a/src/components/templates/FancyGridItem/FancyGridItem.model.ts b/src/components/templates/FancyGridItem/FancyGridItem.model.ts
index 5b0ec3405..efaf98426 100644
--- a/src/components/templates/FancyGridItem/FancyGridItem.model.ts
+++ b/src/components/templates/FancyGridItem/FancyGridItem.model.ts
@@ -3,7 +3,7 @@ import { ICustomBreakpoint } from '@/components/templates/FancyGrid/FancyGrid.mo
 import { TDynamicElement } from 'lib';
 
 export type TFancyGridItemProps = {
-  gridSpace: number;
+  gridSpace?: number;
   gridColumn?: string | number;
   gridRow?: string | number;
   children?: React.ReactNode;
diff --git a/src/components/templates/FancyGridItem/FancyGridItem.tsx b/src/components/templates/FancyGridItem/FancyGridItem.tsx
index 2f63eb059..56fbf0a5a 100644
--- a/src/components/templates/FancyGridItem/FancyGridItem.tsx
+++ b/src/components/templates/FancyGridItem/FancyGridItem.tsx
@@ -10,7 +10,7 @@ import { TDynamicElement } from '@/types/TDynamicElement';
 // ------------ The FancyGrid Item to get the space for the item - ----------- //
 // ------------------------------------------------<--------------------------- //
 function FancyGridItem<T extends React.ElementType = 'div'>(props: TFancyGridItemProps & TDynamicElement<T>) {
-  const { gridSpace, children, breakpoints, gridColumn, gridRow, as } = props;
+  const { gridSpace, children, breakpoints, gridColumn, gridRow, as, ...htmlProps } = props;
 
   return (
     <GridItem
@@ -19,6 +19,7 @@ function FancyGridItem<T extends React.ElementType = 'div'>(props: TFancyGridIte
       $gridColumn={gridColumn}
       $gridRow={gridRow}
       $breakpoints={breakpoints}
+      {...htmlProps}
     >
       {children}
     </GridItem>
diff --git a/src/components/templates/FancyGridItem/docu/FancyGridItem.mdx b/src/components/templates/FancyGridItem/docu/FancyGridItem.mdx
index 13ebc5b9f..13a5526df 100644
--- a/src/components/templates/FancyGridItem/docu/FancyGridItem.mdx
+++ b/src/components/templates/FancyGridItem/docu/FancyGridItem.mdx
@@ -30,7 +30,7 @@ import FancyGridItem from './FancyGridItem';
 
 const MyComponent = () => {
   return (
-    <FancyGrid grid={12} gap="10px">
+    <FancyGrid simpleGrid={12} gap="10px">
       <FancyGridItem gridSpace={6}>{/* Content for a half-width item */}</FancyGridItem>
       <FancyGridItem gridSpace={6}>{/* Content for another half-width item */}</FancyGridItem>
     </FancyGrid>
diff --git a/src/components/templates/FancyGridTemplate/FancyGridTemplate.tsx b/src/components/templates/FancyGridTemplate/FancyGridTemplate.tsx
index 9d91ab5cc..ae1504d6a 100644
--- a/src/components/templates/FancyGridTemplate/FancyGridTemplate.tsx
+++ b/src/components/templates/FancyGridTemplate/FancyGridTemplate.tsx
@@ -1,11 +1,12 @@
 import { StyledFancyGridTemplate } from '@/components/templates/FancyGridTemplate/FancyGridTemplate.style';
 import FancyGridTemplateItem from '@/components/templates/FancyGridTemplateItem/FancyGridTemplateItem';
 import { TFancyGridTemplate } from './TFancyGridTemplate.model';
+import { TDynamicElement } from '@/types/TDynamicElement';
 
 // --------------------------------------------------------------------------- //
 // ------------ The FancyGridTemplate Component to define the grid ---------- //
 // --------------------------------------------------------------------------- //
-function FancyGridTemplate(props: TFancyGridTemplate) {
+function FancyGridTemplate<T extends React.ElementType = 'div'>(props: TDynamicElement<T> & TFancyGridTemplate) {
   const {
     gridAreas,
     gridAreasBreakPoints,
@@ -14,6 +15,7 @@ function FancyGridTemplate(props: TFancyGridTemplate) {
     height = '100%',
     width = '100%',
     children,
+    ...htmlProps
   } = props;
 
   // Create a function to select grid areas based on breakpoints
@@ -25,13 +27,14 @@ function FancyGridTemplate(props: TFancyGridTemplate) {
       $gapRow={gapRow}
       $height={height}
       $width={width}
+      {...htmlProps}
     >
       {children}
     </StyledFancyGridTemplate>
   );
 }
 
-FancyGridTemplate.GridItem = FancyGridTemplateItem;
+FancyGridTemplate.Item = FancyGridTemplateItem;
 
 // export is needed after GridItem is added to FancyGridTemplate
 // for Storybook to work
diff --git a/src/components/templates/FancyGridTemplate/TFancyGridTemplate.model.ts b/src/components/templates/FancyGridTemplate/TFancyGridTemplate.model.ts
index 236ac7528..662ee85d4 100644
--- a/src/components/templates/FancyGridTemplate/TFancyGridTemplate.model.ts
+++ b/src/components/templates/FancyGridTemplate/TFancyGridTemplate.model.ts
@@ -1,8 +1,8 @@
+import { TBreakpoint } from '@/types/TBreakPoint';
 import { TSpacings } from '@/types/TSpacings';
-import { TBreakPoints } from '@/types/TBreakPoints';
 
 export type TGridAreasBreakpoints = {
-  [key in TBreakPoints]?: string[];
+  [key: string]: string[];
 };
 
 // Define types for the props
@@ -14,4 +14,5 @@ export type TFancyGridTemplate = {
   gapRow?: TSpacings;
   width?: string;
   height?: string;
+  breakPoints?: TBreakpoint[];
 };
diff --git a/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.mdx b/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.mdx
index 2b4d95177..cdb2a670e 100644
--- a/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.mdx
+++ b/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.mdx
@@ -24,7 +24,7 @@ The `StyledFancyGridTemplate` is a styled `div` element that applies the grid la
 
 # GridItem Sub-component
 
-`FancyGridTemplate.GridItem` is a sub-component used to position children within the grid.
+`FancyGridTemplate.Item` is a sub-component used to position children within the grid.
 
 ### `FancyGridTemplateItem` Props
 
@@ -35,5 +35,5 @@ The `StyledFancyGridTemplate` is a styled `div` element that applies the grid la
 ### Usage
 
 ```jsx
-<FancyGridTemplate.GridItem gridArea="header">{/* children components here */}</FancyGridTemplate.GridItem>
+<FancyGridTemplate.Item gridArea="header">{/* children components here */}</FancyGridTemplate.Item>
 ```
diff --git a/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.stories.tsx b/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.stories.tsx
index 79b1ab638..39c1afe04 100644
--- a/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.stories.tsx
+++ b/src/components/templates/FancyGridTemplate/docu/FancyGridTemplate.stories.tsx
@@ -82,24 +82,24 @@ export const Primary: Story = {
   render: (args) => (
     <FancyGridTemplate {...args}>
       {/* Header */}
-      <FancyGridTemplate.GridItem gridArea="header">
+      <FancyGridTemplate.Item gridArea="header">
         <div style={{ backgroundColor: '#ffcc00', height: '100%' }}>Header</div>
-      </FancyGridTemplate.GridItem>
+      </FancyGridTemplate.Item>
 
       {/* Sidebar */}
-      <FancyGridTemplate.GridItem gridArea="sidebar">
+      <FancyGridTemplate.Item gridArea="sidebar">
         <div style={{ backgroundColor: '#00ccff', height: '100%' }}>Sidebar</div>
-      </FancyGridTemplate.GridItem>
+      </FancyGridTemplate.Item>
 
       {/* Content */}
-      <FancyGridTemplate.GridItem gridArea="content">
+      <FancyGridTemplate.Item gridArea="content">
         <div style={{ backgroundColor: '#cccccc', height: '100%' }}>Content</div>
-      </FancyGridTemplate.GridItem>
+      </FancyGridTemplate.Item>
 
       {/* Footer */}
-      <FancyGridTemplate.GridItem gridArea="footer">
+      <FancyGridTemplate.Item gridArea="footer">
         <div style={{ backgroundColor: '#ff6699', height: '100%' }}>Footer</div>
-      </FancyGridTemplate.GridItem>
+      </FancyGridTemplate.Item>
     </FancyGridTemplate>
   ),
   args: {
diff --git a/src/components/templates/FancyGridTemplateItem/FancyGridTemplateItem.tsx b/src/components/templates/FancyGridTemplateItem/FancyGridTemplateItem.tsx
index 86261aaf8..1529f922c 100644
--- a/src/components/templates/FancyGridTemplateItem/FancyGridTemplateItem.tsx
+++ b/src/components/templates/FancyGridTemplateItem/FancyGridTemplateItem.tsx
@@ -1,10 +1,10 @@
 import { GridItem } from './FancyGridTemplateItem.style';
-import { TFancyGridTemplateItem } from './TFancyGridTemplateItem.model';
+import { TFancyGridTemplateItemWithHTMlAttrs } from './TFancyGridTemplateItem.model';
 
 // --------------------------------------------------------------------------- //
 // -------- The GridItem Component to fill the grid with the postion --------- //
 // --------------------------------------------------------------------------- //
-export default function FancyGridTemplateItem(props: TFancyGridTemplateItem) {
+export default function FancyGridTemplateItem(props: TFancyGridTemplateItemWithHTMlAttrs) {
   const { gridArea, externalStyle, children, ...htmlProps } = props;
 
   return (
diff --git a/src/components/templates/FancyRadioList/docu/FancyRadioList.stories.tsx b/src/components/templates/FancyRadioList/docu/FancyRadioList.stories.tsx
index 41d2538ca..2a42a6516 100644
--- a/src/components/templates/FancyRadioList/docu/FancyRadioList.stories.tsx
+++ b/src/components/templates/FancyRadioList/docu/FancyRadioList.stories.tsx
@@ -47,8 +47,8 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   render: (args) => <FancyRadioList {...args} />,
   args: {
-    label: 'FancyRadioList',
-    alignLabel: 'left',
+    legend: 'FancyRadioList',
+    alignLegend: 'left',
     disabled: false,
     themeType: 'primary',
     layer: 1,
diff --git a/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx b/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
index bb1de80ba..813281ffb 100644
--- a/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
+++ b/src/components/templates/FancySkeletonGrid/FancySkeletonGrid.tsx
@@ -1,16 +1,24 @@
-import { useWichBreakPointIsActive } from '@/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive';
+import { useActiveBreakpoint } from '@/utils/hooks/useActiveBreakpoint';
 
 import { SkeletonBox } from '@/components/atoms/SkeletonBox';
 import { FancyGridTemplate } from '@/components/templates/FancyGridTemplate';
 import { TFancySkeletonGrid } from '@/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model';
 import { generateGridSet } from '@/components/templates/FancySkeletonGrid/utils/generateGidSet';
+import { themeStore } from '@/design/theme/themeStore';
 
 // --------------------------------------------------------------------------- //
 // -------- The Component generates Skeletonboxes based on the GridArea ------ //
 // --------------------------------------------------------------------------- //
 export default function FancySkeletonGrid(props: TFancySkeletonGrid) {
   const { gridAreas, gridAreasBreakPoints, layer, themeType, borderRadius, ...gridProps } = props;
-  const activeBreakPoint = useWichBreakPointIsActive();
+  const themeBreakPoints = themeStore((state) => state.theme.breakpoints);
+
+  const breakPointsArray = Object.keys(themeBreakPoints).map((key) => ({
+    id: key,
+    query: themeBreakPoints[key as keyof typeof themeBreakPoints],
+  }));
+
+  const activeBreakPoint = useActiveBreakpoint(breakPointsArray);
 
   // Generate a set of grid areas based on the gridAreas and gridAreasBreakPoints
   const set = generateGridSet({ gridAreas, gridAreasBreakPoints, activeBreakPoint });
@@ -18,9 +26,9 @@ export default function FancySkeletonGrid(props: TFancySkeletonGrid) {
   return (
     <FancyGridTemplate gridAreas={gridAreas} gridAreasBreakPoints={gridAreasBreakPoints} {...gridProps}>
       {[...set].map((item, i) => (
-        <FancyGridTemplate.GridItem key={i} gridArea={item}>
+        <FancyGridTemplate.Item key={i} gridArea={item}>
           <SkeletonBox sizeH="fit" sizeW="fit" borderRadius={borderRadius} themeType={themeType} layer={layer} />
-        </FancyGridTemplate.GridItem>
+        </FancyGridTemplate.Item>
       ))}
     </FancyGridTemplate>
   );
diff --git a/src/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model.ts b/src/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model.ts
index 5d18f3786..6398a5552 100644
--- a/src/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model.ts
+++ b/src/components/templates/FancySkeletonGrid/TFancySkeletonGrid.model.ts
@@ -1,5 +1,5 @@
 import { TSkeletonBox } from '@/components/atoms/SkeletonBox';
 import { TFancyGridTemplate } from '@/components/templates/FancyGridTemplate';
 
-export type TFancySkeletonGrid = Omit<TFancyGridTemplate, 'children'> &
+export type TFancySkeletonGrid = Omit<TFancyGridTemplate, 'children' | 'breakPoints'> &
   Omit<TSkeletonBox, 'aspectRatio' | 'sizeW' | 'sizeH'>;
diff --git a/src/components/templates/FancySkeletonGrid/utils/generateGidSet.ts b/src/components/templates/FancySkeletonGrid/utils/generateGidSet.ts
index 8375d3583..70405eedf 100644
--- a/src/components/templates/FancySkeletonGrid/utils/generateGidSet.ts
+++ b/src/components/templates/FancySkeletonGrid/utils/generateGidSet.ts
@@ -1,14 +1,14 @@
-import { TBreakPoints } from '@/types/TBreakPoints';
+import { TGridAreasBreakpoints } from '@/components/templates/FancyGridTemplate/TFancyGridTemplate.model';
 import { TFancySkeletonGrid } from '@/components/templates/FancySkeletonGrid';
 
 // ---------- This generates the set for the object or array ------- //
-type TgnerateGridSet = {
+type TgnerateGridSet<BreakPointName extends keyof TGridAreasBreakpoints & string> = {
   gridAreas: TFancySkeletonGrid['gridAreas'];
   gridAreasBreakPoints: TFancySkeletonGrid['gridAreasBreakPoints'];
-  activeBreakPoint: TBreakPoints;
+  activeBreakPoint: BreakPointName | null;
 };
 
-export const generateGridSet = (props: TgnerateGridSet) => {
+export const generateGridSet = (props: TgnerateGridSet<keyof TGridAreasBreakpoints & string>) => {
   const { gridAreas, gridAreasBreakPoints, activeBreakPoint } = props;
   const set = new Set<string>();
 
@@ -24,10 +24,10 @@ export const generateGridSet = (props: TgnerateGridSet) => {
   if (gridAreas) addToSet(gridAreas);
 
   // gridAreas is an object with breakpoints
-  if (gridAreasBreakPoints) {
+  if (gridAreasBreakPoints && activeBreakPoint) {
     const value = gridAreasBreakPoints[activeBreakPoint];
 
-    addToSet(value!);
+    addToSet(value);
   }
 
   return set;
diff --git a/src/design/designFunctions/arrayToCssValues/TArrayValues.model.ts b/src/design/designFunctions/arrayToCssValues/TArrayValues.model.ts
index 2cc28a1a0..816471f88 100644
--- a/src/design/designFunctions/arrayToCssValues/TArrayValues.model.ts
+++ b/src/design/designFunctions/arrayToCssValues/TArrayValues.model.ts
@@ -8,7 +8,15 @@ export type TThemeArrayCssValues<T extends keyof TThemeValueMap = 'default'> = [
   TThemeValueOrCSS<T>?,
 ];
 
+export type TThemObjectCssValues<T extends keyof TThemeValueMap = 'default'> = {
+  t?: TThemeValueOrCSS<T>;
+  r?: TThemeValueOrCSS<T>;
+  b?: TThemeValueOrCSS<T>;
+  l?: TThemeValueOrCSS<T>;
+};
+
 // the input can be an array or a single value
 export type TThemeArrayOrValueCSS<T extends keyof TThemeValueMap = 'default'> =
   | TThemeArrayCssValues<T>
-  | TThemeValueOrCSS<T>;
+  | TThemeValueOrCSS<T>
+  | TThemObjectCssValues<T>;
diff --git a/src/design/designFunctions/arrayToCssValues/arrayToCssValues.ts b/src/design/designFunctions/arrayToCssValues/arrayToCssValues.ts
index 5884d13f1..69bf52115 100644
--- a/src/design/designFunctions/arrayToCssValues/arrayToCssValues.ts
+++ b/src/design/designFunctions/arrayToCssValues/arrayToCssValues.ts
@@ -9,7 +9,8 @@ const arrayToCssValues = <T extends keyof TThemeValueMap = 'default'>(
   values?: TThemeArrayOrValueCSS,
   themeSetting?: T
 ) => {
-  if (!values || !values.toString().length) return '';
+  if (!values || (typeof values !== 'object' && !values.toString().length) || Object.keys(values).length === 0)
+    return '';
 
   // Initialize an empty array for the cleaned values
   let cleanedValues: (string | number | TThemeValueMap[T])[] = [];
@@ -17,6 +18,11 @@ const arrayToCssValues = <T extends keyof TThemeValueMap = 'default'>(
   // Handle the case where values is a single value
   if (typeof values === 'string' || typeof values === 'number') {
     cleanedValues.push(values);
+  } else if (typeof values === 'object' && Array.isArray(values) === false) {
+    // Handle the case where values is an object
+    const { t = 0, r = 0, b = 0, l = 0 } = values;
+
+    cleanedValues = [t, r, b, l].filter((value): value is string | number | TThemeValueMap[T] => value !== undefined);
   } else if (Array.isArray(values)) {
     // Filter out undefined values and assert the type to exclude 'undefined'
     cleanedValues = values.filter((value): value is string | number | TThemeValueMap[T] => value !== undefined);
diff --git a/src/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model.ts b/src/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model.ts
new file mode 100644
index 000000000..524ee5c3e
--- /dev/null
+++ b/src/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model.ts
@@ -0,0 +1,8 @@
+import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+
+export type TcalcBorderRadiusWithPadding = {
+  borderRadius: TThemeArrayOrValueCSS;
+  padding: TThemeArrayOrValueCSS;
+  inset?: boolean;
+  offset?: number;
+};
diff --git a/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts b/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
index d824cf0dc..774a5d07e 100644
--- a/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
+++ b/src/design/designFunctions/calcBorderRadiusWithPadding/calcBorderRadiusWithPadding.ts
@@ -1,14 +1,25 @@
-import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+import { TcalcBorderRadiusWithPadding } from '@/design/designFunctions/calcBorderRadiusWithPadding/TcalcBorderRadiusWithPadding.model';
 import { getThemeOrValueAsCSS } from '@/design/designFunctions/getThemeOrValueAsCss';
 
-const calcBorderRadiusWithPadding = (
-  borderRadius: TThemeArrayOrValueCSS,
-  padding: TThemeArrayOrValueCSS,
-  inset = true
-) => {
+const calcBorderRadiusWithPadding = (props: TcalcBorderRadiusWithPadding) => {
+  const { borderRadius, padding, inset = false, offset } = props;
   // check if they are arrays or single values
-  const splitBorderRadius = Array.isArray(borderRadius) ? borderRadius : [borderRadius];
-  const splitPadding = Array.isArray(padding) ? padding : [padding];
+  let splitBorderRadius;
+
+  //handleborderRadius when its too an object
+  if (typeof borderRadius === 'object' && !Array.isArray(borderRadius)) {
+    splitBorderRadius = [borderRadius.t, borderRadius.r, borderRadius.b, borderRadius.l];
+  } else {
+    splitBorderRadius = Array.isArray(borderRadius) ? borderRadius : [borderRadius];
+  }
+
+  //handle padding when its too an object
+  let splitPadding;
+  if (typeof padding === 'object' && !Array.isArray(padding)) {
+    splitPadding = [padding.t, padding.r, padding.b, padding.l];
+  } else {
+    splitPadding = Array.isArray(padding) ? padding : [padding];
+  }
 
   // define empty arrays
   const paddingArray: string[] = [];
@@ -43,25 +54,33 @@ const calcBorderRadiusWithPadding = (
   }
 
   // define the operator for the css calc
-  const operator = inset ? '-' : '+';
+  const offsetValue = offset ? ` + ${offset}px` : '';
 
-  // generate the new border radius array with the padding in css calc
   const newBorderRadiusArray = borderRadiusArray.map((borderRadius, index) => {
-    // check if they have a unit when they are a number they doesn't have a unit
-    if (Number(borderRadius) || Number(paddingArray[index])) {
-      console.error('borderRadius and padding should have a unit');
-      return '';
-    }
+    const validBorderRadius = isValidCSSValue(borderRadius) ? borderRadius : '0px';
+    const padding = paddingArray[index];
 
-    // check if the border radius / padding is a valid css value
-    const borderIsValid = borderRadius ? borderRadius : '0px';
-    const formatPaddingAdd = paddingArray[index] ? `(${operator}${paddingArray[index]})` : '0px';
+    // Handle negative padding for inset
+    const validPadding = isValidCSSValue(padding) ? padding : '0px';
+    const paddingValue =
+      inset && parseFloat(validPadding) < 0
+        ? ` + ${Math.abs(parseFloat(validPadding))}px` // Add for negative inset
+        : ` ${inset ? '-' : '+'} ${validPadding}`; // Correct spacing
 
-    return `calc(${borderIsValid} + ${formatPaddingAdd})`;
-  });
+    // Use borderRadius if no padding needed
+    if (paddingValue.trim() === '+' || paddingValue.trim() === '-') {
+      return `${validBorderRadius}${offsetValue}`;
+    }
 
+    return `calc(${validBorderRadius}${paddingValue}${offsetValue})`;
+  });
   // return the new border radius as a string
   return newBorderRadiusArray.join(' ');
 };
 
+function isValidCSSValue(value: string) {
+  // This is a basic check. More comprehensive validation might be needed for production code.
+  return typeof value === 'string' && value.trim() !== '';
+}
+
 export default calcBorderRadiusWithPadding;
diff --git a/src/design/designFunctions/calcBorderRadiusWithPadding/index.ts b/src/design/designFunctions/calcBorderRadiusWithPadding/index.ts
index c9a5ad896..212521e23 100644
--- a/src/design/designFunctions/calcBorderRadiusWithPadding/index.ts
+++ b/src/design/designFunctions/calcBorderRadiusWithPadding/index.ts
@@ -1 +1,3 @@
 export { default as calcBorderRadiusWithPadding } from './calcBorderRadiusWithPadding';
+
+export type { TcalcBorderRadiusWithPadding } from './TcalcBorderRadiusWithPadding.model';
diff --git a/src/design/designFunctions/calcBorderSizeMinusBoxSize/calcBorderSizeMinusBoxSize.ts b/src/design/designFunctions/calcBorderSizeMinusBoxSize/calcBorderSizeMinusBoxSize.ts
index d845e25c2..33970fad0 100644
--- a/src/design/designFunctions/calcBorderSizeMinusBoxSize/calcBorderSizeMinusBoxSize.ts
+++ b/src/design/designFunctions/calcBorderSizeMinusBoxSize/calcBorderSizeMinusBoxSize.ts
@@ -17,9 +17,15 @@ export default function calcBorderSizeMinusBoxSize(padding?: TThemeArrayOrValueC
     return cssValues.join(' ');
   }
 
-  // if padding is a single value
-  const cssValue = getThemeOrValueAsCSS(padding, 'spacing');
-  return calcBorderMinusBox(parseInt(cssValue), borderSize);
+  if (typeof padding === 'object') {
+    const { t = 0, r = 0, b = 0, l = 0 } = padding;
+    const cssValues = [t, r, b, l].map((value) => {
+      const cssValue = getThemeOrValueAsCSS(value, 'spacing');
+      return calcBorderMinusBox(parseInt(cssValue), borderSize);
+    });
+
+    return cssValues.join(' ');
+  }
 }
 
 const calcBorderMinusBox = (padding: number, borderSize: number) => {
diff --git a/src/design/theme/generateThemeColor/utils/generateColorSteps.ts b/src/design/designFunctions/generateThemeColorSteps/generateThemeColorSteps.ts
similarity index 95%
rename from src/design/theme/generateThemeColor/utils/generateColorSteps.ts
rename to src/design/designFunctions/generateThemeColorSteps/generateThemeColorSteps.ts
index ca0c7a208..36b102f3d 100644
--- a/src/design/theme/generateThemeColor/utils/generateColorSteps.ts
+++ b/src/design/designFunctions/generateThemeColorSteps/generateThemeColorSteps.ts
@@ -59,7 +59,7 @@ interface IGenerateColorSteps {
   color: string;
   pimaryColor: string;
 }
-export default function generateColorSteps({ themeType, color, pimaryColor }: IGenerateColorSteps): ColorSteps {
+export default function generateThemeColorSteps({ themeType, color, pimaryColor }: IGenerateColorSteps): ColorSteps {
   const lightColors = lightenColors({ color, themeType, pimaryColor }); //generate the colors
   const obj: ColorSteps = {} as ColorSteps;
 
diff --git a/src/design/designFunctions/generateThemeColorSteps/index.ts b/src/design/designFunctions/generateThemeColorSteps/index.ts
new file mode 100644
index 000000000..fe11be7b3
--- /dev/null
+++ b/src/design/designFunctions/generateThemeColorSteps/index.ts
@@ -0,0 +1 @@
+export { default as generateThemeColorSteps } from './generateThemeColorSteps';
diff --git a/src/design/theme/generateThemeColor/utils/validateColorSteps.ts b/src/design/designFunctions/generateThemeColorSteps/validateThemeColorSteps.ts
similarity index 83%
rename from src/design/theme/generateThemeColor/utils/validateColorSteps.ts
rename to src/design/designFunctions/generateThemeColorSteps/validateThemeColorSteps.ts
index 2e8e0530c..fde5d0169 100644
--- a/src/design/theme/generateThemeColor/utils/validateColorSteps.ts
+++ b/src/design/designFunctions/generateThemeColorSteps/validateThemeColorSteps.ts
@@ -1,4 +1,4 @@
-export default function validateColorSteps(colorSteps: object) {
+export default function validateThemeColorSteps(colorSteps: object) {
   const colorStepsKeys = Object.keys(colorSteps);
   if (colorStepsKeys.length !== 10) return false;
 
diff --git a/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx b/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
index 3e7f7f427..61cf83dbd 100644
--- a/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
+++ b/src/design/theme/FancyThemeProvider/FancyThemeProvider.tsx
@@ -4,14 +4,14 @@ import { ThemeProvider } from 'styled-components';
 import { themeStore } from '@/design/theme/themeStore';
 
 import { TFancyThemeProvider } from './TFancyThemeProvider.model';
-import { generateCssVariables } from '@/design/theme/generateThemeToCssVars';
+import { generateObjectToCssVariables } from '@/design/theme/generateObjectToCssVariables';
 import { applyThemeToDomStyleSheet } from '@/design/theme/applyThemeToDomStyleSheet';
 
 // --------------------------------------------------------------------------- //
 // ---- The FancyThemeProvider handles the themeState and provided theme ----- //
 // --------------------------------------------------------------------------- //
 export default function FancyThemeProvider(props: TFancyThemeProvider) {
-  const { children, theme, applyCssVars = true } = props;
+  const { children, theme, applyCssVars = true, styleSheetId = 'fui-theme' } = props;
   const [isInitialized, setIsInitialized] = useState(false);
 
   const themeState = themeStore((state) => state.theme);
@@ -27,19 +27,19 @@ export default function FancyThemeProvider(props: TFancyThemeProvider) {
   useEffect(() => {
     // if the theme is not initialized we don't need to apply the css vars
     if (!applyCssVars && !isInitialized) return;
-    const cssVars = generateCssVariables(themeState);
+    const cssVars = generateObjectToCssVariables(themeState);
     applyThemeToDomStyleSheet(cssVars);
   }, [theme, themeState, applyCssVars, isInitialized]);
 
   // if the theme changes we update the css variables
   useEffect(() => {
     if (!applyCssVars) return;
-    const getStyle = document.getElementById('fui-theme');
+    const getStyle = document.getElementById(styleSheetId);
     if (!getStyle) return;
     getStyle.innerHTML = `:root {
-      ${generateCssVariables(themeState)}
+      ${generateObjectToCssVariables(themeState)}
     }`;
-  }, [themeState, isDarkMode, applyCssVars]);
+  }, [themeState, isDarkMode, applyCssVars, styleSheetId]);
 
   // theme gets provided to all components
   //the theme gets saved in the theme store and can be accessed from there but first on the first render
diff --git a/src/design/theme/FancyThemeProvider/TFancyThemeProvider.model.ts b/src/design/theme/FancyThemeProvider/TFancyThemeProvider.model.ts
index e88670262..1535684fc 100644
--- a/src/design/theme/FancyThemeProvider/TFancyThemeProvider.model.ts
+++ b/src/design/theme/FancyThemeProvider/TFancyThemeProvider.model.ts
@@ -4,4 +4,5 @@ export type TFancyThemeProvider = {
   children?: React.ReactNode;
   theme?: TTheme;
   applyCssVars?: boolean;
+  styleSheetId?: string;
 };
diff --git a/src/design/theme/brakePoints.ts b/src/design/theme/brakePoints.ts
index e4ab5ea16..985dc436b 100644
--- a/src/design/theme/brakePoints.ts
+++ b/src/design/theme/brakePoints.ts
@@ -1,6 +1,6 @@
 export const breakpoints = {
-  sm: 'screen and (min-width: 576px)',
-  md: 'screen and (min-width: 768px)',
-  lg: 'screen and (min-width: 992px)',
-  xl: 'screen and (min-width: 1200px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
 };
diff --git a/src/design/theme/designSizes.ts b/src/design/theme/designSizes.ts
index 7efab1fe1..c59bc8393 100644
--- a/src/design/theme/designSizes.ts
+++ b/src/design/theme/designSizes.ts
@@ -6,6 +6,8 @@ export const spacingPx = {
   lg: 24 + 'px',
   xl: 32 + 'px',
   xxl: 40 + 'px',
+  xxxl: 48 + 'px',
+  xxxxl: 56 + 'px',
 };
 
 // export const fontSizes = {
diff --git a/src/design/theme/generateThemeToCssVars/TgenerateThemeToCssVars.model.ts b/src/design/theme/generateObjectToCssVariables/TgenerateObjectToCssVariables.model.ts
similarity index 100%
rename from src/design/theme/generateThemeToCssVars/TgenerateThemeToCssVars.model.ts
rename to src/design/theme/generateObjectToCssVariables/TgenerateObjectToCssVariables.model.ts
diff --git a/src/design/theme/generateThemeToCssVars/generateThemeToCssVars.mdx b/src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.mdx
similarity index 55%
rename from src/design/theme/generateThemeToCssVars/generateThemeToCssVars.mdx
rename to src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.mdx
index ac229fca0..793a911f5 100644
--- a/src/design/theme/generateThemeToCssVars/generateThemeToCssVars.mdx
+++ b/src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.mdx
@@ -1,15 +1,15 @@
 ### Component Title
 
-`generateCssVariables` Function
+`generateObjectToCssVariables` Function
 
 ### Brief Description
 
-The `generateCssVariables` function dynamically generates CSS variables from a given theme object. It's designed to work recursively, allowing nested theme objects. This function facilitates the application of theming in CSS by converting theme properties into CSS custom properties (variables) with an optional prefix to namespace them, making it easier to maintain and switch themes dynamically in web projects.
+The `generateObjectToCssVariables` function dynamically generates CSS variables from a given theme object. It's designed to work recursively, allowing nested theme objects. This function facilitates the application of theming in CSS by converting theme properties into CSS custom properties (variables) with an optional prefix to namespace them, making it easier to maintain and switch themes dynamically in web projects.
 
 ### Setup Instructions
 
 1. Ensure you have a theme object that conforms to the `TThemeObject` type, which can include nested objects for structured themes.
-2. Import the `generateCssVariables` function into your project file where you wish to generate CSS variables.
+2. Import the `generateObjectToCssVariables` function into your project file where you wish to generate CSS variables.
 
    ```javascript
    import { fui-fancyui } from 'fui-fancyui';
@@ -31,7 +31,7 @@ const theme = {
   },
 };
 
-const cssVariablesString = generateCssVariables(theme);
+const cssVariablesString = generateObjectToCssVariables(theme);
 // Use the `cssVariablesString` to set CSS custom properties in your application
 ```
 
@@ -42,4 +42,4 @@ This example demonstrates how to convert a theme object with nested color and ba
 - **theme (`TThemeObject`)**: The theme object to convert into CSS variables. It must follow the `TThemeObject` structure, allowing nested objects for hierarchical themes. This is a required property.
 - **prefix (`string`)**: An optional prefix string to prepend to each CSS variable name, used for namespacing. Default is an empty string (`''`).
 
-This documentation outlines the `generateCssVariables` function's purpose, setup, usage, and its components, providing a clear overview of how to dynamically generate CSS variables from a theme object for web development projects.
+This documentation outlines the `generateObjectToCssVariables` function's purpose, setup, usage, and its components, providing a clear overview of how to dynamically generate CSS variables from a theme object for web development projects.
diff --git a/src/design/theme/generateThemeToCssVars/generateThemeToCssVars.ts b/src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.ts
similarity index 65%
rename from src/design/theme/generateThemeToCssVars/generateThemeToCssVars.ts
rename to src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.ts
index 66a4dc381..d544d5f87 100644
--- a/src/design/theme/generateThemeToCssVars/generateThemeToCssVars.ts
+++ b/src/design/theme/generateObjectToCssVariables/generateObjectToCssVariables.ts
@@ -1,14 +1,14 @@
-import { TThemeObject } from './TgenerateThemeToCssVars.model';
+import { TThemeObject } from './TgenerateObjectToCssVariables.model';
 
 // this function generates css variables from a theme object
-export default function generateCssVariables(theme: TThemeObject, prefix = '') {
+export default function generateObjectToCssVariables(theme: TThemeObject, prefix = '') {
   let cssVars = '';
 
   // iterate over the theme object
   Object.entries(theme).forEach(([key, value]) => {
     if (typeof value === 'object' && value !== null) {
       // Recursive case: value is an object
-      cssVars += generateCssVariables(value, `${prefix}${key}-`);
+      cssVars += generateObjectToCssVariables(value, `${prefix}${key}-`);
     } else if (typeof value === 'string') {
       // Base case: value is a string
       cssVars += `--${prefix}${key}: ${value};`;
diff --git a/src/design/theme/generateObjectToCssVariables/index.ts b/src/design/theme/generateObjectToCssVariables/index.ts
new file mode 100644
index 000000000..ba141a5bd
--- /dev/null
+++ b/src/design/theme/generateObjectToCssVariables/index.ts
@@ -0,0 +1,3 @@
+export { default as generateObjectToCssVariables } from './generateObjectToCssVariables';
+
+export type { TThemeValue, TThemeObject } from './TgenerateObjectToCssVariables.model';
diff --git a/src/design/theme/generateThemeColor/generateThemeColor.ts b/src/design/theme/generateThemeColor/generateThemeColor.ts
index 7063de045..729571999 100644
--- a/src/design/theme/generateThemeColor/generateThemeColor.ts
+++ b/src/design/theme/generateThemeColor/generateThemeColor.ts
@@ -1,8 +1,8 @@
 import { TUiColorsTypeObject } from '@/types/TUiColorsTypeObject';
-import generateColorSteps from './utils/generateColorSteps';
+import generateThemeColorSteps from '../../designFunctions/generateThemeColorSteps/generateThemeColorSteps';
 import { isColorValid } from '@/utils//validations/isColorValid';
 import { TUiColorTypes } from '@/types/TUiColorTypes';
-import validateColorSteps from '@/design/theme/generateThemeColor/utils/validateColorSteps';
+import validateThemeColorSteps from '@/design/designFunctions/generateThemeColorSteps/validateThemeColorSteps';
 import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
 
 const themeColors = {
@@ -28,7 +28,7 @@ export function initialGenerateUiColors() {
   // generate for each theme color the color steps
   for (const color in themeColors) {
     // generate the color steps for the color
-    const generatedColor = generateColorSteps({
+    const generatedColor = generateThemeColorSteps({
       themeType: color as TUiColorTypes,
       color: themeColors[color as TUiColorsNotTransparent],
       pimaryColor: themeColors.secondary,
@@ -46,7 +46,7 @@ initialGenerateUiColors();
 export const regenerateUiColors = (isDarkTheme: boolean) => {
   for (const color in uiColors) {
     // generate the color steps for the color
-    const generatedColor = generateColorSteps({
+    const generatedColor = generateThemeColorSteps({
       themeType: color as TUiColorTypes,
       color: uiColors[color as TUiColorsNotTransparent]['0'],
       pimaryColor: isDarkTheme ? themeColors.primary : themeColors.secondary, // if the theme is dark, the primary color is the secondary color
@@ -85,7 +85,7 @@ export const updateThemeColors = (colorObject: IUiColorPops) => {
       // accentDarken should not provided by the user%
       if (colorType !== 'accentDarken' && colorObject[colorTypedkey] !== undefined) {
         // update the theme color with the new color
-        const generatedColorSteps = generateColorSteps({
+        const generatedColorSteps = generateThemeColorSteps({
           themeType: colorTypedkey,
           color: colorObject[colorTypedkey]! as string,
           pimaryColor: themeColors.secondary,
@@ -101,7 +101,7 @@ export const updateThemeColors = (colorObject: IUiColorPops) => {
 
       //Validate ColorSteps object (check if the object has the correct keys)
       // and then update the themeColor with the new color steps
-      if (validateColorSteps(colorSteps)) {
+      if (validateThemeColorSteps(colorSteps)) {
         uiColors[colorTypedkey] = colorSteps as TthemeColorGroup;
       }
     }
diff --git a/src/design/theme/generateThemeToCssVars/index.ts b/src/design/theme/generateThemeToCssVars/index.ts
deleted file mode 100644
index 09fb65cd5..000000000
--- a/src/design/theme/generateThemeToCssVars/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as generateCssVariables } from './generateThemeToCssVars';
-
-export type { TThemeValue, TThemeObject } from './TgenerateThemeToCssVars.model';
diff --git a/src/design/theme/theme.ts b/src/design/theme/theme.ts
index 57422fa71..09dc3522f 100644
--- a/src/design/theme/theme.ts
+++ b/src/design/theme/theme.ts
@@ -115,6 +115,8 @@ export const theme = {
     lg: '24px',
     xl: '32px',
     xxl: '40px',
+    xxxl: '48px',
+    xxxxl: '56px',
   },
   fontSizes: {
     displayHero: {
@@ -209,10 +211,10 @@ export const theme = {
     },
   },
   breakpoints: {
-    sm: 'screen and (min-width: 576px)',
-    md: 'screen and (min-width: 768px)',
-    lg: 'screen and (min-width: 992px)',
-    xl: 'screen and (min-width: 1200px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
   },
   globalElementSizes: {
     xxs: '16px',
diff --git a/src/stories/Setup/SetupNext.mdx b/src/stories/Setup/SetupNext.mdx
index 84bc03e3d..291c0400f 100644
--- a/src/stories/Setup/SetupNext.mdx
+++ b/src/stories/Setup/SetupNext.mdx
@@ -97,7 +97,7 @@ This is needed because the CSS variables are not applied on the server-side rend
 'use client';
 
 import React, { useRef } from 'react';
-import { generateCssVariables, themeStore } from 'fui-fancyui';
+import { generateObjectToCssVariables, themeStore } from 'fui-fancyui';
 import { useServerInsertedHTML } from 'next/navigation';
 
 export default function ThemeObjectToCSSVars({ children }: { children: React.ReactNode }) {
@@ -110,7 +110,7 @@ export default function ThemeObjectToCSSVars({ children }: { children: React.Rea
   useServerInsertedHTML(() => {
     if (!isStyleInserted.current) {
       isStyleInserted.current = true;
-      const cssVars = generateCssVariables(themeState);
+      const cssVars = generateObjectToCssVariables(themeState);
 
       return <style id="fui-theme" dangerouslySetInnerHTML={{ __html: `:root {\n${cssVars}\n}` }} />;
     }
diff --git a/src/types/TBreakPoint.ts b/src/types/TBreakPoint.ts
new file mode 100644
index 000000000..aae6c7de2
--- /dev/null
+++ b/src/types/TBreakPoint.ts
@@ -0,0 +1,4 @@
+export type TBreakpoint = {
+  id: string;
+  query: string; // Media query string (e.g., '(min-width: 768px)')
+};
diff --git a/src/types/TUiColorsMainAndAccent.ts b/src/types/TUiColorsMainAndAccent.ts
new file mode 100644
index 000000000..f831b8897
--- /dev/null
+++ b/src/types/TUiColorsMainAndAccent.ts
@@ -0,0 +1,3 @@
+import { TUiColorTypes } from './TUiColorTypes';
+
+export type TUiColorsMainAndAccent = Extract<TUiColorTypes, 'primary' | 'secondary' | 'accent'>;
diff --git a/src/types/index.ts b/src/types/index.ts
index 8e73058bd..d6afc9ed1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -21,3 +21,5 @@ export * from './TBreakPoints';
 export * from './TSizeSettings';
 export * from './TDynamicElement';
 export * from './TFlexDirection';
+export * from './TBreakPoint';
+export * from './TUiColorsMainAndAccent';
diff --git a/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.mdx b/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.mdx
new file mode 100644
index 000000000..f68c35364
--- /dev/null
+++ b/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.mdx
@@ -0,0 +1,60 @@
+# `calcCSSValuesWithOffset`
+
+This utility function adjusts CSS values (like padding or margins) by a specified offset. It's designed to handle values containing multiple space-separated parts, such as "12px 15px".
+
+## Description
+
+`calcCSSValuesWithOffset` parses a string of CSS values, identifies numerical values with "px" units, adds the offset to those values, and returns a new string with the modified values.
+
+## Setup
+
+Ensure the function is imported into your component:
+
+```javascript
+import { calcCSSValuesWithOffset } from 'fui-fancyui';
+```
+
+## Usage
+
+```javascript
+const originalCSS = '12px 15px';
+const offsetAmount = 2;
+
+const newCSS = calcCSSValuesWithOffset(originalCSS, offsetAmount);
+console.log(newCSS); // Output: "14px 17px"
+```
+
+### Props
+
+| Prop        | Type     | Description                                               | Default |
+| :---------- | :------- | :-------------------------------------------------------- | :------ |
+| `cssValues` | `string` | The original CSS value string (e.g., "12px 15px")         | -       |
+| `offset`    | `number` | The amount to add to each numerical value with "px" units | -       |
+
+### Example with Dynamic CSS
+
+```jsx
+import { useState } from 'react';
+
+function MyComponent() {
+  const [padding, setPadding] = useState('10px 20px');
+  const [offset, setOffset] = useState(3);
+
+  const handleClick = () => {
+    const newPadding = calcCSSValuesWithOffset(padding, offset);
+    setPadding(newPadding);
+  };
+
+  return (
+    <div>
+      <div style={{ padding }}>This div's padding will change</div>
+      <button onClick={handleClick}>Increase Padding</button>
+    </div>
+  );
+}
+```
+
+### Key Points
+
+- **Non-px Units:** Values without "px" units (e.g., percentages, em) are left untouched.
+- **Error Handling:** Currently, there is no explicit error handling for invalid input (like "10px abc"). You might consider adding checks in a production environment.
diff --git a/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.ts b/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.ts
new file mode 100644
index 000000000..b106ef832
--- /dev/null
+++ b/src/utils/functions/calcCSSValuesWithOffset/calcCSSValuesWithOffset.ts
@@ -0,0 +1,16 @@
+const calcCSSValuesWithOffset = (cssValues: string, offset: number) => {
+  const values = cssValues.split(' ');
+
+  const newValues = values.map((value) => {
+    if (value.includes('px')) {
+      const number = Number(value.replace('px', ''));
+      return `${number + offset}px`;
+    }
+
+    return value;
+  });
+
+  return newValues.join(' ');
+};
+
+export default calcCSSValuesWithOffset;
diff --git a/src/utils/functions/calcCSSValuesWithOffset/index.ts b/src/utils/functions/calcCSSValuesWithOffset/index.ts
new file mode 100644
index 000000000..c0e0def48
--- /dev/null
+++ b/src/utils/functions/calcCSSValuesWithOffset/index.ts
@@ -0,0 +1 @@
+export { default as calcCSSValuesWithOffset } from './calcCSSValuesWithOffset';
diff --git a/src/utils/functions/copyToClipBoard/copyToClipBoard.ts b/src/utils/functions/copyToClipBoard/copyToClipBoard.ts
index ed3165a31..e8b18877f 100644
--- a/src/utils/functions/copyToClipBoard/copyToClipBoard.ts
+++ b/src/utils/functions/copyToClipBoard/copyToClipBoard.ts
@@ -1,28 +1,55 @@
 // --------------------------------------------------------------------------- //
 // ------------------- function to copy to the Clipboard --------------------- //
 // --------------------------------------------------------------------------- //
-const copyToClipboard = async (value: string) => {
-  // Create a textarea element
-  const textarea = document.createElement('textarea');
-  // Set the value of the textarea to the text you want to copy
-  textarea.value = value.toString();
-  // Set the styles for the textarea to be hidden
-  textarea.style.position = 'absolute';
-  textarea.style.left = '-9999px';
-  textarea.style.top = '-9999px';
-  // Append the textarea to the DOM
-  document.body.appendChild(textarea);
-  // Select the content of the textarea
-  textarea.select();
-  // Copy the selected content
+// https://stackoverflow.com/a/53951634/938822
+const copyToClipboard = (textToCopyd: string) => {
+  let textarea;
+  let result;
+
   try {
-    await navigator.clipboard.writeText(value);
-    console.log('Text copied to clipboard');
+    // Create a textarea element
+    textarea = document.createElement('textarea');
+    textarea.setAttribute('readonly', 'true');
+    textarea.setAttribute('contenteditable', 'true');
+    textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
+    textarea.value = textToCopyd;
+
+    // Set the styles for the textarea to be hidden
+    document.body.appendChild(textarea);
+
+    // Select the content of the textarea
+    textarea.focus();
+    textarea.select();
+
+    // Copy the selected content
+    const range = document.createRange();
+    range.selectNodeContents(textarea);
+
+    // Remove all ranges from the selection.
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+
+    textarea.setSelectionRange(0, textarea.value.length);
+    result = document.execCommand('copy');
+    textarea.blur();
   } catch (err) {
-    console.error('Failed to copy text: ', err);
+    console.error(err);
+    result = null;
+  } finally {
+    if (textarea) document.body.removeChild(textarea);
+  }
+
+  // manual copy fallback using prompt
+  if (!result) {
+    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    const copyHotkey = isMac ? '⌘C' : 'CTRL+C';
+    result = prompt(`Press ${copyHotkey}`, textToCopyd);
+    if (!result) {
+      return false;
+    }
   }
-  // Remove the textarea from the DOM
-  document.body.removeChild(textarea);
+  return true;
 };
 
 export default copyToClipboard;
diff --git a/src/utils/hooks/useActiveBreakpoint/index.ts b/src/utils/hooks/useActiveBreakpoint/index.ts
new file mode 100644
index 000000000..f46bbe83f
--- /dev/null
+++ b/src/utils/hooks/useActiveBreakpoint/index.ts
@@ -0,0 +1 @@
+export { useActiveBreakpoint } from './useActiveBreakpoint';
diff --git a/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.mdx b/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.mdx
new file mode 100644
index 000000000..83702767a
--- /dev/null
+++ b/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.mdx
@@ -0,0 +1,68 @@
+# useActiveBreakpoint Hook
+
+## Overview
+
+The `useActiveBreakpoint` hook simplifies responsive design in your React applications by dynamically determining the current active breakpoint based on user-defined media queries. It allows you to easily adjust layouts, styles, or content based on the screen size, making your components adaptable to different devices.
+
+## Importing the Hook
+
+Begin by importing the hook into your component file:
+
+```javascript
+import { useActiveBreakpoint } from 'fui-fancyui';
+```
+
+## Usage
+
+Here's how you utilize the hook in a functional component:
+
+```javascript
+import React from 'react';
+import { useActiveBreakpoint } from 'fui-fancyui';
+
+const MyComponent = () => {
+  // Define your breakpoints (adjust these as needed)
+  const breakpoints: Breakpoint[] = [
+    { identifier: 'xs', query: '(max-width: 575.98px)' },
+    { identifier: 'sm', query: '(min-width: 576px) and (max-width: 767.98px)' },
+    { identifier: 'md', query: '(min-width: 768px) and (max-width: 991.98px)' },
+    { identifier: 'lg', query: '(min-width: 992px) and (max-width: 1199.98px)' },
+    { identifier: 'xl', query: '(min-width: 1200px)' }
+  ];
+
+  const activeBreakpoint = useActiveBreakpoint(breakpoints);
+
+  return (
+    <div>
+      Current breakpoint: {activeBreakpoint || 'None'}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+**Explanation:**
+
+1. **Define Breakpoints:** Create an array of `Breakpoint` objects, each specifying an identifier (e.g., 'sm', 'md') and a corresponding media query string.
+2. **Call the Hook:** Pass your `breakpoints` array to the `useActiveBreakpoint` hook.
+3. **Access Active Breakpoint:** The hook returns the identifier of the active breakpoint (e.g., 'md') or `null` if no breakpoint matches.
+
+## Hook Definition
+
+- **Purpose:** To determine the currently active breakpoint from the provided user-defined breakpoints.
+- **Arguments:**
+  - `breakpoints` (required): An array of `Breakpoint` objects, where each object has an `identifier` (string) and a `query` (string).
+- **Return Value:**
+  - The identifier (string) of the active breakpoint if a match is found.
+  - `null` if none of the provided breakpoints match the current screen size.
+
+**How It Works:**
+
+- The hook uses `useState` to store the active breakpoint and `useEffect` to monitor window resize events.
+- On resize, it evaluates the media queries you provided and updates the state with the matching breakpoint identifier.
+
+## Important Considerations
+
+- **Breakpoint Definition:** Carefully define your breakpoints to match your design requirements. Consider standard breakpoints (xs, sm, md, lg, xl) or create custom ones.
+- **Null Handling:** Always handle the case where `null` is returned (e.g., on initial render or when no breakpoints match).
diff --git a/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.ts b/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.ts
new file mode 100644
index 000000000..25638814d
--- /dev/null
+++ b/src/utils/hooks/useActiveBreakpoint/useActiveBreakpoint.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { TBreakpoint } from '@/types/TBreakPoint';
+
+export const useActiveBreakpoint = (breakpoints?: TBreakpoint[]) => {
+  // Helper to get the active breakpoint based on media query matches
+  const getActiveBreakpoint = (): string | null => {
+    if (!breakpoints) return null;
+
+    for (const breakpoint of breakpoints) {
+      if (window.matchMedia(breakpoint.query).matches) {
+        return breakpoint.id;
+      }
+    }
+    return null; // No match found
+  };
+
+  const [activeBreakpoint, setActiveBreakpoint] = useState<string | null>(getActiveBreakpoint());
+
+  useEffect(() => {
+    const handleResize = () => {
+      setActiveBreakpoint(getActiveBreakpoint());
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [breakpoints]); // Re-evaluate on breakpoints change
+
+  return activeBreakpoint;
+};
diff --git a/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.mdx b/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.mdx
deleted file mode 100644
index 3b135d3e9..000000000
--- a/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
-# useWichBreakPointIsActive Hook
-
-## Overview
-
-The `useWichBreakPointIsActive` hook is designed to help you easily determine the current active breakpoint in your React application. It leverages the `window.matchMedia()` API to detect changes in the viewport sizeC and returns the active breakpoint name based on your application's theme breakpoints.
-
-## Importing the Hook
-
-First, you need to import the hook into your component:
-
-```javascript
-import { useWichBreakPointIsActive } from 'path-to-your-hooks-folder';
-```
-
-## Usage
-
-You can use this hook in any functional component to get the current active breakpoint. This is particularly useful for responsive designs where different layouts or styles are needed for different screen sizes.
-
-```javascript
-import React from 'react';
-import { useWichBreakPointIsActive } from 'path-to-your-hooks-folder';
-
-const MyComponent = () => {
-  const activeBreakpoint = useWichBreakPointIsActive();
-
-  return <div>Current breakpoint: {activeBreakpoint}</div>;
-};
-
-export default MyComponent;
-```
-
-## Hook Definition
-
-Here's a breakdown of the `useWichBreakPointIsActive` hook:
-
-- **Purpose**: To determine the currently active breakpoint based on the window sizeC.
-- **Return Value**: Returns the name of the current active breakpoint as a string (e.g., 'sm', 'md', 'lg', 'xl', or 'xs').
-
-The hook uses the `useState` and `useEffect` hooks from React to maintain and update the state of the active breakpoint.
-
-## Note
-
-- The hook relies on the breakpoints defined in your theme store (`themeStore`). Make sure these are set up correctly.
-- The hook will automatically clean up the event listener on component unmount to prevent memory leaks.
diff --git a/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.ts b/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.ts
deleted file mode 100644
index 9aed6c5c2..000000000
--- a/src/utils/hooks/useWichBreakPointIsActive/useWichBreakPointIsActive.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react';
-import { themeStore } from '@/design/theme/themeStore';
-import { TBreakPoints } from 'lib';
-
-export const useWichBreakPointIsActive = () => {
-  const breakpoints = themeStore.getState().theme.breakpoints;
-
-  // Helper function to get the current breakpoint
-  const getCurrentBreakpoint = () => {
-    if (window.matchMedia(breakpoints.xl).matches) {
-      return 'xl';
-    } else if (window.matchMedia(breakpoints.lg).matches) {
-      return 'lg';
-    } else if (window.matchMedia(breakpoints.md).matches) {
-      return 'md';
-    } else if (window.matchMedia(breakpoints.sm).matches) {
-      return 'sm';
-    } else {
-      return 'xs';
-    }
-  };
-
-  // State to store the current breakpoint
-  const [activeBreakpoint, setActiveBreakpoint] = useState(getCurrentBreakpoint());
-
-  useEffect(() => {
-    // Update the breakpoint on window resize
-    const handleResize = () => {
-      setActiveBreakpoint(getCurrentBreakpoint());
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    // Cleanup the event listener on component unmount
-    return () => window.removeEventListener('resize', handleResize);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return activeBreakpoint as TBreakPoints;
-};