diff --git a/lib/index.ts b/lib/index.ts
index d3b2673ad..1df052cbd 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -49,7 +49,7 @@ export * from '@/components/atoms/RawLI';
 export * from '@/components/atoms/RawUL';
 export * from '@/components/atoms/RawA';
 export * from '@/components/atoms/RawNav';
-export * from '@/components/atoms/SpacingContainer';
+export * from '@/components/atoms/FancySpacingBox';
 export * from '@/components/atoms/DateInput';
 export * from '@/components/atoms/SystemMessage';
 export * from '@/components/atoms/NumberInput';
@@ -58,6 +58,7 @@ export * from '@/components/atoms/TextInput';
 export * from '@/components/atoms/SkeletonBox';
 export * from '@/components/atoms/TextGradient';
 export * from '@/components/atoms/TitleForComponent';
+export * from '@/components/atoms/ColoredText';
 
 // ---------- Molecules ------- //
 export * from '@/components/molecules/DateNumberWithStatus';
@@ -131,6 +132,7 @@ export * from '@/components/templates/FancyInfoCard';
 export * from '@/components/templates/FancyDateDropDown';
 export * from '@/components/templates/FancyMenuItem';
 export * from '@/components/templates/FancyGrid';
+export * from '@/components/templates/FancyGridItem';
 export * from '@/components/templates/FancyRadioList';
 export * from '@/components/templates/FancyFlexBox';
 export * from '@/components/templates/FancyHandyNav';
diff --git a/src/App.tsx b/src/App.tsx
index 1682dc4e8..e2e1d3bc5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -61,7 +61,7 @@ const OwnUl = styled.ul<{ theme: TTheme }>`
 
   li {
     a {
-      color: ${({ theme }) => theme.colors.secondary[0]};
+      color: ${({ theme }) => theme.color.secondary[0]};
       text-decoration: none;
     }
   }
diff --git a/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx b/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx
index a23d96e96..b4b716050 100644
--- a/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx
+++ b/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx
@@ -9,13 +9,13 @@ import { TTheme } from '@/types/TTheme';
 export default function ColorGeneratorRoute() {
   const theme = themeStore((state) => state.theme);
   //get keys of primary
-  const primaryKeys = Object?.keys(theme?.colors.primary);
-  const accentKeys = Object?.keys(theme?.colors.accent);
-  const secondaryKeys = Object?.keys(theme?.colors.secondary);
-  const infoKeys = Object?.keys(theme?.colors.info);
-  const warningKeys = Object?.keys(theme?.colors.warning);
-  const errorKeys = Object?.keys(theme?.colors.error);
-  const successKeys = Object?.keys(theme?.colors.success);
+  const primaryKeys = Object?.keys(theme?.color.primary);
+  const accentKeys = Object?.keys(theme?.color.accent);
+  const secondaryKeys = Object?.keys(theme?.color.secondary);
+  const infoKeys = Object?.keys(theme?.color.info);
+  const warningKeys = Object?.keys(theme?.color.warning);
+  const errorKeys = Object?.keys(theme?.color.error);
+  const successKeys = Object?.keys(theme?.color.success);
 
   return (
     <div style={{ display: 'flex' }}>
@@ -24,7 +24,7 @@ export default function ColorGeneratorRoute() {
           return (
             <div
               key={index}
-              style={{ width: '100px', height: '100px', backgroundColor: theme.colors.primary[color] }}
+              style={{ width: '100px', height: '100px', backgroundColor: theme.color.primary[color] }}
             ></div>
           );
         })}
@@ -34,7 +34,7 @@ export default function ColorGeneratorRoute() {
           return (
             <div
               key={index}
-              style={{ width: '100px', height: '100px', backgroundColor: theme.colors.accent[color] }}
+              style={{ width: '100px', height: '100px', backgroundColor: theme.color.accent[color] }}
             ></div>
           );
         })}
@@ -44,7 +44,7 @@ export default function ColorGeneratorRoute() {
           return (
             <div
               key={index}
-              style={{ width: '100px', height: '100px', backgroundColor: theme.colors.accent[color] }}
+              style={{ width: '100px', height: '100px', backgroundColor: theme.color.accent[color] }}
             ></div>
           );
         })}
@@ -55,7 +55,7 @@ export default function ColorGeneratorRoute() {
           return (
             <div
               key={index}
-              style={{ width: '100px', height: '100px', backgroundColor: theme.colors.secondary[color] }}
+              style={{ width: '100px', height: '100px', backgroundColor: theme.color.secondary[color] }}
             ></div>
           );
         })}
@@ -65,7 +65,7 @@ export default function ColorGeneratorRoute() {
           return (
             <div
               key={index}
-              style={{ width: '100px', height: '100px', backgroundColor: theme.colors.warning[color] }}
+              style={{ width: '100px', height: '100px', backgroundColor: theme.color.warning[color] }}
             ></div>
           );
         })}
@@ -75,7 +75,7 @@ export default function ColorGeneratorRoute() {
           return (
             <div
               key={index}
-              style={{ width: '100px', height: '100px', backgroundColor: theme.colors.error[color] }}
+              style={{ width: '100px', height: '100px', backgroundColor: theme.color.error[color] }}
             ></div>
           );
         })}
@@ -85,7 +85,7 @@ export default function ColorGeneratorRoute() {
           return (
             <div
               key={index}
-              style={{ width: '100px', height: '100px', backgroundColor: theme.colors.success[color] }}
+              style={{ width: '100px', height: '100px', backgroundColor: theme.color.success[color] }}
             ></div>
           );
         })}
diff --git a/src/Routes/DesignWrapper/Wrapper.tsx b/src/Routes/DesignWrapper/Wrapper.tsx
index 3ccf8ef57..ffd3a6d9d 100644
--- a/src/Routes/DesignWrapper/Wrapper.tsx
+++ b/src/Routes/DesignWrapper/Wrapper.tsx
@@ -15,7 +15,7 @@ const Area = styled.div<{ $style: CSSProp; theme: TTheme }>`
   width: 90%;
   display: flex;
   flex-direction: column;
-  color: ${({ theme }) => theme.colors.secondary[0]};
+  color: ${({ theme }) => theme.color.secondary[0]};
 
   & > h1 {
     text-align: center;
diff --git a/src/Routes/InfoCardRoute/InfoCardRoute.tsx b/src/Routes/InfoCardRoute/InfoCardRoute.tsx
index 8d6468ca4..ebda01e16 100644
--- a/src/Routes/InfoCardRoute/InfoCardRoute.tsx
+++ b/src/Routes/InfoCardRoute/InfoCardRoute.tsx
@@ -17,6 +17,7 @@ export default function InfoCardRoute() {
           </FancyBox>
           <FancyInfoCard
             outlined
+            icon={<SVGCheckMark />}
             sizeC="sm"
             themeType="info"
             title="A Vergy good title"
diff --git a/src/Routes/TextGradientRoute/TextGradientRoute.tsx b/src/Routes/TextGradientRoute/TextGradientRoute.tsx
index fca7c49d1..fe0ab8532 100644
--- a/src/Routes/TextGradientRoute/TextGradientRoute.tsx
+++ b/src/Routes/TextGradientRoute/TextGradientRoute.tsx
@@ -4,7 +4,7 @@ import { themeStore } from '@/design/theme/themeStore';
 import { Typography } from '@/components/atoms/Typography';
 import { TGradientColor } from '@/components/atoms/TextGradient/TTextGradient.model';
 
-const themeColors = themeStore.getState().theme.colors;
+const themeColors = themeStore.getState().theme.color;
 
 const colorsArray: TGradientColor[] = [
   {
diff --git a/src/components/atoms/AvilableDot/AvailableDot.tsx b/src/components/atoms/AvilableDot/AvailableDot.tsx
index d453fb1be..be1ccee21 100644
--- a/src/components/atoms/AvilableDot/AvailableDot.tsx
+++ b/src/components/atoms/AvilableDot/AvailableDot.tsx
@@ -13,11 +13,11 @@ const AvailableDot = styled.div<{ $available?: IAvailableDot; theme?: TTheme }>`
   background-color: ${({ $available = 'completly', theme }) => {
     switch ($available) {
       case 'completly':
-        return theme.colors.success[0];
+        return theme.color.success[0];
       case 'partially':
-        return theme.colors.warning[0];
+        return theme.color.warning[0];
       case 'not':
-        return theme.colors.error[0];
+        return theme.color.error[0];
       case 'transparent':
         return 'transparent';
     }
diff --git a/src/components/atoms/ColorIndicator/ColorIndicator.style.tsx b/src/components/atoms/ColorIndicator/ColorIndicator.style.tsx
index 663352267..474b98feb 100644
--- a/src/components/atoms/ColorIndicator/ColorIndicator.style.tsx
+++ b/src/components/atoms/ColorIndicator/ColorIndicator.style.tsx
@@ -22,8 +22,8 @@ export const Indicator = styled.div.attrs<{ $color: string; theme: TTheme }>(({
   },
 }))<{ $isActive: boolean }>`
   border-radius: 50% 50% 50% 0;
-  border: 1.5px solid ${({ theme }) => theme.colors.secondary[0]};
-  background-color: ${({ theme }) => theme.colors.secondary[0]};
+  border: 1.5px solid ${({ theme }) => theme.color.secondary[0]};
+  background-color: ${({ theme }) => theme.color.secondary[0]};
   ${boxShadow.sm};
   position: absolute;
   top: ${({ $isActive }) => ($isActive ? '-105px' : '-5px')};
diff --git a/src/components/atoms/ColoredText/ColoredText.style.tsx b/src/components/atoms/ColoredText/ColoredText.style.tsx
new file mode 100644
index 000000000..d0d1930bd
--- /dev/null
+++ b/src/components/atoms/ColoredText/ColoredText.style.tsx
@@ -0,0 +1,23 @@
+import { styled } from 'styled-components';
+import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
+
+import { TColoredText } from './TColoredText.model';
+import { TTheme } from '@/types/TTheme';
+import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent';
+import { simpleColorTransition } from '@/design/designFunctions/simpleColorTransition';
+
+type TStyledItem = TStyledPrefixAndPicker<TColoredText, 'layer' | 'themeType' | 'hoverLayer' | 'externalStyle'>;
+export const StyledItem = styled.span<TStyledItem & { theme: TTheme }>`
+  * {
+    color: ${({ theme, $themeType = 'secondary', $layer = 0 }) => getBackgroundColor({ theme, $themeType, $layer })};
+
+    &:hover {
+      color: ${({ theme, $themeType = 'secondary', $hoverLayer = 2 }) =>
+        getBackgroundColor({ theme, $themeType, $layer: $hoverLayer })};
+    }
+
+    ${simpleColorTransition}
+
+    ${({ $externalStyle }) => $externalStyle}
+  }
+`;
diff --git a/src/components/atoms/ColoredText/ColoredText.tsx b/src/components/atoms/ColoredText/ColoredText.tsx
new file mode 100644
index 000000000..c45cff175
--- /dev/null
+++ b/src/components/atoms/ColoredText/ColoredText.tsx
@@ -0,0 +1,14 @@
+import { TDynamicElement } from '@/types/TDynamicElement';
+import { StyledItem } from './ColoredText.style';
+import { TColoredText } from './TColoredText.model';
+import { ElementType } from 'react';
+
+export default function ColoredText<T extends ElementType>(props: TColoredText & TDynamicElement<T>) {
+  const { as, children, themeType, layer, externalStyle } = props;
+
+  return (
+    <StyledItem as={as} $themeType={themeType} $layer={layer} $externalStyle={externalStyle}>
+      {children}
+    </StyledItem>
+  );
+}
diff --git a/src/components/atoms/ColoredText/TColoredText.model.ts b/src/components/atoms/ColoredText/TColoredText.model.ts
new file mode 100644
index 000000000..8d26f6459
--- /dev/null
+++ b/src/components/atoms/ColoredText/TColoredText.model.ts
@@ -0,0 +1,11 @@
+import { TLayer } from '@/types/TLayer';
+import { TUiColorTypes } from '@/types/TUiColorTypes';
+import { CSSProp } from 'styled-components';
+
+export type TColoredText = {
+  children?: React.ReactNode;
+  themeType?: TUiColorTypes;
+  layer?: TLayer;
+  hoverLayer?: TLayer;
+  externalStyle?: CSSProp;
+};
diff --git a/src/components/atoms/ColoredText/docu/ColoredText.stories.tsx b/src/components/atoms/ColoredText/docu/ColoredText.stories.tsx
new file mode 100644
index 000000000..f100fc6af
--- /dev/null
+++ b/src/components/atoms/ColoredText/docu/ColoredText.stories.tsx
@@ -0,0 +1,73 @@
+// Import necessary dependencies
+import { Meta, StoryObj } from '@storybook/react';
+
+// Import the component to be tested
+import ColoredText from '../ColoredText';
+import templateThemeType from '@/stories/templateSettingsForStorys/templatesForThemeType';
+// Define metadata for the story
+const meta = {
+  title: 'components/atoms/ColoredText',
+  component: ColoredText,
+  parameters: {
+    docs: {
+      description: {
+        component: ' A component that displays text with a color based on the themeType and layer properties.',
+      },
+    },
+  },
+
+  // Define arguments for the story
+  argTypes: {
+    hoverLayer: {
+      description: 'The active state of the color indicator',
+      control: {
+        type: 'range',
+        min: 0,
+        max: 9,
+        step: 1,
+      },
+      table: {
+        defaultValue: { summary: 2 },
+      },
+    },
+    ...templateThemeType('allThemeTypes', 'secondary', 0),
+    externalStyle: {
+      description: 'External style for the component',
+      control: {
+        type: 'object',
+      },
+    },
+    as: {
+      description: 'The element type to render (all types)',
+      control: {
+        type: 'select',
+        options: ['span', 'div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      },
+      table: {
+        defaultValue: { summary: 'span' },
+      },
+    },
+  },
+
+  // Add tags to the story
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColoredText>;
+
+// Export the metadata
+export default meta;
+// Define the story object
+type Story = StoryObj<typeof meta>;
+
+// Define the primary story
+export const Primary: Story = {
+  render: (args) => (
+    <ColoredText {...args}>
+      <span>Moooiin</span>
+    </ColoredText>
+  ),
+  args: {
+    themeType: 'primary',
+    layer: 0,
+    as: 'span',
+  },
+};
diff --git a/src/components/atoms/ColoredText/index.ts b/src/components/atoms/ColoredText/index.ts
new file mode 100644
index 000000000..292b40ee7
--- /dev/null
+++ b/src/components/atoms/ColoredText/index.ts
@@ -0,0 +1,2 @@
+export { default as ColoredText } from './ColoredText';
+export type { TColoredText } from './TColoredText.model';
diff --git a/src/components/atoms/DateNumberAtom/DateNumberAtom.style.tsx b/src/components/atoms/DateNumberAtom/DateNumberAtom.style.tsx
index a540a3217..50cb7ee93 100644
--- a/src/components/atoms/DateNumberAtom/DateNumberAtom.style.tsx
+++ b/src/components/atoms/DateNumberAtom/DateNumberAtom.style.tsx
@@ -26,8 +26,8 @@ export const StyledDay = styled.button<IStyledDay & { theme: TTheme }>`
   align-items: center;
   border-radius: ${({ theme }) => theme.borderRadius.complete};
   color: ${({ $isCurrentDay, theme, $themeType = 'secondary', $layer }) =>
-    $isCurrentDay ? theme.colors.accent[0] : getTextColor({ $themeType, $textLayer: $layer, theme })};
-  border: ${({ $selected, theme }) => ($selected ? `1px solid ${theme.colors.accent[0]}` : `none`)};
+    $isCurrentDay ? theme.color.accent[0] : getTextColor({ $themeType, $textLayer: $layer, theme })};
+  border: ${({ $selected, theme }) => ($selected ? `1px solid ${theme.color.accent[0]}` : `none`)};
   background-color: transparent;
   padding: 0;
   min-height: 24px;
@@ -47,30 +47,30 @@ export const StyledDay = styled.button<IStyledDay & { theme: TTheme }>`
 
   &:hover,
   &:active {
-    border: 1px solid ${({ theme }) => theme.colors.accent[0]};
+    border: 1px solid ${({ theme }) => theme.color.accent[0]};
   }
 
   ${({ $range, theme }) =>
     $range?.start &&
     css`
       border-radius: 40% 5px 5px 40%;
-      background-color: ${theme.colors.accent[0]};
-      color: ${theme.colors.secondary[0]};
+      background-color: ${theme.color.accent[0]};
+      color: ${theme.color.secondary[0]};
     `}
 
   ${({ $range, theme }) =>
     $range?.inRange &&
     css`
-      background-color: ${theme.colors.accent[0]};
-      color: ${theme.colors.secondary[0]};
+      background-color: ${theme.color.accent[0]};
+      color: ${theme.color.secondary[0]};
     `}
 
   ${({ $range, theme }) =>
     $range?.end &&
     css`
       border-radius: 5px 40% 40% 5px;
-      background-color: ${theme.colors.accent[0]};
-      color: ${theme.colors.secondary[0]};
+      background-color: ${theme.color.accent[0]};
+      color: ${theme.color.secondary[0]};
     `}
 
   &:disabled {
diff --git a/src/components/atoms/DescriptionPreview/DescriptionPreview.tsx b/src/components/atoms/DescriptionPreview/DescriptionPreview.tsx
index 27f144e5b..d9385ef72 100644
--- a/src/components/atoms/DescriptionPreview/DescriptionPreview.tsx
+++ b/src/components/atoms/DescriptionPreview/DescriptionPreview.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { Typography } from '@/components/atoms/Typography';
 import { RawButton } from '@/components/atoms/RawButton';
-import { SpacingsContainer } from '@/components/atoms/SpacingContainer';
+import { FancySpacingBox } from '@/components/atoms/FancySpacingBox';
 import { TDescriptionPreview } from '@/components/atoms/DescriptionPreview/DescriptionPreview.model';
 
 export default function DescriptionPreview(props: TDescriptionPreview) {
@@ -14,7 +14,7 @@ export default function DescriptionPreview(props: TDescriptionPreview) {
   return (
     <>
       {description.length < letterLimit || isShowMore ? description : preview}
-      <SpacingsContainer as={'span'} margin={['xxs', 0, 0, 0]}>
+      <FancySpacingBox as={'span'} margin={['xxs', 0, 0, 0]}>
         {description.length > letterLimit && (
           <RawButton onClick={() => setIsShowMore((prev) => !prev)}>
             <Typography
@@ -27,7 +27,7 @@ export default function DescriptionPreview(props: TDescriptionPreview) {
             </Typography>
           </RawButton>
         )}
-      </SpacingsContainer>
+      </FancySpacingBox>
     </>
   );
 }
diff --git a/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx b/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx
index 733f88a3d..f94e3627c 100644
--- a/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx
+++ b/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx
@@ -13,7 +13,7 @@ export const SelectField = styled.select<ISelectField & { theme: TTheme }>`
   position: relative;
   box-sizing: border-box;
   ${({ theme }) => css`
-    background-image: ${`url("data:image/svg+xml;utf8,<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='${theme.colors.secondary[4].replace(
+    background-image: ${`url("data:image/svg+xml;utf8,<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='${theme.color.secondary[4].replace(
       '#',
       '%23'
     )}'><path d='M.508 5.444c-.261.246-.363.508-.363.9 0 .523.174.726 4.181 4.718 3.861 3.861 4.21 4.18 4.674 4.18s.813-.319 4.674-4.181c4.007-3.992 4.181-4.195 4.181-4.717 0-.711-.523-1.263-1.19-1.263-.421 0-.842.377-4.065 3.585L9 12.252 5.4 8.666C2.177 5.458 1.756 5.081 1.335 5.081c-.319 0-.595.131-.827.363z'/></svg>")`};
@@ -22,7 +22,7 @@ export const SelectField = styled.select<ISelectField & { theme: TTheme }>`
   background-repeat: no-repeat;
   background-position: right ${({ theme }) => theme.spacing.xxs} bottom 30%;
   text-align-last: ${({ $align }) => ($align !== 'center' ? 'left' : 'center')};
-  color: ${({ theme }) => theme.colors.secondary[0]};
+  color: ${({ theme }) => theme.color.secondary[0]};
   border: none;
   width: 100%;
   font-weight: 500;
@@ -41,27 +41,27 @@ export const SelectField = styled.select<ISelectField & { theme: TTheme }>`
 
   /* When a item is checked in the dropdown */
   &:focus option:checked {
-    background: ${({ theme }) => theme.colors.accent[1]};
+    background: ${({ theme }) => theme.color.accent[1]};
   }
 
   optgroup {
     font-weight: bold;
-    color: ${({ theme }) => theme.colors.accent[2]};
-    background-color: ${({ theme }) => theme.colors.primary[2]};
+    color: ${({ theme }) => theme.color.accent[2]};
+    background-color: ${({ theme }) => theme.color.primary[2]};
     text-align: ${({ $align }) => ($align !== 'left' ? 'center' : 'left')};
 
     &:disabled {
-      background: ${({ theme }) => theme.colors.secondary[9]};
+      background: ${({ theme }) => theme.color.secondary[9]};
     }
   }
 
   option {
-    background-color: ${({ theme }) => theme.colors.primary[1]};
+    background-color: ${({ theme }) => theme.color.primary[1]};
     text-align: ${({ $align }) => ($align !== 'left' ? 'center' : 'left')};
-    color: ${({ theme }) => theme.colors.secondary[0]};
+    color: ${({ theme }) => theme.color.secondary[0]};
 
     &:disabled {
-      background: ${({ theme }) => theme.colors.secondary[9]};
+      background: ${({ theme }) => theme.color.secondary[9]};
     }
   }
 `;
diff --git a/src/components/atoms/FancyBox/FancyBox.style.tsx b/src/components/atoms/FancyBox/FancyBox.style.tsx
index f13f45817..fbe1a3fe0 100644
--- a/src/components/atoms/FancyBox/FancyBox.style.tsx
+++ b/src/components/atoms/FancyBox/FancyBox.style.tsx
@@ -6,13 +6,12 @@ import { TTheme } from '@/types/TTheme';
 
 import { TFancyBox } from './FancyBox.model';
 import { TThemeArrayOrValueCSS, arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
-import { calcBorderSizeMinusBoxSize } from '@/design/designFunctions/calcBorderSizeMinusBoxSize';
 
 // the fancy box that gets the style from the theme
 type IStyledFancyBox = TStyledPrefixAndPicker<TFancyBox> & { theme?: TTheme; $padding?: TThemeArrayOrValueCSS };
 export const StyledFancyBox = styled.div<IStyledFancyBox>`
   border-radius: ${({ $borderRadius }) => arrayToCssValues($borderRadius, 'borderRadius')};
-  padding: ${({ $padding }) => calcBorderSizeMinusBoxSize($padding, 4)};
+  padding: ${({ $padding }) => arrayToCssValues($padding, 'spacing')};
   box-sizing: border-box;
   ${({ $themeType, theme, $layer, $outlined, $outlinedBackgroundStrength }) =>
     generateThemeForCard({ $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength })};
diff --git a/src/components/atoms/FancyBox/sizeSettings.ts b/src/components/atoms/FancyBox/sizeSettings.ts
index 1580c2cbe..cbc857fb6 100644
--- a/src/components/atoms/FancyBox/sizeSettings.ts
+++ b/src/components/atoms/FancyBox/sizeSettings.ts
@@ -8,7 +8,7 @@ type TSizeObj = {
 
 export const sizeSettings: TSizeSettings<TSizeObj> = {
   sm: {
-    padding: ['xxs'],
+    padding: ['xs', 'md'],
     borderRadius: 'sm',
   },
   md: {
@@ -16,7 +16,7 @@ export const sizeSettings: TSizeSettings<TSizeObj> = {
     borderRadius: 'md',
   },
   lg: {
-    padding: ['lg', 'xl'],
+    padding: ['md', 'lg'],
     borderRadius: 'lg',
   },
 };
diff --git a/src/components/atoms/FancyLoadingBar/FancyLoadingBar.style.tsx b/src/components/atoms/FancyLoadingBar/FancyLoadingBar.style.tsx
index ed924425f..6d9ab657c 100644
--- a/src/components/atoms/FancyLoadingBar/FancyLoadingBar.style.tsx
+++ b/src/components/atoms/FancyLoadingBar/FancyLoadingBar.style.tsx
@@ -34,7 +34,7 @@ export const LoadingBar = styled.div<TLoadingBar & { theme: TTheme }>`
   background-image: linear-gradient(
     90deg,
     transparent,
-    ${({ theme, $layer = 0, $themeType = 'accent' }) => theme.colors[$themeType][$layer]},
+    ${({ theme, $layer = 0, $themeType = 'accent' }) => theme.color[$themeType][$layer]},
     transparent
   );
   animation: ${loadingAnimation} 3s ease-in-out infinite; // Set the animation duration to 3s
diff --git a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts
index 293c31588..fdbd0d312 100644
--- a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts
+++ b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts
@@ -18,9 +18,9 @@ interface IGenerateBorder {
 const generateBorder = ({ $sizeC, theme, $layer, $themeType = 'accent' }: IGenerateBorder): CSSProp => {
   return css`
     border-top: ${$sizeC} solid transparent;
-    border-right: ${$sizeC} solid ${theme.colors[$themeType][$layer || 0]};
+    border-right: ${$sizeC} solid ${theme.color[$themeType][$layer || 0]};
     border-bottom: ${$sizeC} solid transparent;
-    border-left: ${$sizeC} solid ${theme.colors[$themeType][$layer || 0]};
+    border-left: ${$sizeC} solid ${theme.color[$themeType][$layer || 0]};
   `;
 };
 
diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx
index 8ebdb50c2..e12a891c2 100644
--- a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx
+++ b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx
@@ -20,6 +20,7 @@ export default function FancyProfilePicture(props: TFancyProfilePictureWithHTMLA
     <FancyImageWrapper
       aspectRatio="1/1"
       sizeW={sizeC}
+      sizeH={sizeC}
       externalStyle={externalStyle}
       borderRadius={borderRadius}
       {...htmlProps}
diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
index b968cac3d..2b21335a9 100644
--- a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
+++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx
@@ -18,9 +18,9 @@ interface ICalcIconColor {
 // calculate the color of the icon based on the props and the theme
 const calcIconColor = ({ theme, $isActive, $systemMessage, $themeType, $layer }: ICalcIconColor): string => {
   if (!$systemMessage) {
-    return $isActive ? theme.colors.accent[0] : getBackgroundColor({ theme, $themeType, $layer });
+    return $isActive ? theme.color.accent[0] : getBackgroundColor({ theme, $themeType, $layer });
   } else {
-    return theme.colors[$systemMessage][$layer ?? 0];
+    return theme.color[$systemMessage][$layer ?? 0];
   }
 };
 
diff --git a/src/components/atoms/SpacingContainer/SpacingContainer.style.tsx b/src/components/atoms/FancySpacingBox/FancySpacingBox.style.tsx
similarity index 69%
rename from src/components/atoms/SpacingContainer/SpacingContainer.style.tsx
rename to src/components/atoms/FancySpacingBox/FancySpacingBox.style.tsx
index d7908afb9..1a834089e 100644
--- a/src/components/atoms/SpacingContainer/SpacingContainer.style.tsx
+++ b/src/components/atoms/FancySpacingBox/FancySpacingBox.style.tsx
@@ -1,10 +1,10 @@
 import { styled } from 'styled-components';
 
-import { TSpacingsContainer } from '@/components/atoms/SpacingContainer/TSpacingsContainer.model';
+import { TFancySpacingBox } from '@/components/atoms/FancySpacingBox/TFancySpacingBox.model';
 import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 import arrayToCssValues from '@/design/designFunctions/arrayToCssValues/arrayToCssValues';
 
-export const StyledSpacingsContainer = styled.div<TStyledPrefixAndPicker<TSpacingsContainer>>`
+export const StyledSpacingsBox = styled.div<TStyledPrefixAndPicker<TFancySpacingBox>>`
   display: block;
   padding: ${({ $padding }) => $padding && arrayToCssValues($padding, 'spacing')};
   margin: ${({ $margin }) => $margin && arrayToCssValues($margin, 'spacing')};
diff --git a/src/components/atoms/FancySpacingBox/FancySpacingBox.tsx b/src/components/atoms/FancySpacingBox/FancySpacingBox.tsx
new file mode 100644
index 000000000..8a0dd7b90
--- /dev/null
+++ b/src/components/atoms/FancySpacingBox/FancySpacingBox.tsx
@@ -0,0 +1,20 @@
+import { ElementType } from 'react';
+
+import { TFancySpacingBoxWithHTMLAttrs } from './TFancySpacingBox.model';
+import { StyledSpacingsBox } from '@/components/atoms/FancySpacingBox/FancySpacingBox.style';
+
+export default function FancySpacingBox<T extends ElementType = 'div'>(props: TFancySpacingBoxWithHTMLAttrs<T>) {
+  const { children, padding, margin, as, externalStyle, ...htmlProps } = props;
+
+  return (
+    <StyledSpacingsBox
+      as={as ?? 'div'}
+      $padding={padding}
+      $margin={margin}
+      $externalStyle={externalStyle}
+      {...htmlProps}
+    >
+      {children}
+    </StyledSpacingsBox>
+  );
+}
diff --git a/src/components/atoms/FancySpacingBox/TFancySpacingBox.model.ts b/src/components/atoms/FancySpacingBox/TFancySpacingBox.model.ts
new file mode 100644
index 000000000..f9f1b1f46
--- /dev/null
+++ b/src/components/atoms/FancySpacingBox/TFancySpacingBox.model.ts
@@ -0,0 +1,16 @@
+import { ElementType } from 'react';
+import { CSSProp } from 'styled-components';
+
+import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+
+export type TFancySpacingBox = {
+  padding?: TThemeArrayOrValueCSS;
+  margin?: TThemeArrayOrValueCSS;
+  externalStyle?: CSSProp;
+};
+
+type TFancySpacingBoxHTMLProps<T extends ElementType> = {
+  as?: React.ElementType;
+} & Omit<React.HTMLAttributes<T>, 'style'>;
+
+export type TFancySpacingBoxWithHTMLAttrs<T extends ElementType> = TFancySpacingBox & TFancySpacingBoxHTMLProps<T>;
diff --git a/src/components/atoms/SpacingContainer/docu/SpacingContainer.mdx b/src/components/atoms/FancySpacingBox/docu/FancySpacingBox.mdx
similarity index 58%
rename from src/components/atoms/SpacingContainer/docu/SpacingContainer.mdx
rename to src/components/atoms/FancySpacingBox/docu/FancySpacingBox.mdx
index deaca299f..234d5503a 100644
--- a/src/components/atoms/SpacingContainer/docu/SpacingContainer.mdx
+++ b/src/components/atoms/FancySpacingBox/docu/FancySpacingBox.mdx
@@ -1,8 +1,8 @@
 import { Meta, Title, Description, Controls, Canvas } from '@storybook/blocks';
 
-import * as SpacingContainerStories from './SpacingContainer.stories';
+import * as FancySpacingBoxStories from './FancySpacingBox.stories';
 
-<Meta of={SpacingContainerStories} />
+<Meta of={FancySpacingBoxStories} />
 
 <Title />
 
@@ -10,12 +10,12 @@ import * as SpacingContainerStories from './SpacingContainer.stories';
 
 ## Setup Instructions
 
-To use the `SpacingContainer` component in your project, follow these steps:
+To use the `FancySpacingBox` component in your project, follow these steps:
 
-1. Import the `SpacingContainer` component where you intend to use it:
+1. Import the `FancySpacingBox` component where you intend to use it:
 
 ```jsx
-import { SpacingContainer } from 'fui-fancyui';
+import { FancySpacingBox } from 'fui-fancyui';
 ```
 
 2. If using TypeScript, you can import the type definitions for prop validation:
@@ -29,12 +29,12 @@ import { TSpacingsContainerWithHTMLAttrs, TSpacingsContainer } from 'fui-fancyui
 ## Example Usage
 
 ```jsx
-<SpacingContainer padding={['20px', '30px']} margin="10px" as="section">
+<FancySpacingBox padding={['20px', '30px']} margin="10px" as="section">
   <p>Your content here</p>
-</SpacingContainer>
+</FancySpacingBox>
 ```
 
-This example renders a `SpacingContainer` as a `<section>` element, with 20px padding on the top and bottom, 30px padding on the left and right, and a margin of 10px around it. Replace `"Your content here"` with your own content or components.
+This example renders a `FancySpacingBox` as a `<section>` element, with 20px padding on the top and bottom, 30px padding on the left and right, and a margin of 10px around it. Replace `"Your content here"` with your own content or components.
 
 <Canvas />
 
diff --git a/src/components/atoms/SpacingContainer/docu/SpacingContainer.stories.tsx b/src/components/atoms/FancySpacingBox/docu/FancySpacingBox.stories.tsx
similarity index 69%
rename from src/components/atoms/SpacingContainer/docu/SpacingContainer.stories.tsx
rename to src/components/atoms/FancySpacingBox/docu/FancySpacingBox.stories.tsx
index 009bae6fd..0092e3a8b 100644
--- a/src/components/atoms/SpacingContainer/docu/SpacingContainer.stories.tsx
+++ b/src/components/atoms/FancySpacingBox/docu/FancySpacingBox.stories.tsx
@@ -2,17 +2,17 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 // Import the component to be tested
-import SpacingContainer from '../SpacingsContainer';
+import FancySpacingBox from '../FancySpacingBox';
 
 // Define metadata for the story
 const meta = {
-  component: SpacingContainer,
-  title: 'components/atoms/SpacingContainer',
+  component: FancySpacingBox,
+  title: 'components/atoms/FancySpacingBox',
   parameters: {
     docs: {
       description: {
         component:
-          'The `SpacingContainer` component is a versatile wrapper designed to apply consistent spacing around its children through padding and margin properties. It supports dynamic element rendering using the `as` prop, allowing it to adapt to different semantic HTML elements as needed. This component is part of a design system aimed at providing flexible, consistent spacing utilities across an application.',
+          'The `FancySpacingBox` component is a versatile wrapper designed to apply consistent spacing around its children through padding and margin properties. It supports dynamic element rendering using the `as` prop, allowing it to adapt to different semantic HTML elements as needed. This component is part of a design system aimed at providing flexible, consistent spacing utilities across an application.',
       },
     },
   },
@@ -48,7 +48,7 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof SpacingContainer>;
+} satisfies Meta<typeof FancySpacingBox>;
 
 // Export the metadata
 export default meta;
@@ -58,9 +58,9 @@ type Story = StoryObj<typeof meta>;
 // Define the primary story
 export const Primary: Story = {
   render: (args) => (
-    <SpacingContainer {...args}>
+    <FancySpacingBox {...args}>
       <p>Some content</p>
-    </SpacingContainer>
+    </FancySpacingBox>
   ),
   args: {
     padding: '24px',
diff --git a/src/components/atoms/FancySpacingBox/index.tsx b/src/components/atoms/FancySpacingBox/index.tsx
new file mode 100644
index 000000000..a88ea229e
--- /dev/null
+++ b/src/components/atoms/FancySpacingBox/index.tsx
@@ -0,0 +1,3 @@
+export { default as FancySpacingBox } from './FancySpacingBox';
+
+export type { TFancySpacingBoxWithHTMLAttrs, TFancySpacingBox } from './TFancySpacingBox.model';
diff --git a/src/components/atoms/ProgressBar/ProgressBar.style.tsx b/src/components/atoms/ProgressBar/ProgressBar.style.tsx
index bf96fd22b..5cf84c203 100644
--- a/src/components/atoms/ProgressBar/ProgressBar.style.tsx
+++ b/src/components/atoms/ProgressBar/ProgressBar.style.tsx
@@ -30,7 +30,7 @@ interface IProgressBarFillProps {
 export const ProgressBarFill = styled.div<IProgressBarFillProps>`
   height: 100%;
   width: ${({ width }) => width}%;
-  background-color: ${({ theme }) => theme.colors.accent[0]};
+  background-color: ${({ theme }) => theme.color.accent[0]};
   border-radius: ${({ theme }) => theme.borderRadius.complete} 0 0 ${({ theme }) => theme.borderRadius.complete};
   transition: width 0.2s ease-out;
 `;
diff --git a/src/components/atoms/RawCheckbox/RawCheckbox.style.tsx b/src/components/atoms/RawCheckbox/RawCheckbox.style.tsx
index 12dde229a..914cc7e0d 100644
--- a/src/components/atoms/RawCheckbox/RawCheckbox.style.tsx
+++ b/src/components/atoms/RawCheckbox/RawCheckbox.style.tsx
@@ -62,7 +62,7 @@ export const FakeCheckbox = styled.div<TFakeCheckbox & { theme: TTheme }>`
     width: 20px;
     height: 20px;
     transform: translate(-50%, -50%);
-    fill: ${({ theme }) => theme.colors.accent[0]};
+    fill: ${({ theme }) => theme.color.accent[0]};
     display: ${({ $checked }) => ($checked ? 'block' : 'none')};
   }
 `;
diff --git a/src/components/atoms/RawInput/RawInput.tsx b/src/components/atoms/RawInput/RawInput.tsx
index 4eebe8d53..b8f9244de 100644
--- a/src/components/atoms/RawInput/RawInput.tsx
+++ b/src/components/atoms/RawInput/RawInput.tsx
@@ -17,6 +17,18 @@ const RawInput = styled.input<TRawInputWith$ & { theme?: TTheme }>`
   font-size: ${({ theme }) => theme.fontSizes.interactiveMd.fontSize};
   padding: 0;
 
+  // Remove the default autofill background color
+  &:-webkit-autofill,
+  &:-webkit-autofill:focus {
+    transition:
+      background-color 600000s 0s,
+      color 600000s 0s;
+  }
+
+  &[data-autocompleted] {
+    background-color: transparent !important;
+  }
+
   ${({ $externalStyle }) => $externalStyle};
 `;
 
diff --git a/src/components/atoms/RawRadio/RawRadio.style.tsx b/src/components/atoms/RawRadio/RawRadio.style.tsx
index 64758d890..1b1e99703 100644
--- a/src/components/atoms/RawRadio/RawRadio.style.tsx
+++ b/src/components/atoms/RawRadio/RawRadio.style.tsx
@@ -34,7 +34,7 @@ export const StyledRadio = styled.span<TStyledRadio & { theme: TTheme }>`
   height: 16px;
   border: 2px solid;
   border-color: ${({ $checked, $layer, $themeType = 'primary', theme }) =>
-    $checked ? theme.colors.accent[2] : getBackgroundColor({ theme, $themeType, $layer })};
+    $checked ? theme.color.accent[2] : getBackgroundColor({ theme, $themeType, $layer })};
   background: ${({ $checked, $layer, $themeType = 'primary', theme }) =>
     $checked ? 'transparent' : getBackgroundColor({ theme, $themeType, $layer })};
   border-radius: 50%;
@@ -54,7 +54,7 @@ export const StyledRadio = styled.span<TStyledRadio & { theme: TTheme }>`
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background: ${({ $checked, theme }) => ($checked ? theme.colors.accent[1] : 'transparent')};
+    background: ${({ $checked, theme }) => ($checked ? theme.color.accent[1] : 'transparent')};
     transition:
       background 0.2s ease,
       border-color 0.2s ease;
diff --git a/src/components/atoms/RawSlider/RawSlider.style.tsx b/src/components/atoms/RawSlider/RawSlider.style.tsx
index f0fcbe82d..340d5fd37 100644
--- a/src/components/atoms/RawSlider/RawSlider.style.tsx
+++ b/src/components/atoms/RawSlider/RawSlider.style.tsx
@@ -14,16 +14,16 @@ const DragableThumb = css<{ theme: TTheme; $isActive?: boolean }>`
   height: 24px;
   width: 24px;
   border-radius: 50%;
-  background: ${({ theme }) => theme.colors.accent[0]};
+  background: ${({ theme }) => theme.color.accent[0]};
   border: 4px solid transparent;
   transition: box-shadow 0.2s ease-in-out;
   ${boxShadow.sm}
 
   box-shadow: ${({ $isActive, theme }) =>
-    $isActive && `0 0 0 8px ${colorTransparencyCalculator(theme.colors.accent[0], 0.3)}`};
+    $isActive && `0 0 0 8px ${colorTransparencyCalculator(theme.color.accent[0], 0.3)}`};
 
   &:active {
-    background: ${({ theme }) => theme.colors.accent[1]};
+    background: ${({ theme }) => theme.color.accent[1]};
   }
 `;
 
@@ -46,7 +46,7 @@ export const StyledRawSlider = styled.input<TStyledRawSlider & { theme: TTheme }
   ${({ $sizeC }) => generateComponentSize($sizeC)};
   background: ${({ theme, $themeType = 'primary', $layer = 1 }) => getBackgroundColor({ theme, $themeType, $layer })};
   border-radius: ${({ theme }) => theme.borderRadius.complete};
-  background-image: ${({ theme }) => `linear-gradient(90deg, ${theme.colors.accent[0]}, ${theme.colors.accent[0]})`};
+  background-image: ${({ theme }) => `linear-gradient(90deg, ${theme.color.accent[0]}, ${theme.color.accent[0]})`};
   background-size: 70% 100%;
   background-repeat: no-repeat;
   z-index: 1;
diff --git a/src/components/atoms/SingleInput/SingleInput.style.tsx b/src/components/atoms/SingleInput/SingleInput.style.tsx
index d611b5fa1..0b52721cb 100644
--- a/src/components/atoms/SingleInput/SingleInput.style.tsx
+++ b/src/components/atoms/SingleInput/SingleInput.style.tsx
@@ -18,16 +18,16 @@ export const StyledSingleInput = styled.input<StyledSingleInputProps & { theme:
   width: 1.5ch;
   font-size: 24px;
   text-align: center;
-  color: ${({ theme }) => theme.colors.secondary[0]};
+  color: ${({ theme }) => theme.color.secondary[0]};
   border: 1.5px solid
     ${({ $hasValue, theme, $themeType = 'secondary', $layer }) =>
-      $hasValue ? theme.colors.accent[0] : getBackgroundColor({ theme, $themeType, $layer })};
+      $hasValue ? theme.color.accent[0] : getBackgroundColor({ theme, $themeType, $layer })};
   border-radius: 5px;
   padding: ${({ theme }) => theme.spacing.xs};
   background-color: transparent;
   appearance: none;
   outline: none;
-  box-shadow: ${({ $isFocused, theme }) => ($isFocused ? `0 0 2px 1px${theme.colors.accent[1]}` : 'none')};
+  box-shadow: ${({ $isFocused, theme }) => ($isFocused ? `0 0 2px 1px${theme.color.accent[1]}` : 'none')};
 
   ${({ $externalStyle }) => $externalStyle}
 `;
diff --git a/src/components/atoms/SkeletonBox/SkeletonBox.style.tsx b/src/components/atoms/SkeletonBox/SkeletonBox.style.tsx
index fe9874f70..b1669fa17 100644
--- a/src/components/atoms/SkeletonBox/SkeletonBox.style.tsx
+++ b/src/components/atoms/SkeletonBox/SkeletonBox.style.tsx
@@ -10,7 +10,7 @@ type TSyledSkeletonBox = TStyledPrefixAndPicker<TSkeletonBox>;
 export const StyledSkeletonBox = styled.div<TSyledSkeletonBox & { theme: TTheme }>`
   width: ${({ $sizeW }) => $sizeW && ($sizeW === 'fit' ? '100%' : globalElementsizes[$sizeW])};
   height: ${({ $sizeH }) => $sizeH && ($sizeH === 'fit' ? '100%' : globalElementsizes[$sizeH])};
-  background-color: ${({ theme, $themeType = 'primary', $layer }) => theme.colors[$themeType][$layer || 0]};
+  background-color: ${({ theme, $themeType = 'primary', $layer }) => theme.color[$themeType][$layer || 0]};
   animation: ${({ theme, $themeType, $layer }) => createLoadingKeyframes({ theme, $themeType, $layer })} 2s infinite;
   border-radius: ${({ theme, $borderRadius }) => theme.borderRadius[$borderRadius ?? 'xs'] || '0px'};
   ${({ $aspectRatio }) =>
@@ -28,12 +28,12 @@ const createLoadingKeyframes = ({
   $layer,
 }: TLoadingProps & { theme: TTheme }) => keyframes`
   0% {
-    background-color: ${theme.colors[$themeType][$layer ?? 0]};
+    background-color: ${theme.color[$themeType][$layer ?? 0]};
   }
   50% {
-    background-color: ${theme.colors[$themeType][$layer ? clampLayer($layer + 1) : 1]};
+    background-color: ${theme.color[$themeType][$layer ? clampLayer($layer + 1) : 1]};
   }
   100% {
-    background-color: ${theme.colors[$themeType][$layer ?? 0]};
+    background-color: ${theme.color[$themeType][$layer ?? 0]};
   }
 `;
diff --git a/src/components/atoms/SliderMarker/SliderMarker.style.tsx b/src/components/atoms/SliderMarker/SliderMarker.style.tsx
index 0c17573ee..805aa3b9d 100644
--- a/src/components/atoms/SliderMarker/SliderMarker.style.tsx
+++ b/src/components/atoms/SliderMarker/SliderMarker.style.tsx
@@ -18,9 +18,9 @@ export const WrapperMarker = styled.div`
 export const Marker = styled.div<{ theme: TTheme }>`
   box-sizing: border-box;
   position: relative;
-  border: ${({ theme }) => `solid 1px ${theme.colors.primary[0]} `};
+  border: ${({ theme }) => `solid 1px ${theme.color.primary[0]} `};
   width: 100%;
   height: 100%;
-  box-shadow: 0px 0px 1px 1px ${({ theme }) => colorTransparencyCalculator(theme.colors.secondary[0], 0.5)};
+  box-shadow: 0px 0px 1px 1px ${({ theme }) => colorTransparencyCalculator(theme.color.secondary[0], 0.5)};
   border-radius: ${({ theme }) => theme.borderRadius.sm};
 `;
diff --git a/src/components/atoms/SpacingContainer/SpacingsContainer.tsx b/src/components/atoms/SpacingContainer/SpacingsContainer.tsx
deleted file mode 100644
index f4564e741..000000000
--- a/src/components/atoms/SpacingContainer/SpacingsContainer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ElementType } from 'react';
-
-import { TSpacingsContainerWithHTMLAttrs } from '@/components/atoms/SpacingContainer/TSpacingsContainer.model';
-import { StyledSpacingsContainer } from '@/components/atoms/SpacingContainer/SpacingContainer.style';
-
-export default function SpacingContainer<T extends ElementType = 'div'>(props: TSpacingsContainerWithHTMLAttrs<T>) {
-  const { children, padding, margin, as, externalStyle, ...htmlProps } = props;
-
-  return (
-    <StyledSpacingsContainer
-      as={as ?? 'div'}
-      $padding={padding}
-      $margin={margin}
-      $externalStyle={externalStyle}
-      {...htmlProps}
-    >
-      {children}
-    </StyledSpacingsContainer>
-  );
-}
diff --git a/src/components/atoms/SpacingContainer/TSpacingsContainer.model.ts b/src/components/atoms/SpacingContainer/TSpacingsContainer.model.ts
deleted file mode 100644
index e0bd7493d..000000000
--- a/src/components/atoms/SpacingContainer/TSpacingsContainer.model.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ElementType } from 'react';
-import { CSSProp } from 'styled-components';
-
-import { TThemeArrayCssValues } from '@/design/designFunctions/arrayToCssValues';
-import { TThemeValueOrCSS } from '@/design/designFunctions/getThemeOrValueAsCss';
-
-export type TSpacingsContainer = {
-  padding?: TThemeArrayCssValues | TThemeValueOrCSS;
-  margin?: TThemeArrayCssValues | TThemeValueOrCSS;
-  externalStyle?: CSSProp;
-};
-
-type TSpacingsContainerHTMLProps<T extends ElementType> = {
-  as?: React.ElementType;
-} & Omit<React.HTMLAttributes<T>, 'style'>;
-
-export type TSpacingsContainerWithHTMLAttrs<T extends ElementType> = TSpacingsContainer &
-  TSpacingsContainerHTMLProps<T>;
diff --git a/src/components/atoms/SpacingContainer/index.tsx b/src/components/atoms/SpacingContainer/index.tsx
deleted file mode 100644
index eced10428..000000000
--- a/src/components/atoms/SpacingContainer/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as SpacingsContainer } from './SpacingsContainer';
-
-export type { TSpacingsContainerWithHTMLAttrs, TSpacingsContainer } from './TSpacingsContainer.model';
diff --git a/src/components/atoms/SwipeUpContainer/docu/SwipeUpContainer.mdx b/src/components/atoms/SwipeUpContainer/docu/SwipeUpContainer.mdx
index fd811760f..5132e8700 100644
--- a/src/components/atoms/SwipeUpContainer/docu/SwipeUpContainer.mdx
+++ b/src/components/atoms/SwipeUpContainer/docu/SwipeUpContainer.mdx
@@ -12,7 +12,7 @@ import * as SwipeUpContainerStories from './SwipeUpContainer.stories';
 
 To use the `SwipeUpContainer` in your project, follow these steps:
 
-1. Import the `SpacingContainer` component where you intend to use it:
+1. Import the `FancySpacingBox` component where you intend to use it:
 
 ```jsx
 import { SwipeUpContainer } from 'fui-fancyui';
diff --git a/src/components/atoms/SwipeUpDash/SwipeUpDash.tsx b/src/components/atoms/SwipeUpDash/SwipeUpDash.tsx
index 2b569f3cb..d61bd1191 100644
--- a/src/components/atoms/SwipeUpDash/SwipeUpDash.tsx
+++ b/src/components/atoms/SwipeUpDash/SwipeUpDash.tsx
@@ -20,7 +20,7 @@ export default function SwipeUpDash() {
 const StyledSwipeUpDash = styled.div<{ theme: TTheme }>`
   width: 50px;
   height: 3px;
-  background-color: ${({ theme }) => theme.colors.secondary[0]};
+  background-color: ${({ theme }) => theme.color.secondary[0]};
   border-radius: 3px;
 `;
 
diff --git a/src/components/atoms/SystemMessage/SystemMessage.test.tsx b/src/components/atoms/SystemMessage/SystemMessage.test.tsx
index 3a86c7324..db98cffc3 100644
--- a/src/components/atoms/SystemMessage/SystemMessage.test.tsx
+++ b/src/components/atoms/SystemMessage/SystemMessage.test.tsx
@@ -19,7 +19,7 @@ describe('<SystemMessage />', () => {
   });
 
   it('applies correct style for error state', () => {
-    const errorColor = themeStore.getState().theme.colors.error[0];
+    const errorColor = themeStore.getState().theme.color.error[0];
     const tree = renderer
       .create(
         <MockThemeProvider>
@@ -31,7 +31,7 @@ describe('<SystemMessage />', () => {
     expect(tree).toHaveStyleRule('color', errorColor);
   });
   it('applies correct style for success state', () => {
-    const successColor = themeStore.getState().theme.colors.success[0];
+    const successColor = themeStore.getState().theme.color.success[0];
 
     const tree = renderer
       .create(
@@ -43,7 +43,7 @@ describe('<SystemMessage />', () => {
     expect(tree).toHaveStyleRule('color', successColor);
   });
   it('applies correct style for info state', () => {
-    const infoColor = themeStore.getState().theme.colors.info[0];
+    const infoColor = themeStore.getState().theme.color.info[0];
 
     const tree = renderer
       .create(
@@ -55,7 +55,7 @@ describe('<SystemMessage />', () => {
     expect(tree).toHaveStyleRule('color', infoColor);
   });
   it('applies correct style for warning state', () => {
-    const warningColor = themeStore.getState().theme.colors.warning[0];
+    const warningColor = themeStore.getState().theme.color.warning[0];
 
     const tree = renderer
       .create(
@@ -67,7 +67,7 @@ describe('<SystemMessage />', () => {
     expect(tree).toHaveStyleRule('color', warningColor);
   });
   it('applies correct style for fallback state', () => {
-    const secondaryColor = themeStore.getState().theme.colors.secondary[0];
+    const secondaryColor = themeStore.getState().theme.color.secondary[0];
 
     const tree = renderer
       .create(
diff --git a/src/components/atoms/SystemMessage/SystemMessage.tsx b/src/components/atoms/SystemMessage/SystemMessage.tsx
index b2f325880..cffbd03fe 100644
--- a/src/components/atoms/SystemMessage/SystemMessage.tsx
+++ b/src/components/atoms/SystemMessage/SystemMessage.tsx
@@ -18,7 +18,7 @@ export default function SystemMessage(props: TSystemMessage & { textSettings?: T
       $externalStyle={externalStyle}
     >
       {!ownTypographyComponent && (
-        <Typography variant="subTextFootnote" lineHeight={1} {...textSettings}>
+        <Typography variant="subTextFootnote" tabIndex={-1} lineHeight={1} {...textSettings}>
           {children}
         </Typography>
       )}
diff --git a/src/components/atoms/TextInput/TTextInput.model.ts b/src/components/atoms/TextInput/TTextInput.model.ts
index dab9f6d25..eab346361 100644
--- a/src/components/atoms/TextInput/TTextInput.model.ts
+++ b/src/components/atoms/TextInput/TTextInput.model.ts
@@ -4,6 +4,7 @@ import { TTextAlignLC } from '@/types/TTextAlignLC';
 // the incoming props
 export type TTextInput = {
   align?: TTextAlignLC;
+  type?: 'text' | 'email' | 'tel' | 'url';
 };
 
 // the native props of the input element excluding the type attribute
diff --git a/src/components/atoms/YearInput/YearInput.style.tsx b/src/components/atoms/YearInput/YearInput.style.tsx
index e0f577d4f..8bcbe62bd 100644
--- a/src/components/atoms/YearInput/YearInput.style.tsx
+++ b/src/components/atoms/YearInput/YearInput.style.tsx
@@ -16,6 +16,6 @@ type TStyledInput = {
 export const StyledInput = styled.div<TStyledInput>`
   input {
     ${({ theme, $sizeC }) => theme.fontSizes[sizeSettings[$sizeC].fontSize]};
-    color: ${({ theme, $themeType = 'primary', $layer }) => theme.colors[$themeType][$layer || 0]};
+    color: ${({ theme, $themeType = 'primary', $layer }) => theme.color[$themeType][$layer || 0]};
   }
 `;
diff --git a/src/components/atoms/YearSelector/YearSelector.style.tsx b/src/components/atoms/YearSelector/YearSelector.style.tsx
index 51d268687..f61ac43c4 100644
--- a/src/components/atoms/YearSelector/YearSelector.style.tsx
+++ b/src/components/atoms/YearSelector/YearSelector.style.tsx
@@ -41,7 +41,7 @@ export const StyledButton = styled.button<{ theme: TTheme; $themeType?: TUiColor
 export const SVGDesignCSS = css<{ theme: TTheme }>`
   svg {
     path: {
-      stroke: ${({ theme }) => theme.colors.secondary[0]};
+      stroke: ${({ theme }) => theme.color.secondary[0]};
       stroke-width: 2px;
     }
   }
diff --git a/src/components/molecules/BottomBarIcon/BottomBarIcon.style.tsx b/src/components/molecules/BottomBarIcon/BottomBarIcon.style.tsx
index dad2e8831..563956877 100644
--- a/src/components/molecules/BottomBarIcon/BottomBarIcon.style.tsx
+++ b/src/components/molecules/BottomBarIcon/BottomBarIcon.style.tsx
@@ -42,7 +42,7 @@ export const ContentWrapper = styled.div<TContentWrapper & { theme?: TTheme }>`
     css`
       @media (hover: hover) {
         &:hover {
-          color: ${!$disabled && theme.colors.accent[0]};
+          color: ${!$disabled && theme.color.accent[0]};
         }
       }
     `}
diff --git a/src/components/molecules/Card/Components/CardSpacing.tsx b/src/components/molecules/Card/Components/CardSpacing.tsx
index 0e3a76ace..0eacf3a7f 100644
--- a/src/components/molecules/Card/Components/CardSpacing.tsx
+++ b/src/components/molecules/Card/Components/CardSpacing.tsx
@@ -1,9 +1,9 @@
 import { ElementType } from 'react';
 
-import { TSpacingsContainerWithHTMLAttrs } from '@/components/atoms/SpacingContainer';
+import { TFancySpacingBoxWithHTMLAttrs } from '@/components/atoms/FancySpacingBox';
 import { FancyAlignBox } from '@/components/templates/FancyAlignBox';
 
-export default function CardSpacing<T extends ElementType>(props: TSpacingsContainerWithHTMLAttrs<T>) {
+export default function CardSpacing<T extends ElementType>(props: TFancySpacingBoxWithHTMLAttrs<T>) {
   const { children, padding, className, ...htmlProps } = props;
 
   return (
diff --git a/src/components/molecules/ColorDisplay/ColorDisplay.style.tsx b/src/components/molecules/ColorDisplay/ColorDisplay.style.tsx
index c8f13eee4..c9fb18e26 100644
--- a/src/components/molecules/ColorDisplay/ColorDisplay.style.tsx
+++ b/src/components/molecules/ColorDisplay/ColorDisplay.style.tsx
@@ -48,7 +48,7 @@ export const Content = styled.div<{ $isBright: boolean; theme: TTheme; $isDarkTh
   &:active,
   &:hover {
     color: ${({ theme, $isBright, $isDarkTheme }) =>
-      $isBright && $isDarkTheme ? theme.colors.primary[4] : theme.colors.secondary[4]};
+      $isBright && $isDarkTheme ? theme.color.primary[4] : theme.color.secondary[4]};
   }
 `;
 
@@ -59,7 +59,7 @@ type TColorCalculation = {
   $isDarkTheme: boolean;
 };
 const colorCalculation = ({ theme, $isBright, $isDarkTheme }: TColorCalculation) => {
-  if ($isDarkTheme) return $isBright ? theme.colors.primary[0] : theme.colors.secondary[0];
+  if ($isDarkTheme) return $isBright ? theme.color.primary[0] : theme.color.secondary[0];
 
-  return $isBright ? theme.colors.secondary[0] : theme.colors.primary[0];
+  return $isBright ? theme.color.secondary[0] : theme.color.primary[0];
 };
diff --git a/src/components/molecules/ColorInputs/ColorInputs.style.tsx b/src/components/molecules/ColorInputs/ColorInputs.style.tsx
index 11dfe868c..85dba90e9 100644
--- a/src/components/molecules/ColorInputs/ColorInputs.style.tsx
+++ b/src/components/molecules/ColorInputs/ColorInputs.style.tsx
@@ -20,6 +20,6 @@ export const ContainerInputs = styled.div<{ theme: TTheme }>`
     padding: 0;
     font-size: 0.8rem;
     text-transform: uppercase;
-    color: ${({ theme }) => theme.colors.secondary[0]};
+    color: ${({ theme }) => theme.color.secondary[0]};
   }
 `;
diff --git a/src/components/molecules/FancyContent/FancyContent.style.tsx b/src/components/molecules/FancyContent/FancyContent.style.tsx
index 38a4da7e6..b8421017a 100644
--- a/src/components/molecules/FancyContent/FancyContent.style.tsx
+++ b/src/components/molecules/FancyContent/FancyContent.style.tsx
@@ -19,7 +19,7 @@ export const Wrapper = styled.span<TWrapper & { theme: TTheme }>`
   ${({ theme, $themeType, $layer }) =>
     $themeType &&
     css`
-      color: ${theme.colors[$themeType ?? 'secondary'][$layer ?? 0]};
+      color: ${theme.color[$themeType ?? 'secondary'][$layer ?? 0]};
     `};
 
   ${({ $externalStyle }) => $externalStyle}
@@ -46,6 +46,6 @@ export const OnlyTextWrapper = styled.span<TOnlyTextWrapper & { theme: TTheme }>
   ${({ theme, $themeType, $layer }) =>
     $themeType &&
     css`
-      color: ${theme.colors[$themeType ?? 'secondary'][$layer ?? 0]};
+      color: ${theme.color[$themeType ?? 'secondary'][$layer ?? 0]};
     `};
 `;
diff --git a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx
index d4083d737..9ac540670 100644
--- a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx
+++ b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx
@@ -16,7 +16,7 @@ export default function FancyMiniProfile(props: TFancyMiniprofileWithHTMLProps)
 
   return (
     <Chip sizeC={sizeC} themeType={themeType} layer={layer} externalStyle={chipStyle} {...htmlProps}>
-      <FancyProfilePicture className="miniprofile_content-image" sizeC="complete">
+      <FancyProfilePicture className="miniprofile_content-image" sizeC="fit">
         {Image}
       </FancyProfilePicture>
       <Chip.Content className="miniprofile_content" alignIcon={alignImage} gapBetweenText="0">
diff --git a/src/components/molecules/FancyProgressBar/FancyProgressBar.style.tsx b/src/components/molecules/FancyProgressBar/FancyProgressBar.style.tsx
index 8d9dddf78..5d74e806b 100644
--- a/src/components/molecules/FancyProgressBar/FancyProgressBar.style.tsx
+++ b/src/components/molecules/FancyProgressBar/FancyProgressBar.style.tsx
@@ -14,11 +14,11 @@ export const Wrapper = styled.div<{ $value?: number; theme: TTheme }>`
     $value === 100 &&
     css`
       & label {
-        color: ${theme.colors.accent[0]};
+        color: ${theme.color.accent[0]};
       }
 
       & span {
-        color: ${theme.colors.accent[0]};
+        color: ${theme.color.accent[0]};
       }
     `}
 `;
diff --git a/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.tsx b/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.tsx
index 02272ba36..eaf5b2199 100644
--- a/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.tsx
+++ b/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.tsx
@@ -24,8 +24,8 @@ export const SpeedDialContainer = styled.div`
 
 export const Button = styled.button<{ $isOpen: boolean; theme?: TTheme }>`
   position: relative;
-  background-color: ${({ theme }) => theme.colors.accent[0]};
-  color: ${({ theme }) => theme.colors.secondary[0]};
+  background-color: ${({ theme }) => theme.color.accent[0]};
+  color: ${({ theme }) => theme.color.secondary[0]};
   border: none;
   border-radius: 50%;
   cursor: pointer;
@@ -56,8 +56,8 @@ export const Ring = styled.div<{ $isOpen: boolean; theme?: TTheme }>`
   position: absolute;
   height: ${SpeedDailButtonSize + 'px'};
   width: ${SpeedDailButtonSize + 'px'};
-  border-bottom: 1.5px solid ${({ theme }) => theme.colors.accent[0]};
-  border-top: 1.5px solid ${({ theme }) => theme.colors.accent[0]};
+  border-bottom: 1.5px solid ${({ theme }) => theme.color.accent[0]};
+  border-top: 1.5px solid ${({ theme }) => theme.color.accent[0]};
   border-left: solid transparent;
   border-right: solid transparent;
   border-radius: 50%;
diff --git a/src/components/molecules/InputWrapper/InputWrapper.style.tsx b/src/components/molecules/InputWrapper/InputWrapper.style.tsx
index 3677c6cb9..b05134058 100644
--- a/src/components/molecules/InputWrapper/InputWrapper.style.tsx
+++ b/src/components/molecules/InputWrapper/InputWrapper.style.tsx
@@ -30,7 +30,7 @@ export const WrapperSystemMessageAndInput = styled.div`
 
 //the input/label/underline are all wrapped in thid container
 // eslint-disable-next-line react-refresh/only-export-components
-export const generateInputContainerStyle = (hasLabel: boolean, hasSytemMessage?: boolean) => css`
+export const generateInputContainerStyle = (hasLabel: boolean, isActive: boolean, theme: TTheme) => css`
   display: flex;
   gap: 8px;
   grid-column: 2/3;
@@ -38,12 +38,14 @@ export const generateInputContainerStyle = (hasLabel: boolean, hasSytemMessage?:
   position: relative;
   align-items: center;
   padding: ${hasLabel
-    ? hasSytemMessage
-      ? '4px 8px'
-      : '4px 8px 9px'
-    : hasSytemMessage
-      ? '2px 8px 4px'
-      : '2px 8px 4px'}; //
+    ? `${theme.spacing.xxs}  ${theme.spacing.md} ${theme.spacing.xs}`
+    : `2px ${theme.spacing.md} ${theme.spacing.xxs}`};
+
+  ${isActive
+    ? css`
+        box-shadow: 0 0 0 1px ${theme.color.accent[0]};
+      `
+    : ''}
 `;
 
 // Define the styles for the icon
diff --git a/src/components/molecules/InputWrapper/InputWrapper.tsx b/src/components/molecules/InputWrapper/InputWrapper.tsx
index 74adfe2f4..f46f3150b 100644
--- a/src/components/molecules/InputWrapper/InputWrapper.tsx
+++ b/src/components/molecules/InputWrapper/InputWrapper.tsx
@@ -13,6 +13,7 @@ import {
 } from './InputWrapper.style';
 import { FancyBox } from '@/components/atoms/FancyBox';
 import { SystemMessage } from '@/components/atoms/SystemMessage';
+import { themeStore } from '@/design/theme/themeStore';
 
 // --------------------------------------------------------------------------- //
 // ------ The Wrapper for the inputs that give him some extra features  ------ //
@@ -21,7 +22,7 @@ export default function InputWrapper(props: TInputWrapper) {
   const {
     id,
     hasValue,
-    isActive,
+    isActive = false,
     disabled,
     InputElement,
     systemMessage,
@@ -40,6 +41,8 @@ export default function InputWrapper(props: TInputWrapper) {
     labelVariant,
   } = props;
 
+  const theme = themeStore((state) => state.theme);
+
   // Render the InputWrapper component with the appropriate props
   return (
     <StyledInputWrapper disabled={disabled} $autoWidth={autoWidth}>
@@ -49,7 +52,7 @@ export default function InputWrapper(props: TInputWrapper) {
         outlined={outlined}
         outlinedBackgroundStrength={outlinedBackgroundStrength}
         externalStyle={css`
-          ${generateInputContainerStyle(!!label)}
+          ${generateInputContainerStyle(!!label, isActive, theme)}
           ${externalStyle}
         `}
       >
diff --git a/src/components/molecules/InputWrapper/TInputWrapper.model.ts b/src/components/molecules/InputWrapper/TInputWrapper.model.ts
index ee57b852a..7bd1ed3eb 100644
--- a/src/components/molecules/InputWrapper/TInputWrapper.model.ts
+++ b/src/components/molecules/InputWrapper/TInputWrapper.model.ts
@@ -33,15 +33,5 @@ export type TInputWrapper = {
 
 export type TInputWrapperUserInputProps = Omit<
   TInputWrapper,
-  | 'children'
-  | 'id'
-  | 'underline'
-  | 'autoWidth'
-  | 'value'
-  | 'borderRadius'
-  | 'sizeC'
-  | 'isActive'
-  | 'hasValue'
-  | 'as'
-  | 'InputElement'
+  'children' | 'id' | 'autoWidth' | 'value' | 'borderRadius' | 'sizeC' | 'isActive' | 'hasValue' | 'as' | 'InputElement'
 >;
diff --git a/src/components/molecules/LabeledInput/LabeledInput.style.tsx b/src/components/molecules/LabeledInput/LabeledInput.style.tsx
index ec1576918..382db8eef 100644
--- a/src/components/molecules/LabeledInput/LabeledInput.style.tsx
+++ b/src/components/molecules/LabeledInput/LabeledInput.style.tsx
@@ -24,7 +24,6 @@ export const InputWrapper = styled.div<TInputWrapper & { theme: TTheme }>`
   input:not([type='range']),
   select {
     ${({ $isActive, $isLabelProvided }) => calcInputPadding({ $isActive, $isLabelProvided })}
-    font-sizeC: 18px;
   }
 
   input[type='range'] {
diff --git a/src/components/molecules/SearchBar/TSearchbar.model.tsx b/src/components/molecules/SearchBar/TSearchbar.model.tsx
index 0fae0b260..51b5667bc 100644
--- a/src/components/molecules/SearchBar/TSearchbar.model.tsx
+++ b/src/components/molecules/SearchBar/TSearchbar.model.tsx
@@ -14,4 +14,4 @@ export type TSearchBar = {
   sizeC?: TComponentSizes;
 };
 
-export type TSearchBarWithFancyInputAttrs = TSearchBar & TFancyTextInput;
+export type TSearchBarWithFancyInputAttrs = TSearchBar & Omit<TFancyTextInput, 'type'>;
diff --git a/src/components/molecules/SingleInputs/SingleInputs.style.tsx b/src/components/molecules/SingleInputs/SingleInputs.style.tsx
index 56ad845a8..9671579da 100644
--- a/src/components/molecules/SingleInputs/SingleInputs.style.tsx
+++ b/src/components/molecules/SingleInputs/SingleInputs.style.tsx
@@ -17,9 +17,9 @@ export const InputWrapper = styled.div<TInputWrapper>`
   input {
     ${({ $status, theme }) =>
       $status?.isError
-        ? `border-color: ${theme.colors.error[0]}`
+        ? `border-color: ${theme.color.error[0]}`
         : $status?.isSucceed
-          ? `border-color: ${theme.colors.success[0]};`
+          ? `border-color: ${theme.color.success[0]};`
           : ''};
     transition: border-color 0.3s ease-in-out;
   }
diff --git a/src/components/molecules/SingleToastMessage/SingleToastMessage.style.tsx b/src/components/molecules/SingleToastMessage/SingleToastMessage.style.tsx
index 1ee244dd6..122f46cb0 100644
--- a/src/components/molecules/SingleToastMessage/SingleToastMessage.style.tsx
+++ b/src/components/molecules/SingleToastMessage/SingleToastMessage.style.tsx
@@ -33,7 +33,7 @@ export const Container = styled.div<TToastMessage>`
     getBackgroundColor({ $themeType: $messageType, theme, $layer })}; //theme[$messageType]['5']
   border-radius: ${({ theme }) => theme.borderRadius.xs};
   padding: ${({ theme }) => theme.spacing.md};
-  background-color: ${({ theme }) => colorTransparencyCalculator(theme.colors.primary['0'], 0.95)};
+  background-color: ${({ theme }) => colorTransparencyCalculator(theme.color.primary['0'], 0.95)};
   border-left: 4px solid
     ${({ $messageType, theme, $layer = 3 }) => getBackgroundColor({ $themeType: $messageType, theme, $layer })};
   box-sizing: border-box;
diff --git a/src/components/molecules/SwipeUpModal/SwipeUpModal.style.tsx b/src/components/molecules/SwipeUpModal/SwipeUpModal.style.tsx
index ef5fb502c..7346cbfd5 100644
--- a/src/components/molecules/SwipeUpModal/SwipeUpModal.style.tsx
+++ b/src/components/molecules/SwipeUpModal/SwipeUpModal.style.tsx
@@ -23,7 +23,7 @@ export const WrapperAnimated = styled.div`
 
 export const ContentBox = styled.div<{ theme: TTheme }>`
   overflow-y: scroll;
-  color: ${({ theme }) => theme.colors.secondary[0]};
+  color: ${({ theme }) => theme.color.secondary[0]};
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
diff --git a/src/components/molecules/SwitchList/SwitchList.style.tsx b/src/components/molecules/SwitchList/SwitchList.style.tsx
index 9ce188139..d3e1b8139 100644
--- a/src/components/molecules/SwitchList/SwitchList.style.tsx
+++ b/src/components/molecules/SwitchList/SwitchList.style.tsx
@@ -6,10 +6,10 @@ import { TTheme } from '@/types/TTheme';
 export const ListItemStyle = css<{ theme: TTheme; active: boolean }>`
   position: relative;
   flex-grow: 1;
-  color: ${({ theme, active }) => (active ? theme.colors.accent[0] : theme.colors.secondary[0])};
+  color: ${({ theme, active }) => (active ? theme.color.accent[0] : theme.color.secondary[0])};
   ${simpleColorTransition}
 
   &:hover {
-    color: ${({ theme }) => theme.colors.accent[0]};
+    color: ${({ theme }) => theme.color.accent[0]};
   }
 `;
diff --git a/src/components/molecules/TextAvatar/TextAvatar.style.tsx b/src/components/molecules/TextAvatar/TextAvatar.style.tsx
index c7904327d..cf5d14829 100644
--- a/src/components/molecules/TextAvatar/TextAvatar.style.tsx
+++ b/src/components/molecules/TextAvatar/TextAvatar.style.tsx
@@ -18,7 +18,7 @@ export const Placeholder = styled.div<TPlaceholderProps & { theme: TTheme }>`
   justify-content: center;
   align-items: center;
   background-color: ${({ $backgroundColor, theme, $layer, $themeType }) =>
-    $backgroundColor ? $backgroundColor : theme.colors[$themeType ?? 'primary'][$layer ?? 2]};
+    $backgroundColor ? $backgroundColor : theme.color[$themeType ?? 'primary'][$layer ?? 2]};
   color: ${({ $color, theme, $layer = 1, $themeType = 'primary' }) =>
     getTextColor({ theme, $themeType, $textLayer: $layer, $customTextColor: $color, turnColorTheme: true })};
   font-size: 1.5em;
diff --git a/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.style.tsx b/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.style.tsx
index f49d82e06..18e557038 100644
--- a/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.style.tsx
+++ b/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.style.tsx
@@ -15,7 +15,7 @@ export const MessageContainer = styled.div<{ theme: TTheme }>`
 `;
 
 export const Message = styled.div<{ $isError?: boolean; theme: TTheme }>`
-  color: ${({ theme }) => theme.colors.secondary[0]};
+  color: ${({ theme }) => theme.color.secondary[0]};
   max-height: 0;
   visibility: hidden;
   overflow: hidden;
@@ -24,7 +24,7 @@ export const Message = styled.div<{ $isError?: boolean; theme: TTheme }>`
   ${({ $isError, theme }) =>
     $isError &&
     css`
-      color: ${theme.colors.error[0]};
+      color: ${theme.color.error[0]};
       max-height: 100px;
       visibility: visible;
       opacity: 1;
diff --git a/src/components/organisms/FancyColorInput/FancyColorInput.style.tsx b/src/components/organisms/FancyColorInput/FancyColorInput.style.tsx
index 6a7e0785b..383494228 100644
--- a/src/components/organisms/FancyColorInput/FancyColorInput.style.tsx
+++ b/src/components/organisms/FancyColorInput/FancyColorInput.style.tsx
@@ -19,6 +19,6 @@ export const WrapperSVG = styled.div<{ theme: TTheme }>`
   svg {
     width: 24px;
     height: 24px;
-    fill: ${({ theme }) => theme.colors.secondary[0]};
+    fill: ${({ theme }) => theme.color.secondary[0]};
   }
 `;
diff --git a/src/components/organisms/FancyDateInput/FancyDateInput.tsx b/src/components/organisms/FancyDateInput/FancyDateInput.tsx
index e87166355..81dc9101c 100644
--- a/src/components/organisms/FancyDateInput/FancyDateInput.tsx
+++ b/src/components/organisms/FancyDateInput/FancyDateInput.tsx
@@ -20,6 +20,7 @@ export default function FancyDateInput(props: TFancyDateInput) {
     themeType = 'primary',
     layer = 2,
     placeholder,
+    underline,
     onChange,
     transparentBackground,
     externalStyle,
@@ -53,6 +54,7 @@ export default function FancyDateInput(props: TFancyDateInput) {
       disabled={disabled}
       themeType={themeType}
       placeholder={placeholder}
+      underline={underline}
       layer={layer}
       align={align}
       isActive={isActiveState}
diff --git a/src/components/organisms/FancyDateInput/docu/FancyDateInput.stories.tsx b/src/components/organisms/FancyDateInput/docu/FancyDateInput.stories.tsx
index d0da52d18..2d6fc6286 100644
--- a/src/components/organisms/FancyDateInput/docu/FancyDateInput.stories.tsx
+++ b/src/components/organisms/FancyDateInput/docu/FancyDateInput.stories.tsx
@@ -91,6 +91,12 @@ const meta = {
         type: 'select',
       },
     },
+    underline: {
+      description: 'Underline of the input',
+      control: {
+        type: 'boolean',
+      },
+    },
     outlined: {
       description: 'Outlined input',
       control: {
@@ -131,6 +137,7 @@ export const Primary: Story = {
     label: 'Date',
     align: 'left',
     disabled: false,
+    underline: false,
     placeholder: 'PlaceHolder',
     themeType: 'primary',
     layer: 2,
diff --git a/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx b/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx
index ac4522a65..92065ea17 100644
--- a/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx
+++ b/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx
@@ -21,6 +21,7 @@ export default function FancyNumberInput(props: TFancyNumberInput) {
     themeType = 'primary',
     layer = 2,
     autoWidth,
+    underline,
     placeholder,
     onFocus,
     onBlur,
@@ -46,6 +47,7 @@ export default function FancyNumberInput(props: TFancyNumberInput) {
       placeholder={placeholder}
       isActive={isActive}
       icon={icon}
+      underline={underline}
       autoWidth={autoWidth}
       systemMessage={systemMessage}
       themeType={themeType}
diff --git a/src/components/organisms/FancyNumberInput/docu/FancyNumberInput.stories.tsx b/src/components/organisms/FancyNumberInput/docu/FancyNumberInput.stories.tsx
index cd76c6e92..fd84359f3 100644
--- a/src/components/organisms/FancyNumberInput/docu/FancyNumberInput.stories.tsx
+++ b/src/components/organisms/FancyNumberInput/docu/FancyNumberInput.stories.tsx
@@ -83,6 +83,12 @@ const meta = {
         type: 'select',
       },
     },
+    underline: {
+      description: 'Underline for the input',
+      control: {
+        type: 'boolean',
+      },
+    },
     outlined: {
       description: 'Outlined input',
       control: {
@@ -138,6 +144,7 @@ export const Primary: Story = {
     labelVariant: 'animated',
     icon: <SVGCheckMark />,
     decimalPlaces: 2,
+    underline: true,
     step: 1,
   },
 };
diff --git a/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx b/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx
index a52fa234e..31b654fb1 100644
--- a/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx
+++ b/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx
@@ -22,6 +22,7 @@ export default function FancyPasswordInput(props: TFancyPasswordInput) {
     icon,
     label,
     onFocus,
+    underline,
     onBlur,
     transparentBackground,
     ...inputProps
@@ -44,6 +45,7 @@ export default function FancyPasswordInput(props: TFancyPasswordInput) {
       label={label}
       disabled={disabled}
       align={align}
+      underline={underline}
       isActive={isActive}
       icon={icon}
       systemMessage={systemMessage}
diff --git a/src/components/organisms/FancyPasswordInput/docu/FancyPasswordInput.stories.tsx b/src/components/organisms/FancyPasswordInput/docu/FancyPasswordInput.stories.tsx
index b20988259..eccfdc169 100644
--- a/src/components/organisms/FancyPasswordInput/docu/FancyPasswordInput.stories.tsx
+++ b/src/components/organisms/FancyPasswordInput/docu/FancyPasswordInput.stories.tsx
@@ -82,6 +82,12 @@ const meta = {
         type: 'select',
       },
     },
+    underline: {
+      description: 'Underline the input',
+      control: {
+        type: 'boolean',
+      },
+    },
     outlined: {
       description: 'Outlined input',
       control: {
@@ -116,6 +122,7 @@ export const Primary: Story = {
     align: 'left',
     themeType: 'primary',
     layer: 2,
+    underline: true,
     label: 'Password',
     icon: <SVGCheckMark />,
   },
diff --git a/src/components/organisms/FancyTextInput/FancyTextInput.tsx b/src/components/organisms/FancyTextInput/FancyTextInput.tsx
index 4efdf2201..9a3c617f5 100644
--- a/src/components/organisms/FancyTextInput/FancyTextInput.tsx
+++ b/src/components/organisms/FancyTextInput/FancyTextInput.tsx
@@ -20,6 +20,8 @@ export default function FancyTextInput(props: TFancyTextInput) {
     icon,
     label,
     onFocus,
+    type = 'text',
+    underline,
     onBlur,
     transparentBackground,
     ...inputProps
@@ -43,6 +45,7 @@ export default function FancyTextInput(props: TFancyTextInput) {
       layer={layer}
       align={align}
       isActive={isActive}
+      underline={underline}
       icon={icon}
       systemMessage={systemMessage}
       transparentBackground={transparentBackground}
@@ -51,6 +54,7 @@ export default function FancyTextInput(props: TFancyTextInput) {
           id={usedId}
           value={value}
           align={align}
+          type={type}
           disabled={disabled}
           onFocus={(e) => {
             onFocus && onFocus(e);
diff --git a/src/components/organisms/FancyTextInput/docu/FancyTextInput.stories.tsx b/src/components/organisms/FancyTextInput/docu/FancyTextInput.stories.tsx
index fa7ad079a..b3e1c971a 100644
--- a/src/components/organisms/FancyTextInput/docu/FancyTextInput.stories.tsx
+++ b/src/components/organisms/FancyTextInput/docu/FancyTextInput.stories.tsx
@@ -34,6 +34,12 @@ const meta = {
         type: 'select',
       },
     },
+    type: {
+      description: 'Type of the input',
+      control: {
+        type: 'select',
+      },
+    },
     disabled: {
       description: 'Disable the input',
       control: {
@@ -98,6 +104,12 @@ const meta = {
         type: 'number',
       },
     },
+    underline: {
+      description: 'Underline the input',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 } satisfies Meta<typeof FancyTextInput>;
 
@@ -122,6 +134,7 @@ export const Primary: Story = {
   render: (args) => <SateFunction {...args} />,
   args: {
     layer: 2,
+    type: 'text',
     themeType: 'primary',
     align: 'left',
     label: 'Label',
diff --git a/src/components/templates/FancyAlignBox/FancyAlignBox.tsx b/src/components/templates/FancyAlignBox/FancyAlignBox.tsx
index fad53689a..3d606617d 100644
--- a/src/components/templates/FancyAlignBox/FancyAlignBox.tsx
+++ b/src/components/templates/FancyAlignBox/FancyAlignBox.tsx
@@ -1,7 +1,7 @@
 import { ElementType } from 'react';
 
 import { FancyFlexBox } from '@/components/templates/FancyFlexBox';
-import { SpacingsContainer } from '@/components/atoms/SpacingContainer';
+import { FancySpacingBox } from '@/components/atoms/FancySpacingBox';
 
 import { TFancyAlignBox } from './TFancyAlignBox.model';
 
@@ -21,7 +21,7 @@ export default function FancyAlignBox<T extends ElementType>(props: TFancyAlignB
   } = props;
 
   return (
-    <SpacingsContainer as={as} padding={padding} margin={margin} externalStyle={externalStyle} {...htmlProps}>
+    <FancySpacingBox as={as} padding={padding} margin={margin} externalStyle={externalStyle} {...htmlProps}>
       <FancyFlexBox
         as={as}
         justify={justify}
@@ -32,6 +32,6 @@ export default function FancyAlignBox<T extends ElementType>(props: TFancyAlignB
       >
         {children}
       </FancyFlexBox>
-    </SpacingsContainer>
+    </FancySpacingBox>
   );
 }
diff --git a/src/components/templates/FancyAlignBox/TFancyAlignBox.model.ts b/src/components/templates/FancyAlignBox/TFancyAlignBox.model.ts
index c9c94226f..72f8e3439 100644
--- a/src/components/templates/FancyAlignBox/TFancyAlignBox.model.ts
+++ b/src/components/templates/FancyAlignBox/TFancyAlignBox.model.ts
@@ -1,7 +1,7 @@
 import { ElementType } from 'react';
 
 import { TFancyFlexBoxWithDynamicElAttrs } from '@/components/templates/FancyFlexBox';
-import { TSpacingsContainerWithHTMLAttrs } from '@/components/atoms/SpacingContainer';
+import { TFancySpacingBoxWithHTMLAttrs } from '@/components/atoms/FancySpacingBox';
 
 export type TFancyAlignBox<T extends ElementType> = TFancyFlexBoxWithDynamicElAttrs<T> &
-  TSpacingsContainerWithHTMLAttrs<T>;
+  TFancySpacingBoxWithHTMLAttrs<T>;
diff --git a/src/components/templates/FancyFlexBox/TFancyFlexBox.model.ts b/src/components/templates/FancyFlexBox/TFancyFlexBox.model.ts
index 9cba16eb1..89118c756 100644
--- a/src/components/templates/FancyFlexBox/TFancyFlexBox.model.ts
+++ b/src/components/templates/FancyFlexBox/TFancyFlexBox.model.ts
@@ -1,4 +1,5 @@
 import { TThemeValueOrCSS } from '@/design/designFunctions/getThemeOrValueAsCss';
+import { TDynamicElement } from '@/types/TDynamicElement';
 import React, { ElementType } from 'react';
 import { CSSProp } from 'styled-components';
 
@@ -17,9 +18,4 @@ export type TFancyFlexBox = {
   fitBox?: boolean;
 } & TStyleProps;
 
-// Props for dynamic element type
-export type TDynamicElementProps<T extends ElementType> = {
-  as?: ElementType;
-} & React.HTMLAttributes<T>;
-
-export type TFancyFlexBoxWithDynamicElAttrs<T extends ElementType = 'div'> = TDynamicElementProps<T> & TFancyFlexBox;
+export type TFancyFlexBoxWithDynamicElAttrs<T extends ElementType = 'div'> = TDynamicElement<T> & TFancyFlexBox;
diff --git a/src/components/templates/FancyGrid/FancyGrid.model.ts b/src/components/templates/FancyGrid/FancyGrid.model.ts
index 650b6841a..291dfe4c5 100644
--- a/src/components/templates/FancyGrid/FancyGrid.model.ts
+++ b/src/components/templates/FancyGrid/FancyGrid.model.ts
@@ -1,3 +1,4 @@
+import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
 import { CSSProp } from 'styled-components';
 
 export interface ICustomBreakpoint {
@@ -9,6 +10,8 @@ export interface ICustomBreakpoint {
 export interface FancyGridProps {
   grid?: number;
   gap?: string;
+  padding?: TThemeArrayOrValueCSS;
+  margin?: TThemeArrayOrValueCSS;
   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 72ed052c5..16c8d90ef 100644
--- a/src/components/templates/FancyGrid/FancyGrid.style.tsx
+++ b/src/components/templates/FancyGrid/FancyGrid.style.tsx
@@ -2,13 +2,16 @@ 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';
 
 type TFancyGridProps = TStyledPrefixAndOmiter<FancyGridProps>;
 export const GridContainer = styled.div<TFancyGridProps & { as: React.ElementType }>`
   display: grid;
-  width: 100%;
-  grid-template-columns: repeat(${(props) => props.$grid}, 1fr);
-  grid-gap: ${(props) => props.$gap};
+  grid-template-columns: repeat(${({ $grid }) => $grid}, 1fr);
+  grid-gap: ${({ $gap }) => $gap};
+  margin: ${({ $margin }) => arrayToCssValues($margin, 'spacing')};
+  padding: ${({ $padding }) => arrayToCssValues($padding, 'spacing')};
+
   ${({ $externalStyle }) => $externalStyle}
 
   ${({ $breakpoints }) =>
diff --git a/src/components/templates/FancyGrid/FancyGrid.tsx b/src/components/templates/FancyGrid/FancyGrid.tsx
index 88a65a4bd..a224fdb8b 100644
--- a/src/components/templates/FancyGrid/FancyGrid.tsx
+++ b/src/components/templates/FancyGrid/FancyGrid.tsx
@@ -3,16 +3,25 @@ import React from 'react';
 
 import { FancyGridProps } from '@/components/templates/FancyGrid/FancyGrid.model';
 import { GridContainer } from '@/components/templates/FancyGrid/FancyGrid.style';
-import { TDynamicElementProps } from '@/types/TDynamicElement';
+import { TDynamicElement } from '@/types/TDynamicElement';
 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: TDynamicElementProps<T> & FancyGridProps) {
-  const { children, grid = 12, gap, as, breakpoints, externalStyle } = props;
+function FancyGrid<T extends React.ElementType = 'div'>(props: TDynamicElement<T> & FancyGridProps) {
+  const { children, grid = 12, gap, as, breakpoints, margin, padding, externalStyle } = props;
+
   return (
-    <GridContainer as={as ?? 'div'} $breakpoints={breakpoints} $externalStyle={externalStyle} $grid={grid} $gap={gap}>
+    <GridContainer
+      as={as ?? 'div'}
+      $breakpoints={breakpoints}
+      $margin={margin}
+      $padding={padding}
+      $externalStyle={externalStyle}
+      $grid={grid}
+      $gap={gap}
+    >
       {children}
     </GridContainer>
   );
diff --git a/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx b/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
index c375bc635..1200d2672 100644
--- a/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
+++ b/src/components/templates/FancyGrid/docu/FancyGrid.stories.tsx
@@ -40,6 +40,18 @@ const meta = {
         type: 'object',
       },
     },
+    margin: {
+      description: 'The margin of the grid',
+      control: {
+        type: 'object',
+      },
+    },
+    padding: {
+      description: 'The padding of the grid',
+      control: {
+        type: 'object',
+      },
+    },
   },
 } satisfies Meta<typeof FancyGrid>;
 
@@ -73,6 +85,8 @@ export const Primary: Story = {
     </FancyGrid>
   ),
   args: {
+    padding: ['sm', 'md', 'lg', 'xl'],
+    margin: ['sm', 'md', 'lg', 'xl'],
     grid: 12,
     gap: '12px',
     breakpoints: [{ breakpoint: '500px', gridSize: 6 }],
diff --git a/src/components/templates/FancyGridItem/FancyGridItem.model.ts b/src/components/templates/FancyGridItem/FancyGridItem.model.ts
index 4b1606f5f..5b0ec3405 100644
--- a/src/components/templates/FancyGridItem/FancyGridItem.model.ts
+++ b/src/components/templates/FancyGridItem/FancyGridItem.model.ts
@@ -1,9 +1,14 @@
 import { CSSProp } from 'styled-components';
 import { ICustomBreakpoint } from '@/components/templates/FancyGrid/FancyGrid.model';
+import { TDynamicElement } from 'lib';
 
-export type FancyGridItemProps = {
+export type TFancyGridItemProps = {
   gridSpace: number;
+  gridColumn?: string | number;
+  gridRow?: string | number;
   children?: React.ReactNode;
   breakpoints?: ICustomBreakpoint[];
   externalStyle?: CSSProp;
 };
+
+export type TFancyGridItemDynamicProps<T extends React.ElementType = 'div'> = TFancyGridItemProps & TDynamicElement<T>;
diff --git a/src/components/templates/FancyGridItem/FancyGridItem.style.tsx b/src/components/templates/FancyGridItem/FancyGridItem.style.tsx
index fa982ebf5..b31a57242 100644
--- a/src/components/templates/FancyGridItem/FancyGridItem.style.tsx
+++ b/src/components/templates/FancyGridItem/FancyGridItem.style.tsx
@@ -1,20 +1,25 @@
 import { css, styled } from 'styled-components';
 
-import { FancyGridItemProps } from '@/components/templates/FancyGridItem/FancyGridItem.model';
+import { TFancyGridItemProps } from '@/components/templates/FancyGridItem/FancyGridItem.model';
 import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 
-type TGirdItemProps = TStyledPrefixAndPicker<FancyGridItemProps, 'gridSpace' | 'breakpoints' | 'externalStyle'>;
-export const GridItem = styled.div<TGirdItemProps & { as: React.ElementType }>`
-  grid-column: span ${({ $gridSpace }) => $gridSpace};
+type TGirdItemProps = TStyledPrefixAndPicker<
+  TFancyGridItemProps,
+  'gridSpace' | 'breakpoints' | 'externalStyle' | 'gridColumn' | 'gridRow'
+>;
+export const GridItem = styled.div<TGirdItemProps>`
+  ${({ $gridSpace, $gridColumn }) =>
+    $gridSpace ? `grid-column: span ${$gridSpace};` : $gridColumn ? `grid-column: ${$gridColumn};` : ''}
+
+  ${({ $gridRow }) => ($gridRow ? `grid-row: ${$gridRow};` : '')}
   min-height: 0;
 
-  // Media Queries basierend auf benutzerdefinierten Breakpoints
   ${({ $breakpoints }) =>
     $breakpoints &&
     $breakpoints.map(
       (breakpoint) => css`
         @media (${breakpoint.breakpoint}) {
-          grid-column: span ${breakpoint.gridSize};
+          ${breakpoint.gridSize ? `grid-column: span ${breakpoint.gridSize};` : ''}
         }
       `
     )}
diff --git a/src/components/templates/FancyGridItem/FancyGridItem.tsx b/src/components/templates/FancyGridItem/FancyGridItem.tsx
index 9be75915e..2f63eb059 100644
--- a/src/components/templates/FancyGridItem/FancyGridItem.tsx
+++ b/src/components/templates/FancyGridItem/FancyGridItem.tsx
@@ -1,18 +1,25 @@
 import React from 'react';
 
 import { FancyFlexBox, TFancyFlexBoxWithDynamicElAttrs } from '@/components/templates/FancyFlexBox';
-import { FancyGridItemProps } from '@/components/templates/FancyGridItem/FancyGridItem.model';
+
 import { GridItem } from '@/components/templates/FancyGridItem/FancyGridItem.style';
-import { TDynamicElementProps } from '@/types/TDynamicElement';
+import { TFancyGridItemProps } from '@/components/templates/FancyGridItem/FancyGridItem.model';
+import { TDynamicElement } from '@/types/TDynamicElement';
 
 // --------------------------------------------------------------------------- //
 // ------------ The FancyGrid Item to get the space for the item - ----------- //
-// --------------------------------------------------------------------------- //
-function FancyGridItem<T extends React.ElementType = 'div'>(props: TDynamicElementProps<T> & FancyGridItemProps) {
-  const { gridSpace, children, breakpoints, as } = props;
+// ------------------------------------------------<--------------------------- //
+function FancyGridItem<T extends React.ElementType = 'div'>(props: TFancyGridItemProps & TDynamicElement<T>) {
+  const { gridSpace, children, breakpoints, gridColumn, gridRow, as } = props;
 
   return (
-    <GridItem as={as ?? 'div'} $gridSpace={gridSpace} $breakpoints={breakpoints}>
+    <GridItem
+      as={as ?? 'div'}
+      $gridSpace={gridSpace}
+      $gridColumn={gridColumn}
+      $gridRow={gridRow}
+      $breakpoints={breakpoints}
+    >
       {children}
     </GridItem>
   );
diff --git a/src/components/templates/FancyGridItem/docu/FancyGridItem.stories.tsx b/src/components/templates/FancyGridItem/docu/FancyGridItem.stories.tsx
index 67a63943a..be5e2d895 100644
--- a/src/components/templates/FancyGridItem/docu/FancyGridItem.stories.tsx
+++ b/src/components/templates/FancyGridItem/docu/FancyGridItem.stories.tsx
@@ -32,6 +32,18 @@ const meta = {
         type: 'object',
       },
     },
+    gridColumn: {
+      description: 'The column wich the item should take in the grid',
+      control: {
+        type: 'string',
+      },
+    },
+    gridRow: {
+      description: 'The row wich the item should take in the grid',
+      control: {
+        type: 'string',
+      },
+    },
   },
 } satisfies Meta<typeof FancyGridItem>;
 
@@ -49,6 +61,8 @@ export const Primary: Story = {
   ),
   args: {
     gridSpace: 6,
+    gridColumn: '1 / 3',
+    gridRow: '1 / 2',
     breakpoints: [{ breakpoint: '500px', gridSize: 6 }],
   },
 };
diff --git a/src/components/templates/FancyGridItem/index.ts b/src/components/templates/FancyGridItem/index.ts
index 421f27168..f372295f4 100644
--- a/src/components/templates/FancyGridItem/index.ts
+++ b/src/components/templates/FancyGridItem/index.ts
@@ -1 +1,2 @@
 export { default as FancyGridItem } from './FancyGridItem';
+export type { TFancyGridItemProps, TFancyGridItemDynamicProps } from './FancyGridItem.model';
diff --git a/src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.ts b/src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.ts
index c01d83466..72c521d58 100644
--- a/src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.ts
+++ b/src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.ts
@@ -22,13 +22,13 @@ export function getBackgroundColor({ theme, $themeType, $customColor, $layer }:
   }
   // If a theme type was provided and no valid custom color was set, use the corresponding color from the theme
   else if ($themeType && $themeType !== 'transparent') {
-    proviedColor = theme.colors[$themeType][$layer ?? 0];
+    proviedColor = theme.color[$themeType][$layer ?? 0];
   } else if ($themeType === 'transparent') {
     proviedColor = 'transparent';
   }
 
   // Return the background color as a styled-component CSS string
-  return proviedColor || theme.colors.primary[0];
+  return proviedColor || theme.color.primary[0];
 }
 
 // --------------------------------------------------------------------------- //
@@ -56,23 +56,23 @@ export function getTextColor({
   }
   // If the theme type is 'primary', use the corresponding secondary color from the theme
   else if ($themeType === 'primary' && turnColorTheme) {
-    proviedColor = theme.colors.secondary[$textLayer ?? 0];
+    proviedColor = theme.color.secondary[$textLayer ?? 0];
   }
   // If the theme type is 'secondary', use the corresponding primary color from the theme
   else if ($themeType === 'secondary' && turnColorTheme) {
-    proviedColor = theme.colors.primary[$textLayer ?? 0];
+    proviedColor = theme.color.primary[$textLayer ?? 0];
   }
   // If the theme type is 'accent', use the corresponding accent color from the theme
   else if ($themeType === 'accent') {
-    proviedColor = Color(theme.colors.accent[$textLayer ?? 0]).isDark()
-      ? theme.colors.secondary[$textLayer ?? 0]
-      : theme.colors.primary[$textLayer ?? 0];
+    proviedColor = Color(theme.color.accent[$textLayer ?? 0]).isDark()
+      ? theme.color.secondary[$textLayer ?? 0]
+      : theme.color.primary[$textLayer ?? 0];
   } else if ($themeType === 'transparent') {
     proviedColor = themeStore.getState().isDarkTheme
-      ? theme.colors.secondary[$textLayer ?? 0]
-      : theme.colors.primary[$textLayer ?? 0];
+      ? theme.color.secondary[$textLayer ?? 0]
+      : theme.color.primary[$textLayer ?? 0];
   } else {
-    proviedColor = theme.colors[$themeType][$textLayer ?? 0];
+    proviedColor = theme.color[$themeType][$textLayer ?? 0];
   }
   // Return the text color as a styled-component CSS string
   return proviedColor;
diff --git a/src/design/designFunctions/flipThemeColor/flipThemeColor.ts b/src/design/designFunctions/flipThemeColor/flipThemeColor.ts
index 74c2ac6ff..714c1531e 100644
--- a/src/design/designFunctions/flipThemeColor/flipThemeColor.ts
+++ b/src/design/designFunctions/flipThemeColor/flipThemeColor.ts
@@ -10,10 +10,10 @@ const filpColor = (isLightColor: boolean) => {
 
   // If the theme is not dark, return the appropriate color based on the isLightColor parameter
   if (!isDarkTheme) {
-    return isLightColor ? theme.colors['secondary'] : theme.colors['primary'];
+    return isLightColor ? theme.color['secondary'] : theme.color['primary'];
   } else {
     // If the theme is dark, return the appropriate color based on the isLightColor parameter
-    return isLightColor ? theme.colors['primary'] : theme.colors['secondary'];
+    return isLightColor ? theme.color['primary'] : theme.color['secondary'];
   }
 };
 
@@ -21,7 +21,7 @@ export default function flipThemeColor(color: TUiColorsNotTransparent, layer?: T
   const theme = themeStore.getState().theme;
 
   // Check if the current color is light or dark
-  const isCurrentColorLight = Color(theme.colors[color][layer || 0]).isLight();
+  const isCurrentColorLight = Color(theme.color[color][layer || 0]).isLight();
 
   // Get the flipped color based on the current color's lightness
   const getFlippedColor = filpColor(isCurrentColorLight);
diff --git a/src/design/designFunctions/focusStyle/focusStyle.ts b/src/design/designFunctions/focusStyle/focusStyle.ts
index 401ca4be2..f201939ce 100644
--- a/src/design/designFunctions/focusStyle/focusStyle.ts
+++ b/src/design/designFunctions/focusStyle/focusStyle.ts
@@ -3,7 +3,7 @@ import { TTheme } from '@/types/TTheme';
 import { css } from 'styled-components';
 
 const focusStyle = css<{ theme: TTheme }>`
-  box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.accent[0]};
+  box-shadow: 0 0 0 1px ${({ theme }) => theme.color.accent[0]};
 `;
 
 export default focusStyle;
diff --git a/src/design/designFunctions/generateItemTheme/utils/calcTextColor.ts b/src/design/designFunctions/generateItemTheme/utils/calcTextColor.ts
index 0a6fb4f45..3a447f422 100644
--- a/src/design/designFunctions/generateItemTheme/utils/calcTextColor.ts
+++ b/src/design/designFunctions/generateItemTheme/utils/calcTextColor.ts
@@ -8,9 +8,9 @@ export const calcTextColor = ({ $textColor, $themeType, $outlined }: IcalcTextCo
   const theme = themeStore.getState().theme;
 
   //  if the userer profides a $textColor use this
-  if ($textColor) return theme.colors[$textColor][0];
-  if ($themeType === 'transparent') return theme.colors.secondary[0];
-  if ($outlined) return theme.colors[$themeType ?? 'secondary'][0];
+  if ($textColor) return theme.color[$textColor][0];
+  if ($themeType === 'transparent') return theme.color.secondary[0];
+  if ($outlined) return theme.color[$themeType ?? 'secondary'][0];
 
   return flipThemeColor($themeType ?? 'secondary');
 };
diff --git a/src/design/designFunctions/generateItemTheme/utils/generateBackgroundColor.ts b/src/design/designFunctions/generateItemTheme/utils/generateBackgroundColor.ts
index 6528465ca..25a377822 100644
--- a/src/design/designFunctions/generateItemTheme/utils/generateBackgroundColor.ts
+++ b/src/design/designFunctions/generateItemTheme/utils/generateBackgroundColor.ts
@@ -8,6 +8,6 @@ export const generateBackgroundColor = (props: Pick<IGenerateThemeItem, '$themeT
   if ($themeType === 'transparent') {
     return 'transparent';
   } else {
-    return theme.colors[$themeType ?? 'primary'][$layer ?? 0];
+    return theme.color[$themeType ?? 'primary'][$layer ?? 0];
   }
 };
diff --git a/src/design/designFunctions/generateItemTheme/utils/generateNormalStyle.ts b/src/design/designFunctions/generateItemTheme/utils/generateNormalStyle.ts
index 9e951aa47..33de349e2 100644
--- a/src/design/designFunctions/generateItemTheme/utils/generateNormalStyle.ts
+++ b/src/design/designFunctions/generateItemTheme/utils/generateNormalStyle.ts
@@ -23,7 +23,7 @@ export const generateNormal = (props: IGenerateNormalitem) => {
   // generates the hover style for the button
   const hoverBackgroundColorStyle = () => {
     if ($themeType === 'transparent') return 'transparent';
-    if ($hoverColor) return theme.colors[$hoverColor][1];
+    if ($hoverColor) return theme.color[$hoverColor][1];
     return getBackgroundColor({ theme, $themeType: $themeType ?? 'accent', $layer: ($layer && $layer + 1) ?? 1 });
   };
 
@@ -34,7 +34,7 @@ export const generateNormal = (props: IGenerateNormalitem) => {
     color: ${textColor};
 
     &:hover {
-      ${$themeType === 'transparent' ? 'color: ' + theme.colors.secondary[1] : ''};
+      ${$themeType === 'transparent' ? 'color: ' + theme.color.secondary[1] : ''};
       ${$themeType !== 'transparent' && boxShadow.sm};
       background-color: ${hoverBackgroundColorStyle};
     }
diff --git a/src/design/designFunctions/generateItemTheme/utils/generateOutlinedStyle.ts b/src/design/designFunctions/generateItemTheme/utils/generateOutlinedStyle.ts
index 4b74a3acf..ac4632c63 100644
--- a/src/design/designFunctions/generateItemTheme/utils/generateOutlinedStyle.ts
+++ b/src/design/designFunctions/generateItemTheme/utils/generateOutlinedStyle.ts
@@ -21,7 +21,7 @@ export const generateOutlined = (props: IGenerateOutlinedItem) => {
   const backgroundColor = Color(getButtonColor).alpha(0.1).hexa();
 
   const clacHoverColor = () => {
-    if ($textColor) return theme.colors[$textColor][1];
+    if ($textColor) return theme.color[$textColor][1];
     return getButtonColor;
   };
 
diff --git a/src/design/designFunctions/generateSystemIndicatorStyle/generateSystemIndicatorStyle.ts b/src/design/designFunctions/generateSystemIndicatorStyle/generateSystemIndicatorStyle.ts
index ef7668545..1a90abc9b 100644
--- a/src/design/designFunctions/generateSystemIndicatorStyle/generateSystemIndicatorStyle.ts
+++ b/src/design/designFunctions/generateSystemIndicatorStyle/generateSystemIndicatorStyle.ts
@@ -8,7 +8,7 @@ export default function generateSystemIndicatorStyle(systemMessage?: TUiColorsSy
 
   if (systemMessage)
     return css`
-      border: ${`1.5px solid ${theme.colors[systemMessage][0]}`};
+      border: ${`1.5px solid ${theme.color[systemMessage][0]}`};
       transition: border 0.3s ease-in-out;
     `;
 }
diff --git a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts
index c33126d74..ef301e712 100644
--- a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts
+++ b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts
@@ -24,7 +24,7 @@ export const generateNormalStyle = (props: TGenerateNormalStyle) => {
   return css`
     border: none;
     background-color: ${backgorundColor};
-    color: ${$textColor ? theme.colors[$textColor][0] : getOpositTextColor()};
+    color: ${$textColor ? theme.color[$textColor][0] : getOpositTextColor()};
     /* This generate the hover / active style if its needed */
     ${$backgroundState && generateStateStyle(props)}
   `;
diff --git a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts
index 534004f2a..afaafa9ca 100644
--- a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts
+++ b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts
@@ -12,7 +12,7 @@ export const generateTextColor = (
   const theme = themeStore.getState().theme;
 
   // if the userer profides a $textColor use this
-  if ($textColor) return theme.colors[$textColor][$layer ?? 0];
+  if ($textColor) return theme.color[$textColor][$layer ?? 0];
 
   return getBackgroundColor({ theme, $themeType: $textColor ?? $themeType ?? 'secondary', $layer: $layer ?? 0 });
 };
diff --git a/src/design/theme/Styling.mdx b/src/design/theme/Styling.mdx
index c4ed10e88..7401ceb62 100644
--- a/src/design/theme/Styling.mdx
+++ b/src/design/theme/Styling.mdx
@@ -19,7 +19,7 @@ To incorporate the theme into your styled components, follow these steps:
      styled.div <
      { theme: TTheme } >
      `
-     background-color: ${({ theme }) => theme.colors.primary['0']};
+     background-color: ${({ theme }) => theme.color.primary['0']};
    `;
    ```
 
diff --git a/src/design/theme/globalStyle/DefaultStyle/DefaultStyle.ts b/src/design/theme/globalStyle/DefaultStyle/DefaultStyle.ts
index 07d0b05de..cbe982ae1 100644
--- a/src/design/theme/globalStyle/DefaultStyle/DefaultStyle.ts
+++ b/src/design/theme/globalStyle/DefaultStyle/DefaultStyle.ts
@@ -7,8 +7,8 @@ const DefaultStyle = createGlobalStyle<{ theme?: TTheme }>`
   body {
     margin: 0;
     padding: 0;
-    background: ${({ theme }) => theme.colors.primary[0]};
-    color: ${({ theme }) => theme.colors.secondary[0]};
+    background: ${({ theme }) => theme.color.primary[0]};
+    color: ${({ theme }) => theme.color.secondary[0]};
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     position: relative;
     overflow-y: auto;
diff --git a/src/design/theme/themeStore/themeStore.mdx b/src/design/theme/themeStore/themeStore.mdx
index 49cc60b82..b687cac89 100644
--- a/src/design/theme/themeStore/themeStore.mdx
+++ b/src/design/theme/themeStore/themeStore.mdx
@@ -38,7 +38,7 @@ const ExampleComponent = () => {
   const switchTheme = themeStore((state) => state.switchTheme);
 
   return (
-    <div style={{ backgroundColor: theme.colors.primary[0] }}>
+    <div style={{ backgroundColor: theme.color.primary[0] }}>
       <button onClick={switchTheme}>Switch Theme</button>
     </div>
   );
diff --git a/src/design/theme/themeStore/themeStore.ts b/src/design/theme/themeStore/themeStore.ts
index 42a1be56e..cbdfa44c3 100644
--- a/src/design/theme/themeStore/themeStore.ts
+++ b/src/design/theme/themeStore/themeStore.ts
@@ -16,7 +16,7 @@ type ThemeState = {
 // the store for the theme
 const themeStore = create<ThemeState>((set) => ({
   theme: {
-    colors: uiColors,
+    color: uiColors,
     borderRadius: borderRadius,
     spacing: spacingPx,
     fontSizes: typography,
@@ -31,10 +31,10 @@ const themeStore = create<ThemeState>((set) => ({
         isDarkTheme: !state.isDarkTheme,
         theme: {
           ...state.theme,
-          colors: {
-            ...state.theme.colors,
-            primary: state.theme.colors.secondary,
-            secondary: state.theme.colors.primary,
+          color: {
+            ...state.theme.color,
+            primary: state.theme.color.secondary,
+            secondary: state.theme.color.primary,
           },
         },
       };
diff --git a/src/stories/Setup/Setup.mdx b/src/stories/Setup/Setup.mdx
index 9b8cb5187..ff78779fb 100644
--- a/src/stories/Setup/Setup.mdx
+++ b/src/stories/Setup/Setup.mdx
@@ -35,8 +35,8 @@ const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     padding: 0;
-    background: ${({ theme }) => theme.colors.primary[0]};
-    color: ${({ theme }) => theme.colors.secondary[0]};
+    background: ${({ theme }) => theme.color.primary[0]};
+    color: ${({ theme }) => theme.color.secondary[0]};
     font-family: DMSans, Helvetica, Sans-Serif;
   }
   // Add additional global styles as needed
diff --git a/src/types/TDynamicElement.ts b/src/types/TDynamicElement.ts
index 3041678e7..3e468e265 100644
--- a/src/types/TDynamicElement.ts
+++ b/src/types/TDynamicElement.ts
@@ -1,3 +1,6 @@
-export type TDynamicElementProps<T extends React.ElementType> = {
-  as?: T;
-} & Omit<React.ComponentProps<T>, 'as'>;
+import { ElementType } from 'react';
+
+// Props for dynamic element type
+export type TDynamicElement<T extends ElementType> = {
+  as?: ElementType;
+} & React.HTMLAttributes<T>;
diff --git a/src/types/TTheme.ts b/src/types/TTheme.ts
index 499c742d2..bd1cdd4e1 100644
--- a/src/types/TTheme.ts
+++ b/src/types/TTheme.ts
@@ -7,7 +7,7 @@ import { globalElementsizes } from '@/design/theme/globalSizes';
 
 //the structure for the theme object
 export type TTheme = {
-  colors: TUiColorsTypeObject;
+  color: TUiColorsTypeObject;
   spacing: {
     [key in TSpacings]: string;
   };
diff --git a/src/types/index.ts b/src/types/index.ts
index 9b0a1a74b..5f15ee64b 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -19,3 +19,4 @@ export * from './IStatus';
 export * from './TGlobalElementSizes';
 export * from './TBreakPoints';
 export * from './TSizeSettings';
+export * from './TDynamicElement';