diff --git a/__snapshots__/container--container-row-col-chromium.png b/__snapshots__/container--container-row-col-chromium.png
index 85f1e86a..900d2429 100644
Binary files a/__snapshots__/container--container-row-col-chromium.png and b/__snapshots__/container--container-row-col-chromium.png differ
diff --git a/__snapshots__/container--container-row-col-firefox.png b/__snapshots__/container--container-row-col-firefox.png
index 3e986f61..6946a7b8 100644
Binary files a/__snapshots__/container--container-row-col-firefox.png and b/__snapshots__/container--container-row-col-firefox.png differ
diff --git a/__snapshots__/container--container-row-col-webkit.png b/__snapshots__/container--container-row-col-webkit.png
index c324e986..6f6b2e65 100644
Binary files a/__snapshots__/container--container-row-col-webkit.png and b/__snapshots__/container--container-row-col-webkit.png differ
diff --git a/__snapshots__/quote--quote-sample-chromium.png b/__snapshots__/quote--quote-sample-chromium.png
index 3e0c189d..090e454a 100644
Binary files a/__snapshots__/quote--quote-sample-chromium.png and b/__snapshots__/quote--quote-sample-chromium.png differ
diff --git a/__snapshots__/quote--quote-sample-firefox.png b/__snapshots__/quote--quote-sample-firefox.png
index 1aeb701a..435d070d 100644
Binary files a/__snapshots__/quote--quote-sample-firefox.png and b/__snapshots__/quote--quote-sample-firefox.png differ
diff --git a/__snapshots__/quote--quote-sample-webkit.png b/__snapshots__/quote--quote-sample-webkit.png
index 1464bd68..53f6115b 100644
Binary files a/__snapshots__/quote--quote-sample-webkit.png and b/__snapshots__/quote--quote-sample-webkit.png differ
diff --git a/package-lock.json b/package-lock.json
index 246eb442..c7be43bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,8 +7,8 @@
     "": {
       "name": "@code0-tech/pictor",
       "version": "0.1.0-pre-alpha",
-      "license": "MIT",
       "dependencies": {
+        "merge-props": "^6.0.0",
         "react-aria": "^3.31.1",
         "react-stately": "^3.29.1",
         "rollup-plugin-visualizer": "^5.11.0"
@@ -9454,13 +9454,13 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dev": true,
       "dependencies": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
@@ -9468,7 +9468,7 @@
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
         "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -10361,9 +10361,9 @@
       "dev": true
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
@@ -11744,17 +11744,17 @@
       "dev": true
     },
     "node_modules/express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dev": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -12222,9 +12222,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true,
       "funding": [
         {
@@ -13284,9 +13284,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
-      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
+      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
       "dev": true
     },
     "node_modules/ipaddr.js": {
@@ -17110,6 +17110,11 @@
       "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
       "dev": true
     },
+    "node_modules/merge-props": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/merge-props/-/merge-props-6.0.0.tgz",
+      "integrity": "sha512-ORZFZMGKE5PuAi7YfVCfPz3jiS9V0t2XXE2AGYiwMrcudRuj0hkXKEzsl17pUF07r+Digf9YlTzteX2LFE6vAQ=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -19261,9 +19266,9 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dev": true,
       "dependencies": {
         "bytes": "3.1.2",
@@ -21140,9 +21145,9 @@
       "dev": true
     },
     "node_modules/tar": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
-      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
       "dev": true,
       "dependencies": {
         "chownr": "^2.0.0",
@@ -21935,9 +21940,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
-      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
       "peer": true,
       "dependencies": {
diff --git a/package.json b/package.json
index d9bd82a6..7dc849b8 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "access": "public"
   },
   "dependencies": {
+    "merge-props": "^6.0.0",
     "react-aria": "^3.31.1",
     "react-stately": "^3.29.1",
     "rollup-plugin-visualizer": "^5.11.0"
diff --git a/src/components/FontSizes/Text.tsx b/src/components/FontSizes/Text.tsx
index eeaa0bd3..6c66d1dc 100644
--- a/src/components/FontSizes/Text.tsx
+++ b/src/components/FontSizes/Text.tsx
@@ -1,16 +1,17 @@
-import React, {HTMLProps} from "react";
-import {Size} from "../../utils/types";
+import React from "react";
+import {Code0Component, Code0Sizes} from "../../utils/types";
 import "./Text.style.scss"
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "size"> {
+export interface FontType extends Omit<Omit<Code0Component<HTMLSpanElement>, "children">, "size"> {
     children: string,
-    size: Size,
+    size: Code0Sizes,
     hierarchy?: "primary" | "secondary" | "tertiary"
 }
 
-const Text: React.FC<FontType> = ({ size, children , hierarchy = "secondary", ...rest }) => {
+const Text: React.FC<FontType> = ({size, children, hierarchy = "secondary", ...rest}) => {
 
-    return <span {...rest} className={`text text--${hierarchy} text--${size}`}>
+    return <span {...mergeCode0Props(`text text--${hierarchy} text--${size}`, rest)}>
         {children}
     </span>
 }
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index 911657d6..0f4b1154 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -1,9 +1,10 @@
-import React, {ReactElement, ReactNode} from "react";
+import React, {ReactNode} from "react";
 import {IconAlertCircle, IconCircleCheck, IconCircleX, IconInfoCircle, IconX} from "@tabler/icons-react";
 import "./Alert.style.scss"
-import {Color} from "../../utils/types";
+import {Code0Component, Color} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface AlertType {
+export interface AlertType extends Omit<Code0Component<HTMLDivElement>, "title"> {
 
     children?: ReactNode | ReactNode[]
     title: ReactNode
@@ -28,9 +29,9 @@ const IconColors = {
 
 const Alert: React.FC<AlertType> = (props) => {
 
-    const {color = "primary", dismissible = false, icon = true, title, onClose = (event) => {}, children} = props
+    const {color = "primary", dismissible = false, icon = true, title, onClose = (event) => {}, children, ...rest} = props
 
-    return <div className={`alert alert--${color}`}>
+    return <div {...mergeCode0Props(`alert alert--${color}`, rest)}>
         <div className={"alert__header"}>
             <div className={"alert__header-wrapper"}>
                 {icon ? <AlertIcon color={color}/> : null}
@@ -46,10 +47,6 @@ const Alert: React.FC<AlertType> = (props) => {
 
 }
 
-export interface AlertHeadingType {
-    children: ReactNode
-}
-
 export interface AlertIconType {
     color: Color
 }
@@ -61,5 +58,4 @@ const AlertIcon: React.FC<AlertIconType> = ({color}) => {
 }
 
 
-
 export default Alert
\ No newline at end of file
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index 942cce73..b33c39c7 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -1,8 +1,9 @@
-import React, {HTMLProps} from "react";
+import React from "react";
 import "./Badge.style.scss"
-import {Color} from "../../utils/types";
+import {Code0Component, Color} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface BadgeType extends HTMLProps<HTMLSpanElement>{
+export interface BadgeType extends Code0Component<HTMLSpanElement>{
     children: string
     //defaults to primary
     color?: Color
@@ -12,7 +13,7 @@ const Badge: React.FC<BadgeType> = (props) => {
     
     const {color = "primary", children, ...args} = props
     
-    return <span {...args} className={`badge badge--${color}`}>
+    return <span {...mergeCode0Props(`badge badge--${color}`, args)}>
         {children}
     </span>
 }
diff --git a/src/components/button-group/ButtonGroup.tsx b/src/components/button-group/ButtonGroup.tsx
index ce34be67..7a871429 100644
--- a/src/components/button-group/ButtonGroup.tsx
+++ b/src/components/button-group/ButtonGroup.tsx
@@ -1,16 +1,18 @@
 import React, {ReactElement} from "react";
 import {ButtonType} from "../button/Button";
 import "./ButtonGroup.style.scss"
+import {Code0Component} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface ButtonGroupType {
+export interface ButtonGroupType extends Code0Component<HTMLDivElement> {
     children: ReactElement<ButtonType>[]
 }
 
 const ButtonGroup: React.FC<ButtonGroupType> = (props) => {
 
-    const {children} = props
+    const {children, ...args} = props
 
-    return <div className={"button-group"}>
+    return <div {...mergeCode0Props("button-group", args)}>
 
         {children.map((child, i) => {
             return <div
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index fc3309a3..474be1c4 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -1,13 +1,11 @@
 import "./Button.style.scss"
 import React, {
-    AnchorHTMLAttributes,
-    DetailedHTMLProps,
     ReactNode
 } from "react";
-import {getChild, getContent} from "../../utils/utils";
-import {Color} from "../../utils/types"
+import {getChild, getContent, mergeCode0Props} from "../../utils/utils";
+import {Code0Component, Color} from "../../utils/types"
 
-export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+export interface ButtonType extends Code0Component<HTMLAnchorElement> {
     children: ReactNode | ReactNode[]
     //defaults to primary
     color?: Color,
@@ -19,7 +17,7 @@ export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLA
     disabled?: boolean
 }
 
-export interface ButtonIconType {
+export interface ButtonIconType extends Code0Component<HTMLSpanElement>{
     children: ReactNode
 }
 
@@ -29,16 +27,17 @@ const Button: React.FC<ButtonType> = (props) => {
     const icon = getChild(children, ButtonIcon)
     const content = getContent(children, ButtonIcon)
 
-    return <a {...args}
-              className={`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`}
+    return <a {...mergeCode0Props(`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`, args)}
               aria-disabled={disabled ? "true" : "false"}>
         {icon}
         {content ? <span className={"button__content"}>{content}</span> : null}
     </a>
 }
 
-const ButtonIcon: React.FC<ButtonIconType> = ({children}) => {
-    return <span className={"button__icon"}>
+const ButtonIcon: React.FC<ButtonIconType> = (props) => {
+
+    const {children, ...args} = props
+    return <span {...mergeCode0Props("button__icon", args)}>
         {children}
     </span>
 }
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index d0074cf0..e40a9122 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -1,9 +1,10 @@
-import React, {HTMLProps, ReactElement, ReactNode} from "react";
+import React, {ReactNode} from "react";
 import "./Card.style.scss"
-import {Color, Size} from "../../utils/types";
+import {Code0Component, Color} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
 
-export interface CardType extends HTMLProps<HTMLDivElement> {
+export interface CardType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[]
     //defaults to secondary
     color?: Color,
@@ -18,7 +19,7 @@ export interface CardType extends HTMLProps<HTMLDivElement> {
 }
 
 
-export interface SectionType {
+export interface SectionType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[]
     //defaults to false
     image?: boolean,
@@ -40,8 +41,7 @@ const Card: React.FC<CardType> = (props) => {
     } = props
 
     return <>
-        <div {...args}
-             className={`card ${outline && "card--outline"} ${gradient && "card--gradient"} ${gradient && `card--gradient-${gradientPosition}`} card--${color} card--${variant}`}>
+        <div {...mergeCode0Props(`card ${outline ? "card--outline" : ""} ${gradient ? "card--gradient" : ""} ${gradient ? `card--gradient-${gradientPosition}` : ""} card--${color} card--${variant}`, args)}>
             {children}
         </div>
     </>
@@ -52,12 +52,14 @@ const CardSection: React.FC<SectionType> = (props) => {
     const {
         image = false,
         border = false,
-        children
+        children,
+        ...args
     } = props;
 
     return <>
-        <div
-            className={`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`}>{children}</div>
+        <div {...mergeCode0Props(`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`, args)}>
+            {children}
+        </div>
     </>
 }
 
diff --git a/src/components/col/Col.tsx b/src/components/col/Col.tsx
index ba48e428..3efb20f0 100644
--- a/src/components/col/Col.tsx
+++ b/src/components/col/Col.tsx
@@ -1,9 +1,11 @@
-import React, {HTMLProps, ReactNode} from "react";
+import React, {ReactNode} from "react";
 import "./Col.style.scss"
+import {Code0Component} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
 export type ColBreakPointRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export interface ColType extends HTMLProps<HTMLDivElement> {
+export interface ColType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[]
     xs?: ColBreakPointRange
     sm?: ColBreakPointRange
@@ -17,7 +19,7 @@ const Col: React.FC<ColType> = (props) => {
 
     const {children, xs, sm, md, lg, xl, xxl, ...args} = props
 
-    return <div {...args} className={`col ${xs ? `col-xs-${xs}` : ""} ${sm ? `col-sm-${sm}` : ""} ${md ? `col-md-${md}` : ""} ${lg ? `col-lg-${lg}` : ""} ${xl ? `col-lg-${xl}` : ""} ${xxl ? `col-xxl-${xxl}` : ""}`}>
+    return <div {...mergeCode0Props(`col ${xs ? `col-xs-${xs}` : ""} ${sm ? `col-sm-${sm}` : ""} ${md ? `col-md-${md}` : ""} ${lg ? `col-lg-${lg}` : ""} ${xl ? `col-lg-${xl}` : ""} ${xxl ? `col-xxl-${xxl}` : ""}`, args)}>
         {children}
     </div>
 }
diff --git a/src/components/container/Container.stories.tsx b/src/components/container/Container.stories.tsx
index 15699926..966cd153 100644
--- a/src/components/container/Container.stories.tsx
+++ b/src/components/container/Container.stories.tsx
@@ -62,7 +62,7 @@ export const ContainerWithNews = () => {
 }
 
 export const ContainerRowCol = () => {
-    return <div style={{background: "#ffffff1a", padding: "1rem 0"}}>
+    return <div style={{background: "#ffffff1a"}}>
         <Container>
             <Row>
                 <Col xs={12} lg={4}>
@@ -77,17 +77,19 @@ export const ContainerRowCol = () => {
                 </Col>
                 <Col xs={12} lg={4}>
                     <Card gradient variant={"outlined"} color={"info"}>
-                        <Text size={"md"}>Heading 2</Text>
+                        <Text size={"md"}>Heading 3</Text>
                     </Card>
                 </Col>
+            </Row>
+            <Row>
                 <Col>
                     <Card gradient variant={"outlined"} color={"info"}>
-                        <Text size={"md"}>Heading 2</Text>
+                        <Text size={"md"}>Heading 4</Text>
                     </Card>
                 </Col>
                 <Col>
                     <Card gradient variant={"outlined"} color={"info"}>
-                        <Text size={"md"}>Heading 2</Text>
+                        <Text size={"md"}>Heading 5</Text>
                     </Card>
                 </Col>
             </Row>
diff --git a/src/components/container/Container.tsx b/src/components/container/Container.tsx
index a227d9eb..1713e191 100644
--- a/src/components/container/Container.tsx
+++ b/src/components/container/Container.tsx
@@ -1,7 +1,9 @@
-import React, {HTMLProps, ReactNode} from "react";
+import React, {ReactNode} from "react";
 import "./Container.style.scss"
+import {Code0Component} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface ContainerType extends HTMLProps<HTMLDivElement> {
+export interface ContainerType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[]
 }
 
@@ -9,7 +11,7 @@ const Container: React.FC<ContainerType> = (props) => {
 
     const {children, ...args} = props
 
-    return <div {...args} className={"container"}>
+    return <div {...mergeCode0Props("container", args)}>
         {children}
     </div>
 }
diff --git a/src/components/quote/Quote.stories.tsx b/src/components/quote/Quote.stories.tsx
index 46fd5b91..3ec42864 100644
--- a/src/components/quote/Quote.stories.tsx
+++ b/src/components/quote/Quote.stories.tsx
@@ -38,10 +38,12 @@ type QuoteStory = StoryObj<typeof Quote>;
 
 export const QuoteSample: QuoteStory = {
     render: (args) => {
-        return <Quote  {...args} name={"Nico Sammito"}
+        return <Quote {...args} name={"Nico Sammito"}
+                      style={{height: "200px"}}
                       logo={"https://avatars.githubusercontent.com/u/150623800?s=200&v=4"}
                       position={"Co-founder"}
-                      style={{width: "300px"}}>
+                      mt={10}
+                      w={"300px"}>
             My favorite UX feedback from customers is:
             "How is the app so fast?"
             Because we’ve built on Next.js and Vercel since day one, our pages load in an instant,
diff --git a/src/components/quote/Quote.tsx b/src/components/quote/Quote.tsx
index 4bef8f12..9c9d5ddc 100644
--- a/src/components/quote/Quote.tsx
+++ b/src/components/quote/Quote.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import {TablerIconsProps} from "@tabler/icons-react";
 import Card, {CardType} from "../card/Card";
 import "./Quote.style.scss"
 import Text from "../FontSizes/Text";
diff --git a/src/components/row/Row.style.scss b/src/components/row/Row.style.scss
index 038eb2dc..4abd38c2 100644
--- a/src/components/row/Row.style.scss
+++ b/src/components/row/Row.style.scss
@@ -11,6 +11,9 @@
   > * {
     flex-shrink: 0;
     max-width: 100%;
-    padding: 0 .5rem;
+    width: 100%;
+    padding-left: .5rem;
+    padding-right: .5rem;
+    box-sizing: border-box;
   }
 }
\ No newline at end of file
diff --git a/src/components/row/Row.tsx b/src/components/row/Row.tsx
index a4099cb6..2b027ee6 100644
--- a/src/components/row/Row.tsx
+++ b/src/components/row/Row.tsx
@@ -1,7 +1,9 @@
-import React, {HTMLProps, ReactNode} from "react";
+import React, {ReactNode} from "react";
 import "./Row.style.scss"
+import {Code0Component} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface RowType extends HTMLProps<HTMLDivElement> {
+export interface RowType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[]
 }
 
@@ -9,7 +11,7 @@ const Row: React.FC<RowType> = (props) => {
 
     const {children, ...args} = props
 
-    return <div {...args} className={"row"}>
+    return <div {...mergeCode0Props("row", args)}>
         {children}
     </div>
 }
diff --git a/src/utils/types.ts b/src/utils/types.ts
index f28ff856..3ecc1f82 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,7 +1,61 @@
+import React, {HTMLProps} from "react";
+
 export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
 
 export const Colors: Color[] = ["primary", "secondary", "info", "success", "warning", "error"]
 
-export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+export type Code0Sizes = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type Code0FontSizes = "0.75" | "0.8" | "1" | "1.2" | "1.25"
+
+export type StyleProp<Value> = Value;
+
+export interface Code0ComponentProps {
+    m?: StyleProp<number | `${number}`>
+    my?: StyleProp<number | `${number}`>
+    mx?: StyleProp<number | `${number}`>
+    mt?: StyleProp<number | `${number}`>
+    mb?: StyleProp<number | `${number}`>
+    ml?: StyleProp<number | `${number}`>
+    mr?: StyleProp<number | `${number}`>
+    p?: StyleProp<number | `${number}`>
+    py?: StyleProp<number | `${number}`>
+    px?: StyleProp<number | `${number}`>
+    pt?: StyleProp<number | `${number}`>
+    pb?: StyleProp<number | `${number}`>
+    pl?: StyleProp<number | `${number}`>
+    pr?: StyleProp<number | `${number}`>
+    bg?: React.CSSProperties['backgroundColor'];
+    c?: React.CSSProperties['color'];
+    opacity?: React.CSSProperties['opacity'];
+    ff?: StyleProp<'mono' | 'text' | 'heading' | (string & {})>;
+    fz?: StyleProp<Code0FontSizes | number | `${number}`>;
+    fw?: StyleProp<React.CSSProperties['fontWeight']>;
+    lts?: StyleProp<React.CSSProperties['letterSpacing']>;
+    ta?: StyleProp<React.CSSProperties['textAlign']>;
+    lh?: StyleProp<number | (string & {})>;
+    fs?: StyleProp<React.CSSProperties['fontStyle']>;
+    tt?: StyleProp<React.CSSProperties['textTransform']>;
+    td?: StyleProp<React.CSSProperties['textDecoration']>;
+    w?: StyleProp<React.CSSProperties['width']>;
+    miw?: StyleProp<React.CSSProperties['minWidth']>;
+    maw?: StyleProp<React.CSSProperties['maxWidth']>;
+    h?: StyleProp<React.CSSProperties['height']>;
+    mih?: StyleProp<React.CSSProperties['minHeight']>;
+    mah?: StyleProp<React.CSSProperties['maxHeight']>;
+    bgsz?: StyleProp<React.CSSProperties['backgroundSize']>;
+    bgp?: StyleProp<React.CSSProperties['backgroundPosition']>;
+    bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>;
+    bga?: StyleProp<React.CSSProperties['backgroundAttachment']>;
+    pos?: StyleProp<React.CSSProperties['position']>;
+    top?: StyleProp<React.CSSProperties['top']>;
+    left?: StyleProp<React.CSSProperties['left']>;
+    bottom?: StyleProp<React.CSSProperties['bottom']>;
+    right?: StyleProp<React.CSSProperties['right']>;
+    inset?: StyleProp<React.CSSProperties['inset']>;
+    display?: StyleProp<React.CSSProperties['display']>;
+    flex?: StyleProp<React.CSSProperties['flex']>;
+}
 
-export const Sizes: Size[] = ["xs", "sm", "md", "lg", "xl"]
\ No newline at end of file
+export interface Code0Component<T> extends Code0ComponentProps, HTMLProps<T> {
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ffbb7f92..31e0b7df 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,4 +1,6 @@
-import React, {ReactNode, useEffect, useMemo, useState} from "react";
+import React, {CSSProperties, HTMLProps, ReactNode, useMemo, useState} from "react";
+import mergeProps from "merge-props";
+import {Code0Component, Code0ComponentProps} from "./types";
 
 
 export const getChild = (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean): React.ReactElement | undefined => {
@@ -35,6 +37,59 @@ export interface Positioning {
     y: number
 }
 
+const createStyle = (styles: Code0Component<any>): CSSProperties => ({
+    ...(styles.m ? {margin: `${styles.m}rem`} : {}),
+    ...(styles.my ? {marginTop: `${styles.my}rem`, marginBottom: `${styles.my}rem`} : {}),
+    ...(styles.mx ? {marginLeft: `${styles.mx}rem`, marginRight: `${styles.mx}rem`} : {}),
+    ...(styles.mt ? {marginTop: `${styles.mt}rem`} : {}),
+    ...(styles.mb ? {marginBottom: `${styles.mb}rem`} : {}),
+    ...(styles.ml ? {marginLeft: `${styles.ml}rem`} : {}),
+    ...(styles.mr ? {marginRight: `${styles.mr}rem`} : {}),
+    ...(styles.p ? {padding: `${styles.p}rem`} : {}),
+    ...(styles.py ? {paddingTop: `${styles.py}rem`, paddingBottom: `${styles.py}rem`} : {}),
+    ...(styles.px ? {paddingLeft: `${styles.px}rem`, paddingRight: `${styles.px}rem`} : {}),
+    ...(styles.pt ? {paddingTop: `${styles.pt}rem`} : {}),
+    ...(styles.pb ? {paddingBottom: `${styles.pb}rem`} : {}),
+    ...(styles.pl ? {paddingLeft: `${styles.pl}rem`} : {}),
+    ...(styles.pr ? {paddingRight: `${styles.pr}rem`} : {}),
+    ...(styles.bg ? {backgroundColor: styles.bg} : {}),
+    ...(styles.c ? {color: styles.c} : {}),
+    ...(styles.opacity ? {opacity: styles.opacity} : {}),
+    ...(styles.ff ? {fontFamily: styles.ff} : {}),
+    ...(styles.fz ? {fontSize: `${styles.fz}rem`} : {}),
+    ...(styles.ta ? {textAlign: styles.ta} : {}),
+    ...(styles.w ? {width: styles.w} : {}),
+    ...(styles.miw ? {minWidth: styles.miw} : {}),
+    ...(styles.maw ? {maxWidth: styles.maw} : {}),
+    ...(styles.h ? {height: styles.h} : {}),
+    ...(styles.mih ? {minHeight: styles.mih} : {}),
+    ...(styles.mah ? {maxHeight: styles.mah} : {}),
+    ...(styles.pos ? {position: styles.pos} : {}),
+    ...(styles.top ? {top: styles.top} : {}),
+    ...(styles.left ? {left: styles.left} : {}),
+    ...(styles.bottom ? {bottom: styles.bottom} : {}),
+    ...(styles.right ? {right: styles.right} : {}),
+    ...(styles.display ? {display: styles.display} : {}),
+    ...(styles.flex ? {flex: styles.flex} : {}),
+
+})
+
+export const mergeCode0Props = <T extends HTMLElement>(cn: string, rest: Code0Component<T>): HTMLProps<T> => {
+
+    const style = createStyle(rest)
+    const newProps: Code0Component<T> = rest;
+    const keys: (keyof Code0ComponentProps)[] = ["m", "my", "mx", "mt", "mb", "ml", "mr", "p", "py", "px", "pt", "pb", "pl", "pr", "bg", "c", "opacity", "ff", "fz", "fw", "lts", "ta", "lh", "fs", "tt", "td", "w", "miw", "maw", "h", "mih", "mah", "bgsz", "bgp", "bgr", "bga", "pos", "top", "left", "bottom", "right", "inset", "display", "flex"]
+
+    keys.forEach(key => {
+        delete newProps[key]
+    })
+
+    return mergeProps(newProps, {
+        className: cn,
+        ...(Object.keys(style).length !== 0 ? {style: style} : {})
+    })
+}
+
 export const getWindowPositioning = (): Omit<Omit<Positioning, "x">, "y"> => {
     return {
         height: window.innerHeight,