diff --git a/README.md b/README.md
index 76ddd03..c18e587 100644
--- a/README.md
+++ b/README.md
@@ -7,14 +7,14 @@ This repository is including and will be including components, enumerates in tab
   - [x] Icon
   - [x] FAB
   - [X] Radio
-  - [ ] Segmented
+  - [ ] Segmented (WIP)
 - [X] Checkbox
 - [x] Text fields
 - [X] Switches
 - [ ] Chips
 - [x] Icon
 - [x] Ripple Effect
-- [x] Dividers
+- [ ] Dividers (WIP)
 - [x] Badges
 - [ ] Select field
 - [ ] Bottom sheets
diff --git a/app/components/buttons.tsx b/app/components/buttons.tsx
index e9afb08..10fdf3c 100644
--- a/app/components/buttons.tsx
+++ b/app/components/buttons.tsx
@@ -12,9 +12,24 @@ export default function Buttons() {
     );
 
     return (
-        <div className={'m3 m3-wrapper'}>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
             <h1> Buttons </h1>
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: '2em',
+                    width: '100%',
+                    height: '100%',
+                }}
+            >
                 <div>
                     <h2> Default buttons </h2>
                     <div
@@ -30,7 +45,7 @@ export default function Buttons() {
                             onClick={callback}
                             variant={'filled'}
                         >
-                            Label + {state}
+                            Label
                         </Button>
                         <Button variant={'outlined'}>Label</Button>
                         <Button variant={'tonal'}>Label</Button>
diff --git a/app/components/icon-buttons.tsx b/app/components/icon-buttons.tsx
index 9693d93..02940e3 100644
--- a/app/components/icon-buttons.tsx
+++ b/app/components/icon-buttons.tsx
@@ -5,7 +5,14 @@ import { IconButton } from '../../src/primitive-components/components';
 
 function IconButtons() {
     return (
-        <div className={'m3 m3-wrapper'}>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
             <h1> Icon buttons </h1>
             <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
                 <div>
diff --git a/app/page.tsx b/app/page.tsx
index fba95c8..a2bb0fd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,6 +9,7 @@ import IconButtons from './components/icon-buttons';
 import { TextFields } from './components/text-fields';
 import {
     ButtonLayout,
+    Divider,
     SegmentedButtons,
 } from '../src/primitive-components/components';
 
@@ -35,23 +36,79 @@ export default function Page() {
                         alignItems: 'center',
                     }}
                 >
-                    <Buttons />
-                    <IconButtons />
+                    <div className={'m3 m3-wrapper'}>
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                padding: '25px',
+                            }}
+                        >
+                            <SegmentedButtons>
+                                <ButtonLayout>Segment 1</ButtonLayout>
+                                <ButtonLayout>Segment 2</ButtonLayout>
+                            </SegmentedButtons>
+                        </div>
+                    </div>
+                    <div
+                        className={'m3 m3-wrapper'}
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            gap: '0.5em',
+                            justifyContent: 'space-evenly',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                padding: '25px',
+                            }}
+                        >
+                            <Buttons />
+                        </div>
+                        <Divider
+                            orientation={'vertical'}
+                            variant={'middle-inset'}
+                        />
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                padding: '25px',
+                            }}
+                        >
+                            <IconButtons />
+                        </div>
+                    </div>
+                    <div
+                        className={'m3 m3-wrapper'}
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            gap: '0.5em',
+                            justifyContent: 'space-evenly',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <Checkboxes />
+                        <Divider
+                            orientation={'vertical'}
+                            variant={'middle-inset'}
+                        />
+                        <Radios />
+                        <Divider
+                            orientation={'vertical'}
+                            variant={'middle-inset'}
+                        />
+                        <Badges />
+                    </div>
                     <Switches />
-                    <Checkboxes />
-                    <Radios />
                     <TextFields />
                     <Fabs />
-                    <Badges />
                 </div>
-                <SegmentedButtons>
-                    <ButtonLayout>
-                        <span>Segment 1</span>
-                    </ButtonLayout>
-                    <ButtonLayout>
-                        <span>Segment 1</span>
-                    </ButtonLayout>
-                </SegmentedButtons>
             </div>
         </Fragment>
     );
diff --git a/src/primitive-components/button-layout/button-layout.tsx b/src/primitive-components/button-layout/button-layout.tsx
index 8e1ba75..b014c81 100644
--- a/src/primitive-components/button-layout/button-layout.tsx
+++ b/src/primitive-components/button-layout/button-layout.tsx
@@ -7,15 +7,14 @@ import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import React, { forwardRef, useId, useRef, useState } from 'react';
 
 export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
-    ({ centralRipple = false, variant, ...props }, ref) => {
+    ({ centralRipple = false, ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             buttonId = useId(),
             events = useRippleEffect(ripplesRef, setIsActive);
 
-        const classes = props.className
-            ? `m3 ${props.className} ${variant}${isActive ? ' is-active' : ''}`
-            : `m3 ${variant}${isActive ? ' is-active' : ''}`;
+        const classes =
+            `m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
 
         return (
             <button
@@ -38,7 +37,6 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
 );
 
 ButtonLayout.propTypes = {
-    variant: string,
-    centralRipple: bool,
     children: string,
+    centralRipple: bool,
 };
diff --git a/src/primitive-components/button-layout/button-layout.types.ts b/src/primitive-components/button-layout/button-layout.types.ts
index f44b41b..1d582b3 100644
--- a/src/primitive-components/button-layout/button-layout.types.ts
+++ b/src/primitive-components/button-layout/button-layout.types.ts
@@ -2,6 +2,4 @@ import { ButtonHTMLAttributes } from 'react';
 import { RipplePropsForComponents } from '../ripple/ripple.types';
 
 export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
-    ButtonHTMLAttributes<HTMLButtonElement> & {
-        variant?: string;
-    };
+    ButtonHTMLAttributes<HTMLButtonElement>;
diff --git a/src/primitive-components/button/button.tsx b/src/primitive-components/button/button.tsx
index 330dbc6..0613843 100644
--- a/src/primitive-components/button/button.tsx
+++ b/src/primitive-components/button/button.tsx
@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import { Icon } from '../components';
 import { ButtonProps } from './button.types';
 import { ButtonLayout } from '../button-layout/button-layout';
+import { bool, oneOf, string } from 'prop-types';
 
 /**
  * Button component
@@ -12,18 +13,32 @@ import { ButtonLayout } from '../button-layout/button-layout';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     (
-        { centralRipple = false, variant, disabled = false, icon, ...props },
+        {
+            icon,
+            className = '',
+            disabled = false,
+            variant = 'filled',
+            centralRipple = false,
+            ...props
+        },
         ref,
     ) => (
         <ButtonLayout
             {...props}
             centralRipple={centralRipple}
+            className={`${variant} ${className}`}
             disabled={disabled}
             ref={ref}
-            variant={variant ? variant : 'filled'}
         >
             {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
             <span className={'label-large'}>{props.children}</span>
         </ButtonLayout>
     ),
 );
+
+Button.propTypes = {
+    icon: string,
+    children: string,
+    centralRipple: bool,
+    variant: oneOf(['filled', 'outlined', 'elevated', 'tonal', 'text']),
+};
diff --git a/src/primitive-components/button/button.types.ts b/src/primitive-components/button/button.types.ts
index 76ecf68..50d8674 100644
--- a/src/primitive-components/button/button.types.ts
+++ b/src/primitive-components/button/button.types.ts
@@ -2,9 +2,10 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
 import { ButtonHTMLAttributes } from 'react';
 
 export interface ButtonMainProps {
+    icon?: string;
+    children?: string;
     disabled?: boolean;
     variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
-    icon?: string;
 }
 
 export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &
diff --git a/src/primitive-components/checkbox-layout/check-box-layout.tsx b/src/primitive-components/checkbox-layout/check-box-layout.tsx
index fe88f83..494c50b 100644
--- a/src/primitive-components/checkbox-layout/check-box-layout.tsx
+++ b/src/primitive-components/checkbox-layout/check-box-layout.tsx
@@ -38,7 +38,6 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
 );
 
 CheckBoxLayout.propTypes = {
-    indeterminate: bool,
     typeInput: string,
-    type: string,
+    indeterminate: bool,
 };
diff --git a/src/primitive-components/divider/divider.tsx b/src/primitive-components/divider/divider.tsx
index 813ba04..85000c7 100644
--- a/src/primitive-components/divider/divider.tsx
+++ b/src/primitive-components/divider/divider.tsx
@@ -1,7 +1,8 @@
+import { oneOf } from 'prop-types';
 import React, { forwardRef } from 'react';
 import { DividerProps } from './divider.types';
 
-const Divider = forwardRef<HTMLHRElement, DividerProps>(
+export const Divider = forwardRef<HTMLHRElement, DividerProps>(
     ({ orientation, variant, ...props }, ref) => (
         <hr
             {...props}
@@ -11,4 +12,7 @@ const Divider = forwardRef<HTMLHRElement, DividerProps>(
     ),
 );
 
-export { Divider };
+Divider.propTypes = {
+    orientation: oneOf(['vertical', 'horizontal']),
+    variant: oneOf(['full-width', 'inset', 'middle-inset']),
+};
diff --git a/src/primitive-components/fab/fab.tsx b/src/primitive-components/fab/fab.tsx
index 539dd52..0800b1f 100644
--- a/src/primitive-components/fab/fab.tsx
+++ b/src/primitive-components/fab/fab.tsx
@@ -3,6 +3,7 @@
 import { forwardRef } from 'react';
 import { Icon } from '../components';
 import { FABProps } from './fab.types';
+import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
 
 /**
@@ -20,12 +21,13 @@ const sizes = {
 export const FAB = forwardRef<HTMLButtonElement, FABProps>(
     (
         {
-            variant,
-            disabled,
-            icon,
-            centralRipple = false,
+            icon = 'edit',
+            className = '',
             size = 'default',
-            elevated,
+            elevated = false,
+            disabled = false,
+            variant = 'surface',
+            centralRipple = false,
             ...props
         },
         ref,
@@ -33,10 +35,9 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
         <ButtonLayout
             {...props}
             centralRipple={centralRipple}
-            className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
+            className={`m3-fab m3-${size}-fab${!elevated ? ' without-elevation' : ''} ${variant} ${className}`}
             disabled={disabled}
             ref={ref}
-            variant={variant ? variant : 'surface'}
         >
             <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                 {icon}
@@ -49,3 +50,11 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
         </ButtonLayout>
     ),
 );
+
+FAB.propTypes = {
+    icon: string,
+    elevated: bool,
+    children: string,
+    size: oneOf(['small', 'default', 'large', 'extended']),
+    variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
+};
diff --git a/src/primitive-components/fab/fab.types.ts b/src/primitive-components/fab/fab.types.ts
index 9a90ec1..8aa3137 100644
--- a/src/primitive-components/fab/fab.types.ts
+++ b/src/primitive-components/fab/fab.types.ts
@@ -3,6 +3,7 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
 
 export interface FABMainProps {
     icon: string;
+    children?: string;
     disabled?: boolean;
     elevated?: boolean;
     size?: 'small' | 'default' | 'large' | 'extended';
diff --git a/src/primitive-components/icon-button/icon-button.tsx b/src/primitive-components/icon-button/icon-button.tsx
index e70a67b..86bd21b 100644
--- a/src/primitive-components/icon-button/icon-button.tsx
+++ b/src/primitive-components/icon-button/icon-button.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { Icon } from '../components';
+import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
-import { IconButtonProps, StateToggleIconType } from './icon-button.types';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { IconButtonProps, StateToggleIconType } from './icon-button.types';
 
 /**
  * Icon button-layout component
@@ -14,11 +15,12 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     (
         {
             icon,
-            variant,
-            disabled,
-            selected = false,
+            className = '',
             toggled = false,
-            centralRipple,
+            disabled = false,
+            selected = false,
+            variant = 'default',
+            centralRipple = false,
             ...props
         },
         ref,
@@ -28,6 +30,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
         });
 
+        const classes = `m3-icon-button ${toggleIcon.state} ${variant} ${toggled ? 'toggled' : ''} ${className}`;
+
         const toggle = (classes: string, icon: string) => {
             setToggleIcon({
                 state: classes,
@@ -56,11 +60,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             <ButtonLayout
                 {...props}
                 centralRipple={centralRipple}
-                className={`m3-icon-button ${toggleIcon.state} ${toggled ? 'toggled' : ''}`.trimEnd()}
+                className={classes}
                 disabled={disabled}
                 onClick={callback}
                 ref={buttonRef}
-                variant={variant ? variant : 'default'}
             >
                 <Icon
                     fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
@@ -73,3 +76,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         );
     },
 );
+
+IconButton.propTypes = {
+    icon: string,
+    selected: bool,
+    centralRipple: bool,
+    variant: oneOf(['default', 'filled', 'tonal', 'outlined']),
+};
diff --git a/src/primitive-components/icon/icon.tsx b/src/primitive-components/icon/icon.tsx
index fb3063c..fcb950d 100644
--- a/src/primitive-components/icon/icon.tsx
+++ b/src/primitive-components/icon/icon.tsx
@@ -2,7 +2,7 @@ import { IconProps } from './icon.types';
 import React, { forwardRef } from 'react';
 import { number, oneOf, string } from 'prop-types';
 
-const Icon = forwardRef<SVGSVGElement, IconProps>(
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
     (
         {
             children = '',
@@ -52,5 +52,3 @@ Icon.propTypes = {
     type: oneOf(['outlined', 'rounded', 'sharp']),
     weight: oneOf([100, 200, 300, 400, 500, 600, 700]),
 };
-
-export { Icon };
diff --git a/src/primitive-components/radio/radio.tsx b/src/primitive-components/radio/radio.tsx
index 4bff9b2..43fc4d7 100644
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/radio/radio.tsx
@@ -1,11 +1,11 @@
 'use client';
 
+import { bool, string } from 'prop-types';
 import { RadioProps } from './radio.types';
 import { RippleArea } from '../ripple/ripple-area';
 import { forwardRef, useRef, useState } from 'react';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
-import { bool, string } from 'prop-types';
 
 /**
  * Radio component
diff --git a/src/primitive-components/ripple/ripple.tsx b/src/primitive-components/ripple/ripple.tsx
index 1262dbf..e88dec3 100644
--- a/src/primitive-components/ripple/ripple.tsx
+++ b/src/primitive-components/ripple/ripple.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import isEmpty from './utils/utils';
-import { RippleProps, RipplesProps } from './ripple.types';
 import { rippleAreaContext } from './ripple-area';
+import { RippleProps, RipplesProps } from './ripple.types';
 import RippleEffectBuild from './utils/ripple-effect-builder';
 import React, {
     ReactElement,
@@ -18,7 +18,7 @@ const Ripples = (props: RipplesProps) => {
     const firstRender = useRef<boolean>(true);
     const [pending, startTransition] = useTransition();
 
-    const LifetimeEnd = (child: ReactElement) => {
+    const endLifetime = (child: ReactElement) => {
         if (child.props.endLifetime) {
             child.props.endLifetime();
         }
@@ -34,11 +34,11 @@ const Ripples = (props: RipplesProps) => {
         if (props.children.length > 0 && !pending) {
             startTransition(() => {
                 if (firstRender.current || isEmpty(ripples)) {
-                    setRipples(RippleEffectBuild(props.children, LifetimeEnd));
+                    setRipples(RippleEffectBuild(props.children, endLifetime));
                     firstRender.current = false;
                 } else {
                     setRipples(
-                        RippleEffectBuild(props.children, LifetimeEnd, ripples),
+                        RippleEffectBuild(props.children, endLifetime, ripples),
                     );
                 }
             });
diff --git a/src/primitive-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/segmented-buttons/segmented-buttons.tsx
index 1f113a3..976a5bb 100644
--- a/src/primitive-components/segmented-buttons/segmented-buttons.tsx
+++ b/src/primitive-components/segmented-buttons/segmented-buttons.tsx
@@ -6,8 +6,7 @@ export const SegmentedButtons = forwardRef<
     SegmentedButtonProps
 >(({ children, ...props }, ref) => {
     if (children.length <= 1) {
-        console.error('You must build segmented button with 2 or more buttton');
-        return <></>;
+        throw 'You must build segmented button with 2 or more buttton';
     }
 
     return (
@@ -18,4 +17,4 @@ export const SegmentedButtons = forwardRef<
             {children}
         </div>
     );
-});
+});
\ No newline at end of file
diff --git a/src/primitive-components/switch/switch.tsx b/src/primitive-components/switch/switch.tsx
index f0e4033..fa5cedf 100644
--- a/src/primitive-components/switch/switch.tsx
+++ b/src/primitive-components/switch/switch.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { bool } from 'prop-types';
 import React, { forwardRef } from 'react';
 import { SwitchMainProps } from './switch.types';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
@@ -34,3 +35,8 @@ export const Switch = forwardRef<
         </svg>
     </div>
 ));
+
+Switch.propTypes = {
+    icon: bool,
+    selected: bool,
+};
diff --git a/src/primitive-components/text-field/text-field.tsx b/src/primitive-components/text-field/text-field.tsx
index 318517d..7643195 100644
--- a/src/primitive-components/text-field/text-field.tsx
+++ b/src/primitive-components/text-field/text-field.tsx
@@ -92,8 +92,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
 
 TextField.propTypes = {
     children: string,
-    className: string,
-    placeholder: string,
     withAfterIcon: bool,
     withBeforeIcon: bool,
     supportingText: string,
diff --git a/src/styles/divider.sass b/src/styles/divider.sass
index bd25a65..7d77d20 100644
--- a/src/styles/divider.sass
+++ b/src/styles/divider.sass
@@ -1,26 +1,26 @@
 hr.m3.m3-divider
-    display: flex
-    align-items: end
-    box-sizing: border-box
     border: none
     outline: 0.5px solid var(--md-sys-color-outline-variant)
-    margin: 4px
+    margin-inline: 4px
+    position: relative
 
     &.vertical
-        writing-mode: tb-rl
-        &, &.full-width
-            height: 100%
+        height: 100%
+
         &.inset
-            align-self: end
-            height: calc(100% - 16px)
+            margin-top: 16px
+
         &.middle-inset
-            height: calc(100% - (2 * 16px))
+            margin-bottom: 16px
+            margin-top: 16px
+
 
     &.horizontal
-        &, &.full-width
-            width: 100%
+        width: 100%
+
         &.inset
-            align-self: end
-            width: calc(100% - 16px)
+            margin-left: 16px
+
         &.middle-inset
-            width: calc(100% - (2 * 16px))
\ No newline at end of file
+            margin-left: 16px
+            margin-right: 16px
\ No newline at end of file
diff --git a/src/styles/generics.css b/src/styles/generics.css
index ff712c8..ac3a031 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -694,35 +694,30 @@ div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
 }
 
 hr.m3.m3-divider {
-  display: flex;
-  align-items: end;
-  box-sizing: border-box;
   border: none;
   outline: 0.5px solid var(--md-sys-color-outline-variant);
-  margin: 4px;
+  margin-inline: 4px;
+  position: relative;
 }
 hr.m3.m3-divider.vertical {
-  writing-mode: tb-rl;
-}
-hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
   height: 100%;
 }
 hr.m3.m3-divider.vertical.inset {
-  align-self: end;
-  height: calc(100% - 16px);
+  margin-top: 16px;
 }
 hr.m3.m3-divider.vertical.middle-inset {
-  height: calc(100% - 32px);
+  margin-bottom: 16px;
+  margin-top: 16px;
 }
-hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
+hr.m3.m3-divider.horizontal {
   width: 100%;
 }
 hr.m3.m3-divider.horizontal.inset {
-  align-self: end;
-  width: calc(100% - 16px);
+  margin-left: 16px;
 }
 hr.m3.m3-divider.horizontal.middle-inset {
-  width: calc(100% - 32px);
+  margin-left: 16px;
+  margin-right: 16px;
 }
 
 label.m3.m3-checkbox-label {
@@ -1197,13 +1192,10 @@ html {
 
 .m3.m3-wrapper {
   width: 100%;
+  position: relative;
+  display: block;
   background-color: var(--md-sys-color-surface);
   border-radius: 25px;
-  padding: 25px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  height: min-content;
 }
 
 /*# sourceMappingURL=generics.css.map */
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index 2a2e528..9b4b4d4 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAYQ;AACA;AACA;AACA;AACA;ACdR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE5ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACfZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC5FhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACbR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ELNI;EKQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ELMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EL3CA;;AK8CA;ELxCA;;AK2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EL1DA;;AK6DA;ELvDA;;AK0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ETDI;EACA;EACA;EACA;EACA;ESDA;EACA;;AACA;ETEA;EACA;EACA;EACA;EACA;;;ASHJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACtGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AbrHZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAYQ;AACA;AACA;AACA;AACA;ACdR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE5ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACfZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC5FhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACbR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ELNI;EKQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ELMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EL3CA;;AK8CA;ELxCA;;AK2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EL1DA;;AK6DA;ELvDA;;AK0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;;;ACvBZ;ETDI;EACA;EACA;EACA;EACA;ESDA;EACA;;AACA;ETEA;EACA;EACA;EACA;EACA;;;ASHJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACtGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AbrHZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/generics.sass b/src/styles/generics.sass
index bc70254..7390d73 100644
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -26,11 +26,8 @@ html
 
 .m3.m3-wrapper
     width: 100%
+    position: relative
+    display: block
     background-color: var(--md-sys-color-surface)
     border-radius: 25px
-    padding: 25px
-    display: flex
-    align-items: center
-    flex-direction: column
-    height: min-content