diff --git a/.husky/pre-commit b/.husky/pre-commit
index d3628985..b5ad7288 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,6 +1,7 @@
-#!/bin/sh
+#!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
 echo "Linting your changes..."
 npx pretty-quick --staged
-npm run lint
+#! npm run lint
+
diff --git a/package.json b/package.json
index 8cd4224d..cc8c069f 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "clean": "rimraf dist",
     "chromatic": "chromatic --exit-zero-on-changes",
     "patch": "npm version patch",
+    "prepare": "husky install",
     "sb": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
diff --git a/src/components/ui/Accordion/Accordion.stories.js b/src/components/ui/Accordion/Accordion.stories.js
deleted file mode 100644
index e0ce1568..00000000
--- a/src/components/ui/Accordion/Accordion.stories.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Accordion from './Accordion';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Data-Display/Accordion',
-    component: Accordion,
-    render: (args) => <SandboxEditor>
-        <div >
-            <div className='flex space-x-2'>
-                <Accordion {...args} />
-
-            </div>
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-        items: [
-            {title: 'Section 1', content: 'Content for Section 1'},
-            {title: 'Section 2', content: 'Content for Section 2'},
-            // Add more items as needed
-        ],
-    },
-};
diff --git a/src/components/ui/Accordion/Accordion.tsx b/src/components/ui/Accordion/Accordion.tsx
index 4341f5da..b55985d4 100644
--- a/src/components/ui/Accordion/Accordion.tsx
+++ b/src/components/ui/Accordion/Accordion.tsx
@@ -1,38 +1,42 @@
-import React, {useState} from 'react';
-import AccordionRoot from './shards/AccordionRoot';
-import AccordionItem from './shards/AccordionItem';
-import AccordionHeader from './shards/AccordionHeader';
-import AccordionTrigger from './shards/AccordionTrigger';
-import AccordionContent from './shards/AccordionContent';
+import React, { useState } from 'react'
+import AccordionRoot from './shards/AccordionRoot'
+import AccordionItem from './shards/AccordionItem'
+import AccordionHeader from './shards/AccordionHeader'
+import AccordionTrigger from './shards/AccordionTrigger'
+import AccordionContent from './shards/AccordionContent'
 
 export type AccordionProps = {
-    items: {content: any}[];
+  items: { content: any }[]
 }
 
-const Accordion = ({items} : AccordionProps) => {
-    const [activeIndex, setActiveIndex] = useState<number>(-1);
-    const handleClick = (index: number) => {
-        setActiveIndex(activeIndex === index ? -1 : index);
-    };
+const Accordion = ({ items }: AccordionProps) => {
+  const [activeIndex, setActiveIndex] = useState<number>(-1)
+  const handleClick = (index: number) => {
+    setActiveIndex(activeIndex === index ? -1 : index)
+  }
 
-    return (
-        <AccordionRoot>
-            {items.map((item, index) => (
-                <AccordionItem value={index}>
-                    <AccordionHeader>
-                        <AccordionTrigger handleClick={handleClick} index={index} activeIndex={activeIndex} >
-                            Item {index+1}
-                        </AccordionTrigger>
-                    </AccordionHeader>
-                    <AccordionContent index={index} activeIndex={activeIndex}>
-                        {item.content}
-                    </AccordionContent>
-                </AccordionItem>
-            ))}
-        </AccordionRoot>
-    );
-};
+  return (
+    <AccordionRoot>
+      {items.map((item, index) => (
+        <AccordionItem value={index}>
+          <AccordionHeader>
+            <AccordionTrigger
+              handleClick={handleClick}
+              index={index}
+              activeIndex={activeIndex}
+            >
+              Item {index + 1}
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionContent index={index} activeIndex={activeIndex}>
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </AccordionRoot>
+  )
+}
 
-Accordion.Root = AccordionRoot;
+Accordion.Root = AccordionRoot
 
-export default Accordion;
+export default Accordion
diff --git a/src/components/ui/Accordion/shards/AccordionContent.tsx b/src/components/ui/Accordion/shards/AccordionContent.tsx
index 4afb8890..7689918d 100644
--- a/src/components/ui/Accordion/shards/AccordionContent.tsx
+++ b/src/components/ui/Accordion/shards/AccordionContent.tsx
@@ -1,28 +1,32 @@
-import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
 type AccordionContentProps = {
-  children: React.ReactNode;
-  index: number,
-  activeIndex: number,
-  customRootClass? :string
-};
+  children: React.ReactNode
+  index: number
+  activeIndex: number
+  customRootClass?: string
+}
 
-const AccordionContent: React.FC<AccordionContentProps> = ({children, index, activeIndex, customRootClass}: AccordionContentProps) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
-    return (
-        <span className={`${rootClass}-content`}>
-            <div
-                id={`content-${index}`}
-                role="region"
-                aria-labelledby={`section-${index}`}
-                hidden={activeIndex !== index}
-            >
-                {children}
-            </div>
-        </span>
-    );
-};
+const AccordionContent: React.FC<AccordionContentProps> = ({
+  children,
+  index,
+  activeIndex,
+  customRootClass
+}: AccordionContentProps) => {
+  const rootClass = customClassSwitcher(customRootClass, 'Accordion')
+  return (
+    <span className={`${rootClass}-content`}>
+      <div
+        id={`content-${index}`}
+        role="region"
+        aria-labelledby={`section-${index}`}
+        hidden={activeIndex !== index}
+      >
+        {children}
+      </div>
+    </span>
+  )
+}
 
-export default AccordionContent;
+export default AccordionContent
diff --git a/src/components/ui/Accordion/shards/AccordionHeader.tsx b/src/components/ui/Accordion/shards/AccordionHeader.tsx
index a33f8d91..04241ce7 100644
--- a/src/components/ui/Accordion/shards/AccordionHeader.tsx
+++ b/src/components/ui/Accordion/shards/AccordionHeader.tsx
@@ -1,19 +1,17 @@
-import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
 export type AccordionHeaderProps = {
-    children: React.ReactNode;
-    customHeaderClass?: string;
+  children: React.ReactNode
+  customHeaderClass?: string
 }
 
-const AccordionHeader: React.FC<AccordionHeaderProps> = ({children, customHeaderClass=''}) => {
-    const rootClass = customClassSwitcher(customHeaderClass, 'Accordion');
-    return (
-        <div className={`${rootClass}-header`}>
-            {children}
-        </div>
-    );
-};
+const AccordionHeader: React.FC<AccordionHeaderProps> = ({
+  children,
+  customHeaderClass = ''
+}) => {
+  const rootClass = customClassSwitcher(customHeaderClass, 'Accordion')
+  return <div className={`${rootClass}-header`}>{children}</div>
+}
 
-export default AccordionHeader;
+export default AccordionHeader
diff --git a/src/components/ui/Accordion/shards/AccordionItem.tsx b/src/components/ui/Accordion/shards/AccordionItem.tsx
index 507627b0..1baf1d0e 100644
--- a/src/components/ui/Accordion/shards/AccordionItem.tsx
+++ b/src/components/ui/Accordion/shards/AccordionItem.tsx
@@ -1,20 +1,18 @@
-import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
 export type AccordionItemProps = {
-    children: React.ReactNode;
-    customItemClass?: string;
-    value?: number;
+  children: React.ReactNode
+  customItemClass?: string
+  value?: number
 }
 
-const AccordionItem: React.FC<AccordionItemProps> = ({children, value, customItemClass=''}) => {
-    const rootClass = customClassSwitcher(customItemClass, 'Accordion');
-    return (
-        <div className={`${rootClass}-item`}>
-            {children}
-        </div>
-    );
-};
+const AccordionItem: React.FC<AccordionItemProps> = ({
+  children,
+  customItemClass = ''
+}) => {
+  const rootClass = customClassSwitcher(customItemClass, 'Accordion')
+  return <div className={`${rootClass}-item`}>{children}</div>
+}
 
-export default AccordionItem;
+export default AccordionItem
diff --git a/src/components/ui/Accordion/shards/AccordionRoot.tsx b/src/components/ui/Accordion/shards/AccordionRoot.tsx
index a03f2add..0890f7ae 100644
--- a/src/components/ui/Accordion/shards/AccordionRoot.tsx
+++ b/src/components/ui/Accordion/shards/AccordionRoot.tsx
@@ -1,19 +1,14 @@
-import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
 export type AccordionRootProps = {
-    children: React.ReactNode;
-    customRootClass?: string;
+  children: React.ReactNode
+  customRootClass?: string
 }
 
-const AccordionRoot= ({children, customRootClass}: AccordionRootProps) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
-    return (
-        <span className={`${rootClass}-root`}>
-            {children}
-        </span>
-    );
-};
+const AccordionRoot = ({ children, customRootClass }: AccordionRootProps) => {
+  const rootClass = customClassSwitcher(customRootClass, 'Accordion')
+  return <span className={`${rootClass}-root`}>{children}</span>
+}
 
-export default AccordionRoot;
+export default AccordionRoot
diff --git a/src/components/ui/Accordion/shards/AccordionTrigger.tsx b/src/components/ui/Accordion/shards/AccordionTrigger.tsx
index a507a84c..140ded52 100644
--- a/src/components/ui/Accordion/shards/AccordionTrigger.tsx
+++ b/src/components/ui/Accordion/shards/AccordionTrigger.tsx
@@ -1,30 +1,33 @@
-import React from 'react';
-// @ts-ignore
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
 type AccordionTriggerProps = {
-  children: React.ReactNode;
-  customRootClass?: string,
-  index: number,
-  activeIndex: number,
+  children: React.ReactNode
+  customRootClass?: string
+  index: number
+  activeIndex: number
   handleClick: (index: number) => void
-};
+}
 
-const AccordionTrigger: React.FC<AccordionTriggerProps> = ({children, handleClick, index, activeIndex, customRootClass}) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Accordion');
-    return (
-        <span className={`${rootClass}-trigger`}>
+const AccordionTrigger: React.FC<AccordionTriggerProps> = ({
+  children,
+  handleClick,
+  index,
+  activeIndex,
+  customRootClass
+}) => {
+  const rootClass = customClassSwitcher(customRootClass, 'Accordion')
+  return (
+    <span className={`${rootClass}-trigger`}>
+      <button
+        onClick={() => handleClick(index)}
+        aria-expanded={activeIndex === index}
+        aria-controls={`content-${index}`}
+      >
+        {children}
+      </button>
+    </span>
+  )
+}
 
-            <button
-                onClick={() => handleClick(index)}
-                aria-expanded={activeIndex === index}
-                aria-controls={`content-${index}`}
-            >
-                {children}
-            </button>
-
-        </span>
-    );
-};
-
-export default AccordionTrigger;
+export default AccordionTrigger
diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx
index 60d47d8a..f91ac2e4 100644
--- a/src/components/ui/Avatar/Avatar.tsx
+++ b/src/components/ui/Avatar/Avatar.tsx
@@ -1,39 +1,47 @@
-const COMPONENT_NAME = 'Avatar';
+import React from 'react'
 
-import React from 'react';
+import AvatarRoot from './shards/AvatarRoot'
+import AvatarImage from './shards/AvatarImage'
+import AvatarFallback from './shards/AvatarFallback'
 
-import AvatarRoot from './shards/AvatarRoot';
-import AvatarImage from './shards/AvatarImage';
-import AvatarFallback from './shards/AvatarFallback';
+const COMPONENT_NAME = 'Avatar'
 
 export type AvatarProps = {
-    children?: React.ReactNode,
-    customRootClass?: string,
-    fallback?: string,
-    className?: string,
-    src?: string,
-    alt?: string,
-    props?: Record<string, any>[]
+  children?: React.ReactNode
+  customRootClass?: string
+  fallback?: string
+  className?: string
+  src?: string
+  alt?: string
+  props?: Record<string, any>[]
 }
 
-const Avatar = ({children, customRootClass, fallback, className, src, alt, ...props}: AvatarProps) => {
-    return (
-        <AvatarRoot customRootClass={customRootClass}>
-            <AvatarImage
-                src={src}
-                alt={alt}
-                className={className}
-                customRootClass={customRootClass}
-                {...props}
-            />
-            <AvatarFallback customRootClass={customRootClass} fallback={fallback}/>
-        </AvatarRoot>
-    );
-};
+const Avatar = ({
+  children,
+  customRootClass,
+  fallback,
+  className,
+  src,
+  alt,
+  ...props
+}: AvatarProps) => {
+  return (
+    <AvatarRoot customRootClass={customRootClass}>
+      <AvatarImage
+        src={src}
+        alt={alt}
+        className={className}
+        customRootClass={customRootClass}
+        {...props}
+      />
+      <AvatarFallback customRootClass={customRootClass} fallback={fallback} />
+    </AvatarRoot>
+  )
+}
 
-Avatar.displayName = COMPONENT_NAME;
-Avatar.Root = AvatarRoot;
-Avatar.Image = AvatarImage;
-Avatar.Fallback = AvatarFallback;
+Avatar.displayName = COMPONENT_NAME
+Avatar.Root = AvatarRoot
+Avatar.Image = AvatarImage
+Avatar.Fallback = AvatarFallback
 
-export default Avatar;
+export default Avatar
diff --git a/src/components/ui/Avatar/shards/AvatarFallback.tsx b/src/components/ui/Avatar/shards/AvatarFallback.tsx
index a1cdb1bd..e83ebd03 100644
--- a/src/components/ui/Avatar/shards/AvatarFallback.tsx
+++ b/src/components/ui/Avatar/shards/AvatarFallback.tsx
@@ -1,18 +1,22 @@
-import React from 'react';
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
 type AvatarFallbackProps = {
-    fallback?: string,
-    customRootClass?: string,
-};
+  fallback?: string
+  customRootClass?: string
+}
 
-const AvatarFallback = ({fallback, customRootClass, ...props}: AvatarFallbackProps) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Avatar');
-    return (
-        <span className={`${rootClass}-fallback`} {...props} >
-            {fallback}
-        </span>
-    );
-};
+const AvatarFallback = ({
+  fallback,
+  customRootClass,
+  ...props
+}: AvatarFallbackProps) => {
+  const rootClass = customClassSwitcher(customRootClass, 'Avatar')
+  return (
+    <span className={`${rootClass}-fallback`} {...props}>
+      {fallback}
+    </span>
+  )
+}
 
-export default AvatarFallback;
+export default AvatarFallback
diff --git a/src/components/ui/Avatar/shards/AvatarImage.tsx b/src/components/ui/Avatar/shards/AvatarImage.tsx
index 1a4ace8b..ef0dd9cd 100644
--- a/src/components/ui/Avatar/shards/AvatarImage.tsx
+++ b/src/components/ui/Avatar/shards/AvatarImage.tsx
@@ -1,40 +1,52 @@
-import React, {useEffect, useState} from 'react';
-import {customClassSwitcher} from '~/core';
+import React, { useEffect, useState } from 'react'
+import { customClassSwitcher } from '~/core'
 
 type AvatarImageProps = {
-    src?: string;
-    alt?: string;
-    className?: string;
-    customRootClass?: string;
-    props?: Record<string, any>[]
-};
-
-const AvatarImage = ({src, alt, customRootClass, className, ...props}: AvatarImageProps) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Avatar');
-
-    const [isBrokenImage, setIsBrokenImage] = useState(false);
-
-    const handleImageLoaded = () => {
-        setIsBrokenImage(false);
-    };
-
-    const handleImageError = () => {
-        setIsBrokenImage(true);
-    };
-
-    useEffect(() => {
-    }, [isBrokenImage]);
-
-    if (isBrokenImage || !src || src.length===0) {
-        console.log('not rendering');
-        return <></>;
-    }
-
-    console.log(Boolean(src), src);
-
-    return (
-        <img src={src} alt={alt} onError={handleImageError} onLoad={handleImageLoaded} className={`${rootClass} ${className}`} {...props} />
-    );
-};
-
-export default AvatarImage;
+  src?: string
+  alt?: string
+  className?: string
+  customRootClass?: string
+  props?: Record<string, any>[]
+}
+
+const AvatarImage = ({
+  src,
+  alt,
+  customRootClass,
+  className,
+  ...props
+}: AvatarImageProps) => {
+  const rootClass = customClassSwitcher(customRootClass, 'Avatar')
+
+  const [isBrokenImage, setIsBrokenImage] = useState(false)
+
+  const handleImageLoaded = () => {
+    setIsBrokenImage(false)
+  }
+
+  const handleImageError = () => {
+    setIsBrokenImage(true)
+  }
+
+  useEffect(() => {}, [isBrokenImage])
+
+  if (isBrokenImage || !src || src.length === 0) {
+    console.log('not rendering')
+    return null
+  }
+
+  console.log(Boolean(src), src)
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      onError={handleImageError}
+      onLoad={handleImageLoaded}
+      className={`${rootClass} ${className}`}
+      {...props}
+    />
+  )
+}
+
+export default AvatarImage
diff --git a/src/components/ui/Avatar/shards/AvatarRoot.tsx b/src/components/ui/Avatar/shards/AvatarRoot.tsx
index 08e75f8f..1a7e62b3 100644
--- a/src/components/ui/Avatar/shards/AvatarRoot.tsx
+++ b/src/components/ui/Avatar/shards/AvatarRoot.tsx
@@ -1,18 +1,14 @@
-import React from 'react';
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
 type AvatarRootProps = {
-  children: React.ReactNode;
+  children: React.ReactNode
   customRootClass?: string
-};
+}
 
-const Root = ({children, customRootClass}: AvatarRootProps) => {
-    const rootClass = customClassSwitcher(customRootClass, 'Avatar');
-    return (
-        <span className={`${rootClass}-root`}>
-            {children}
-        </span>
-    );
-};
+const Root = ({ children, customRootClass }: AvatarRootProps) => {
+  const rootClass = customClassSwitcher(customRootClass, 'Avatar')
+  return <span className={`${rootClass}-root`}>{children}</span>
+}
 
-export default Root;
+export default Root
diff --git a/src/components/ui/Avatar/stories/Avatar.dist.stories.js b/src/components/ui/Avatar/stories/Avatar.dist.stories.js
deleted file mode 100644
index 0a643e66..00000000
--- a/src/components/ui/Avatar/stories/Avatar.dist.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Avatar from '@radui/ui/Avatar';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Data-Display/Avatar',
-    component: Avatar,
-    render: (args) => <SandboxEditor>
-        <div className='flex space-x-2'>
-            <Avatar fallback="A" />
-            <Avatar fallback="PK" />
-            <Avatar src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" />
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const AvatarProd = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Avatar/stories/Avatar.stories.js b/src/components/ui/Avatar/stories/Avatar.stories.js
deleted file mode 100644
index 0d2c0031..00000000
--- a/src/components/ui/Avatar/stories/Avatar.stories.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Avatar from '../Avatar';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Data-Display/Avatar',
-    component: Avatar,
-    render: (args) => <SandboxEditor>
-        <Avatar {...args} />
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const withSrc = {
-    args: {
-        src: 'https://i.pravatar.cc/64',
-        fallback: 'PK',
-    },
-};
-
-export const withFallback = {
-    args: {
-        fallback: 'RU',
-    },
-};
-
-export const withBrokenSrc = {
-    args: {
-        src: 'https://i.pravatar.cc/abc/image-that-does-not-exist',
-        fallback: 'PK',
-    },
-};
-
-export const withAlt = {
-    args: {
-        src: 'https://i.pravatar.cc/64',
-        alt: 'alternative text',
-        fallback: 'RU',
-    },
-};
diff --git a/src/components/ui/Avatar/tests/avatar.test.js b/src/components/ui/Avatar/tests/avatar.test.js
deleted file mode 100644
index e08f86b0..00000000
--- a/src/components/ui/Avatar/tests/avatar.test.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// MyComponent.test.js
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-import Avatar from '../Avatar';
-
-describe('Avatar', () => {
-    test('renders Avatar component', () => {
-        render(<Avatar fallback="RU" />);
-        expect(screen.getByText('RU')).toBeInTheDocument();
-    });
-
-    test('renders img tag with valid src', () => {
-        const url = 'https://i.pravatar.cc/300';
-        render(<Avatar src={url} fallback="RU" />);
-        const image = screen.getByRole('img');
-        // check if image has url as src
-        expect(image).toHaveAttribute('src', url);
-    });
-
-    test('renders fallback when src is not provided', async() => {
-        render(<Avatar fallback="RU" />);
-        expect(screen.getByText('RU')).toBeInTheDocument();
-    });
-});
diff --git a/src/components/ui/Badge/Badge.stories.js b/src/components/ui/Badge/Badge.stories.js
deleted file mode 100644
index 527ae949..00000000
--- a/src/components/ui/Badge/Badge.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Badge from './Badge';
-import Separator from '../Separator/Separator';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-const ArrowIcon = ({className}) => {
-    return <svg className={className} width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
-};
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Data Display/Badge',
-    component: Badge,
-    render: (args) => <SandboxEditor>
-        <div className='flex space-x-2'>
-            <Badge className='text-xs' >Plum</Badge>
-            <Separator orientation="vertical" />
-            <Badge className='text-xs' color="plum" >Plum</Badge>
-            <Badge className='text-xs' color="red" >Red</Badge>
-            <Badge className='text-xs' color="gray" >Gray</Badge>
-            <Separator orientation="vertical" />
-            <Badge className='text-xs space-x-1' >
-
-                <div>
-                    With Icon
-                </div>
-                <ArrowIcon/>
-            </Badge>
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx
index d213c251..fa9e7030 100644
--- a/src/components/ui/Badge/Badge.tsx
+++ b/src/components/ui/Badge/Badge.tsx
@@ -1,26 +1,38 @@
-'use client';
-import React from 'react';
-import {customClassSwitcher} from '~/core';
+'use client'
 
-const COMPONENT_NAME = 'Badge';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
+
+const COMPONENT_NAME = 'Badge'
 
 export type BadgeProps = {
-    children?: React.ReactNode,
-    customRootClass?: string,
-    className?: string,
-    color?: string,
-    props?: Record<string, any>[],
+  children?: React.ReactNode
+  customRootClass?: string
+  className?: string
+  color?: string
+  props?: Record<string, any>[]
 }
 
+const Badge = ({
+  children,
+  customRootClass,
+  className,
+  color,
+  ...props
+}: BadgeProps) => {
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)
 
-const Badge = ({children, customRootClass, className, color, ...props}: BadgeProps) => {
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-
-    return <span className={`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
-        {children}
-    </span>;
-};
+  return (
+    <span
+      className={`${rootClass} ${className}`}
+      data-accent-color={color ?? undefined}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
 
-Badge.displayName = COMPONENT_NAME;
+Badge.displayName = COMPONENT_NAME
 
-export default Badge;
+export default Badge
diff --git a/src/components/ui/BlockQuote/BlockQuote.tsx b/src/components/ui/BlockQuote/BlockQuote.tsx
index 3e3f6174..e968e5c2 100644
--- a/src/components/ui/BlockQuote/BlockQuote.tsx
+++ b/src/components/ui/BlockQuote/BlockQuote.tsx
@@ -1,22 +1,32 @@
-'use client';
-import React from 'react';
+'use client'
 
-import {customClassSwitcher} from '~/core';
+import React from 'react'
 
-const COMPONENT_NAME = 'BlockQuote';
+import { customClassSwitcher } from '~/core'
+
+const COMPONENT_NAME = 'BlockQuote'
 
 export type BlockQuoteProps = {
-    children: React.ReactNode;
-    customRootClass?: string;
-    className?: string;
-    props: Record<string, any>[]
+  children: React.ReactNode
+  customRootClass?: string
+  className?: string
+  props: Record<string, any>[]
 }
-const BlockQuote = ({children, customRootClass, className, ...props}: BlockQuoteProps) => {
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+const BlockQuote = ({
+  children,
+  customRootClass,
+  className,
+  ...props
+}: BlockQuoteProps) => {
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)
 
-    return <blockquote className={`${rootClass} ${className}`} {...props}>{children}</blockquote>;
-};
+  return (
+    <blockquote className={`${rootClass} ${className}`} {...props}>
+      {children}
+    </blockquote>
+  )
+}
 
-BlockQuote.displayName = COMPONENT_NAME;
+BlockQuote.displayName = COMPONENT_NAME
 
-export default BlockQuote;
+export default BlockQuote
diff --git a/src/components/ui/BlockQuote/BlockQuote_sb.stories.js b/src/components/ui/BlockQuote/BlockQuote_sb.stories.js
deleted file mode 100644
index d3618926..00000000
--- a/src/components/ui/BlockQuote/BlockQuote_sb.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import BlockQuote from './BlockQuote';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-const BLOCKQUOTE_TEXT = `Avian carriers can provide high delay, low throughput, and low altitude
- service. The connection topology is limited to a single point-to-point path
- for each carrier, used with standard carriers, but many carriers can be used
- without significant interference with each other, outside early spring. This
- is because of the 3D ether space available to the carriers, in contrast to
- the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
- avoidance system, which increases availability.`;
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Data-Display/BlockQuote',
-    component: BlockQuote,
-    render: (args) => <SandboxEditor>
-        <div >
-            <div className='flex space-x-2'>
-                <BlockQuote className='space-x-1'>
-                    <div className='text-gray-950'>{BLOCKQUOTE_TEXT} </div>
-                </BlockQuote>
-
-            </div>
-
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx
index e27c7293..c7e49ea9 100644
--- a/src/components/ui/Button/Button.tsx
+++ b/src/components/ui/Button/Button.tsx
@@ -1,37 +1,49 @@
-'use client';
-import React from 'react';
-import {customClassSwitcher} from '~/core';
+'use client'
 
-// make the color prop default accent color
-const COMPONENT_NAME = 'Button';
+import React, { SyntheticEvent } from 'react'
+import { customClassSwitcher } from '~/core'
 
+// make the color prop default accent color
+const COMPONENT_NAME = 'Button'
 
 export type ButtonProps = {
-    children?: React.ReactNode;
-    color?: string;
-    type?: 'button' | 'submit' | 'reset';
-    className?: string;
-    customRootClass?: string;
-    variant?: 'solid' | 'outline' | 'soft' | 'ghost';
-    props?: any
+  children?: React.ReactNode
+  color?: string
+  type?: 'button' | 'submit' | 'reset'
+  className?: string
+  customRootClass?: string
+  variant?: 'solid' | 'outline' | 'soft' | 'ghost'
+  props?: any
+  onClick: (e: SyntheticEvent) => void
 }
 
-const Button = ({children, type='button', customRootClass='', color = '', className='', variant='solid', ...props}: ButtonProps) => {
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    // apply data attribute for accent color
-    // apply attribute only if color is present
+const Button = ({
+  children,
+  type = 'button',
+  customRootClass = '',
+  color = '',
+  className = '',
+  variant = 'solid',
+  onClick,
+  ...props
+}: ButtonProps) => {
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)
+  // apply data attribute for accent color
+  // apply attribute only if color is present
 
-    return (
-        <button
-            type={type}
-            className={`${rootClass} button-${variant} ${className}`} data-accent-color={color ?? undefined}
-            {...props}
-        >
-            {children}
-        </button>
-    );
-};
+  return (
+    <button
+      type={type}
+      className={`${rootClass} button-${variant} ${className}`}
+      data-accent-color={color ?? undefined}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
 
-Button.displayName = COMPONENT_NAME;
+Button.displayName = COMPONENT_NAME
 
-export default Button;
+export default Button
diff --git a/src/components/ui/Button/Button_sb.stories.js b/src/components/ui/Button/Button_sb.stories.js
deleted file mode 100644
index a4686b04..00000000
--- a/src/components/ui/Button/Button_sb.stories.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import Button from './Button';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-const ArrowIcon = ({className}) => {
-    return <svg className={className} width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
-};
-
-const BUTTON_TEXT = 'Proceed';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Input/Button',
-    component: Button,
-    render: (args) => <SandboxEditor>
-        <div >
-            <div className='mt-4 mb-2'>
-                <p className='text-gray-950'>Button Variants</p>
-            </div>
-
-            <div className='flex space-x-2'>
-                <Button className='space-x-1'>
-                    <div>{BUTTON_TEXT} </div> <ArrowIcon className="text-white" />
-                </Button>
-                <Button className='space-x-1' variant="outline">
-                    <div>{BUTTON_TEXT} </div> <ArrowIcon className="text-accent-900" />
-                </Button>
-                <Button className='space-x-1' variant="soft">
-                    <div>{BUTTON_TEXT} </div> <ArrowIcon className="text-accent-900" />
-                </Button>
-                <Button className='space-x-1' variant="ghost">
-                    <div>{BUTTON_TEXT} </div> <ArrowIcon className="text-accent-900" />
-                </Button>
-                <Button className='space-x-1' variant="solid">
-                    <ArrowIcon className="text-accent-900" />
-                </Button>
-            </div>
-
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Callout/Callout.stories.js b/src/components/ui/Callout/Callout.stories.js
deleted file mode 100644
index 55eda45a..00000000
--- a/src/components/ui/Callout/Callout.stories.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import Callout from './Callout';
-import Text from '~/components/ui/Text/Text';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-const InfoIcon = () => {
-    return (<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>);
-};
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Callout',
-    component: Callout,
-    render: (args) => <>
-        <SandboxEditor className="space-y-2">
-            <Callout>
-                <InfoIcon/> <span>This is a Callout</span>
-            </Callout>
-
-            <Callout color="red">
-                This is a red Callout. A little bit longer text to see how it behaves.
-            </Callout>
-
-            <Callout color="gold">
-                This is a Callout
-            </Callout>
-        </SandboxEditor>
-    </>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
-
-
-const DefaultTextTemplate = (args) => {
-    return <SandboxEditor className="space-y-2">
-        <Callout>
-            <InfoIcon/> <span>This is a Callout</span>
-        </Callout>
-    </SandboxEditor>;
-};
-
-
-export const DefaultText = DefaultTextTemplate.bind();
-
-
-const RedTextTemplate = (args) => {
-    return <SandboxEditor className="space-y-2">
-        <Callout color="red">
-        This is a red Callout. A little bit longer text to see how it behaves.
-        </Callout>
-    </SandboxEditor>;
-};
-export const RedText = RedTextTemplate.bind();
-
-
diff --git a/src/components/ui/Callout/Callout.tsx b/src/components/ui/Callout/Callout.tsx
index a4299fc0..f681ae4e 100644
--- a/src/components/ui/Callout/Callout.tsx
+++ b/src/components/ui/Callout/Callout.tsx
@@ -1,27 +1,40 @@
-import React from 'react';
+import React from 'react'
 
 /**
  * Shards
-*/
-import CalloutRoot from './shards/CalloutRoot';
+ */
+import CalloutRoot from './shards/CalloutRoot'
 
 export type CalloutProps = {
-    children?: React.ReactNode;
-    className?: string ;
-    color?: string;
-    customRootClass?: string;
-    props?: object[]
+  children?: React.ReactNode
+  className?: string
+  color?: string
+  customRootClass?: string
+  props?: object[]
 }
 
-const COMPONENT_NAME = 'Callout';
-const Callout = ({children, className='', color, customRootClass, ...props}: CalloutProps) => {
-    return (<CalloutRoot customRootClass={customRootClass} className={`${className}`} color={color ?? undefined} {...props}>
-        {children}
-    </CalloutRoot>);
-};
+const COMPONENT_NAME = 'Callout'
+const Callout = ({
+  children,
+  className = '',
+  color,
+  customRootClass,
+  ...props
+}: CalloutProps) => {
+  return (
+    <CalloutRoot
+      customRootClass={customRootClass}
+      className={`${className}`}
+      color={color ?? undefined}
+      {...props}
+    >
+      {children}
+    </CalloutRoot>
+  )
+}
 
-Callout.displayName = COMPONENT_NAME;
+Callout.displayName = COMPONENT_NAME
 
 // Callout Exports
-Callout.Root = CalloutRoot;
-export default Callout;
+Callout.Root = CalloutRoot
+export default Callout
diff --git a/src/components/ui/Callout/shards/CalloutRoot.tsx b/src/components/ui/Callout/shards/CalloutRoot.tsx
index 3f8a1c9b..804670ec 100644
--- a/src/components/ui/Callout/shards/CalloutRoot.tsx
+++ b/src/components/ui/Callout/shards/CalloutRoot.tsx
@@ -1,25 +1,37 @@
-import React from 'react';
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
-const COMPONENT_NAME = 'Callout';
+const COMPONENT_NAME = 'Callout'
 
 type CalloutRootProps = {
-    children?: React.ReactNode;
-    className?: string | '' ;
-    color?: string;
-    customRootClass?: string;
-    props?: Record<any, any>[]
+  children?: React.ReactNode
+  className?: string | ''
+  color?: string
+  customRootClass?: string
+  props?: Record<any, any>[]
 }
 
-const CalloutRoot = ({children, className, color, customRootClass, ...props}: CalloutRootProps) => {
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+const CalloutRoot = ({
+  children,
+  className,
+  color,
+  customRootClass,
+  ...props
+}: CalloutRootProps) => {
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)
 
-    console.log(className);
-    return <div className={`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
-        {children}
-    </div>;
-};
+  console.log(className)
+  return (
+    <div
+      className={`${rootClass} ${className}`}
+      data-accent-color={color ?? undefined}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
 
-CalloutRoot.displayName = COMPONENT_NAME;
+CalloutRoot.displayName = COMPONENT_NAME
 
-export default CalloutRoot;
+export default CalloutRoot
diff --git a/src/components/ui/Card/Card.stories.js b/src/components/ui/Card/Card.stories.js
deleted file mode 100644
index 627ec8bd..00000000
--- a/src/components/ui/Card/Card.stories.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Card from '~/components/ui/Card/Card';
-import Avatar from '~/components/ui/Avatar/Avatar';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-const CardStory = () => {
-    return <Card className="bg-gray-200" >
-        <div className='flex items-center space-x-4'>
-            <Avatar
-                src='https://i.pravatar.cc/64'
-                alt='avatar'
-                size='lg'
-            />
-            <div>
-                <p className='font-bold text-gray-1000'>John Doe</p>
-                <p className='text-xs text-gray-800'>
-                    1 hour ago
-                </p>
-            </div>
-
-        </div>
-    </Card>;
-};
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Layout/Card',
-    component: Card,
-    render: (args) => <SandboxEditor><CardStory/></SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {};
-
-const Template = (args) => <div>
-    <SandboxEditor className="gap-3 grid grid-cols-4">
-        {Array(10).fill(0).map((_, i) => <CardStory key={i}/>)}
-    </SandboxEditor>
-</div>;
-export const MultipleCards = Template.bind({});
diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/Card.tsx
index a84e674b..ba4a6933 100644
--- a/src/components/ui/Card/Card.tsx
+++ b/src/components/ui/Card/Card.tsx
@@ -1,25 +1,33 @@
-import React from 'react';
+import React from 'react'
 
 /**
  * Shards
  */
-import CardRoot from './shards/CardRoot';
+import CardRoot from './shards/CardRoot'
 
 export type CardProps = {
-    children: React.ReactNode;
-    customRootClass?: string;
-    className?: string;
-    props?: any;
-};
+  children: React.ReactNode
+  customRootClass?: string
+  className?: string
+  props?: any
+}
 
-const Card = ({children, className = '', customRootClass, ...props}:CardProps) => {
-    return (
-        <CardRoot className={className} customRootClass={customRootClass} {...props}>
-            {children}
-        </CardRoot>
-    );
-};
+const Card = ({
+  children,
+  className = '',
+  customRootClass,
+  ...props
+}: CardProps) => {
+  return (
+    <CardRoot
+      className={className}
+      customRootClass={customRootClass}
+      {...props}
+    >
+      {children}
+    </CardRoot>
+  )
+}
 
-
-Card.Root = CardRoot;
-export default Card;
+Card.Root = CardRoot
+export default Card
diff --git a/src/components/ui/Card/shards/CardRoot.tsx b/src/components/ui/Card/shards/CardRoot.tsx
index f721e5be..7e803909 100644
--- a/src/components/ui/Card/shards/CardRoot.tsx
+++ b/src/components/ui/Card/shards/CardRoot.tsx
@@ -1,25 +1,29 @@
-import React from 'react';
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
 
-
-const COMPONENT_NAME = 'Card';
+const COMPONENT_NAME = 'Card'
 export type CardRootProps = {
-    children: React.ReactNode;
-    customRootClass?: string;
-    className?: string;
-    props?: any;
-};
+  children: React.ReactNode
+  customRootClass?: string
+  className?: string
+  props?: any
+}
 
-const CardRoot = ({children, customRootClass, className = '', ...props}: CardRootProps) => {
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+const CardRoot = ({
+  children,
+  customRootClass,
+  className = '',
+  ...props
+}: CardRootProps) => {
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)
 
-    return (
-        <div className={`${rootClass} ${className}`} {...props} >
-            {children}
-        </div>
-    );
-};
+  return (
+    <div className={`${rootClass} ${className}`} {...props}>
+      {children}
+    </div>
+  )
+}
 
-CardRoot.displayName = COMPONENT_NAME;
+CardRoot.displayName = COMPONENT_NAME
 
-export default CardRoot;
+export default CardRoot
diff --git a/src/components/ui/Card/tests/card.test.js b/src/components/ui/Card/tests/card.test.js
deleted file mode 100644
index 23d9120c..00000000
--- a/src/components/ui/Card/tests/card.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// MyComponent.test.js
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-import Card from '../Card';
-
-describe('Card Component', () => {
-    // tests
-
-    // test content
-    test('renders Card component with content', () => {
-        render(<Card data-testid="card" >I am Text</Card>);
-        expect(screen.getByTestId('card')).toHaveTextContent('I am Text');
-    });
-
-    test('renders Card component with className', () => {
-        render(<Card data-testid="card" className="bg-gray-200" />);
-        expect(screen.getByTestId('card')).toHaveClass('bg-gray-200');
-    });
-
-    // renders with custom style
-    test('renders Card component with custom style', () => {
-        render(<Card data-testid="card" style={{color: 'red'}} />);
-        expect(screen.getByTestId('card')).toHaveStyle('color: red');
-    });
-
-    // renders with custom id
-    test('renders Card component with custom id', () => {
-        render(<Card data-testid="card" id="card-id" />);
-        expect(screen.getByTestId('card')).toHaveAttribute('id', 'card-id');
-    });
-
-    // renders with custom data attribute
-    test('renders Card component with custom data attribute', () => {
-        render(<Card data-testid="card" data-custom="card-data" />);
-        expect(screen.getByTestId('card')).toHaveAttribute('data-custom', 'card-data');
-    });
-});
diff --git a/src/components/ui/Code/Code.stories.js b/src/components/ui/Code/Code.stories.js
deleted file mode 100644
index dc76e59f..00000000
--- a/src/components/ui/Code/Code.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Code from './Code';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-const Code_TEXT = 'console.log()';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Typography/Code',
-    component: Code,
-    render: (args) => <SandboxEditor>
-        <div >
-            <div className='flex space-x-2'>
-                <Code className='space-x-1'>
-         requestAnimationFrame()
-                </Code>
-
-                <Code className='space-x-1'>
-                    {Code_TEXT}
-                </Code>
-
-            </div>
-
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Code/Code.tsx b/src/components/ui/Code/Code.tsx
index 498e2a5b..04557b0e 100644
--- a/src/components/ui/Code/Code.tsx
+++ b/src/components/ui/Code/Code.tsx
@@ -1,14 +1,13 @@
-'use client';
-import React from 'react';
+'use client'
 
-export type CodeProps= {
-    children: React.ReactNode;
+import React from 'react'
+
+export type CodeProps = {
+  children: React.ReactNode
 }
 
-const Code = ({children}: CodeProps) => {
-    return <code className='rui-code-root'>
-        {children}
-    </code>;
-};
+const Code = ({ children }: CodeProps) => {
+  return <code className="rui-code-root">{children}</code>
+}
 
-export default Code;
+export default Code
diff --git a/src/components/ui/Dropdown/Dropdown.stories.js b/src/components/ui/Dropdown/Dropdown.stories.js
deleted file mode 100644
index 48b207ed..00000000
--- a/src/components/ui/Dropdown/Dropdown.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-
-import Heading from '~/components/ui/Heading/Heading';
-import Dropdown from '~/components/ui/Dropdown/Dropdown';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Input/Dropdown',
-    component: Dropdown,
-    render: (args) => <SandboxEditor>
-        <div className=' bg-gray-400 p-4 overflow-auto' style={{height: '200px'}}>
-            <div className='block' style={{height: '400px'}}>
-                <div style={{marginBottom: '200px'}}>
-                    <Heading className="text-gray-1000"> Dropdown</Heading>
-                </div>
-
-                <Dropdown
-                    onSelect={() => {}} label={'Bello'} list={[
-                        {value: `hello Hello this is a dropdown. Hello this is a dropdown. 
-                        Hello this is a dropdown. Hello`, label: 'hello'},
-                    ]}>
-                    <div>
-                        Hello this is a dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello this is a
-                        dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello
-                        this is a dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello this is a
-                        dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello
-                    </div>
-                </Dropdown>
-
-                <div style={{marginTop: '200px'}}>
-                    <Heading className="text-gray-1000"> Dropdown End</Heading>
-                </div>
-            </div>
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Dropdown/Dropdown.tsx b/src/components/ui/Dropdown/Dropdown.tsx
index e6c4584e..4264dd5d 100644
--- a/src/components/ui/Dropdown/Dropdown.tsx
+++ b/src/components/ui/Dropdown/Dropdown.tsx
@@ -1,25 +1,34 @@
-import React from 'react';
-import Popper from '~/components/tools/Popper/Popper';
+import React from 'react'
+import Popper from '~/components/tools/Popper/Popper'
 
 // TODO: fix any
-export type DropdownProps ={
-    list: {value: any}[];
-    selected: any;
+export type DropdownProps = {
+  list: { value: any }[]
+  selected: any
 }
 
-const Dropdown = ({list=[], selected}: DropdownProps) => {
-    const PopElem = () => {
-        return <ul className='bg-white px-2 py-2 shadow-lg rounded-md'>
-            {list.map((item, index) => {
-                return <li key={index}>{item.value}</li>;
-            })}
-        </ul>;
-    };
-    return <div className='relative'>
-        <Popper open={false} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
-            <span>Dropdown</span>
-        </Popper>
-    </div>;
-};
+const Dropdown = ({ list = [] }: DropdownProps) => {
+  const PopElem = () => {
+    return (
+      <ul className="bg-white px-2 py-2 shadow-lg rounded-md">
+        {list.map((item, index) => {
+          return <li key={index}>{item.value}</li>
+        })}
+      </ul>
+    )
+  }
+  return (
+    <div className="relative">
+      <Popper
+        open={false}
+        placement="bottom-start"
+        popperName="dropdown"
+        pop={<PopElem />}
+      >
+        <span>Dropdown</span>
+      </Popper>
+    </div>
+  )
+}
 
-export default Dropdown;
+export default Dropdown
diff --git a/src/components/ui/Em/Em.stories.js b/src/components/ui/Em/Em.stories.js
deleted file mode 100644
index 12f2be28..00000000
--- a/src/components/ui/Em/Em.stories.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Em from './Em';
-import Heading from '../Heading/Heading';
-
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Typography/Em',
-    component: Em,
-    render: (args) => <SandboxEditor>
-        <div >
-            <div className='flex space-x-2'>
-
-                <Heading className="text-gray-1000">
-                    Hello <Em className='text-gray-950'>World,</Em> How you doin?
-                </Heading>
-
-            </div>
-
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Em/Em.tsx b/src/components/ui/Em/Em.tsx
index b62c8ff6..51227817 100644
--- a/src/components/ui/Em/Em.tsx
+++ b/src/components/ui/Em/Em.tsx
@@ -1,23 +1,26 @@
-'use client';
-import React from 'react';
-import {customClassSwitcher} from '~/core';
+'use client'
 
-const COMPONENT_NAME = 'Em';
+import React from 'react'
+import { customClassSwitcher } from '~/core'
+
+const COMPONENT_NAME = 'Em'
 
 export type EmProps = {
-    children: React.ReactNode;
-    customRootClass?: string;
-    className?: string;
-    props: Record<string, any>[]
+  children: React.ReactNode
+  customRootClass?: string
+  className?: string
+  props: Record<string, any>[]
 }
 
-const Em = ({children, customRootClass, className, ...props}: EmProps) => {
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <em className={`${rootClass} ${className}`} {...props}>
-        {children}
-    </em>;
-};
+const Em = ({ children, customRootClass, className, ...props }: EmProps) => {
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)
+  return (
+    <em className={`${rootClass} ${className}`} {...props}>
+      {children}
+    </em>
+  )
+}
 
-Em.displayName = COMPONENT_NAME;
+Em.displayName = COMPONENT_NAME
 
-export default Em;
+export default Em
diff --git a/src/components/ui/Heading/Heading.stories.js b/src/components/ui/Heading/Heading.stories.js
deleted file mode 100644
index ca895650..00000000
--- a/src/components/ui/Heading/Heading.stories.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Heading from './Heading';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Typography/Heading',
-    component: Heading,
-    render: (args) => <SandboxEditor>
-        <div >
-            <div className=' space-y-2'>
-                <Heading className='text-gray-1000'>
-                The quick brown fox jumps over the lazy dog
-                </Heading>
-
-                <Heading as="h2" className='text-gray-1000'>
-                The quick brown fox jumps over the lazy dog
-                </Heading>
-
-                <Heading as="h3" className='text-gray-1000'>
-                The quick brown fox jumps over the lazy dog
-                </Heading>
-
-                <Heading as="h4" className='text-gray-1000'>
-                The quick brown fox jumps over the lazy dog
-                </Heading>
-
-                <Heading as="h5" className='text-gray-1000'>
-                The quick brown fox jumps over the lazy dog
-                </Heading>
-
-                <Heading as="h6" className='text-gray-1000'>
-                The quick brown fox jumps over the lazy dog
-                </Heading>
-
-            </div>
-
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Heading/Heading.tsx b/src/components/ui/Heading/Heading.tsx
index 09548c80..4ab5f4a6 100644
--- a/src/components/ui/Heading/Heading.tsx
+++ b/src/components/ui/Heading/Heading.tsx
@@ -1,44 +1,56 @@
-'use client';
-import React from 'react';
+'use client'
 
-import {customClassSwitcher} from '~/core';
+import React from 'react'
+
+import { customClassSwitcher } from '~/core'
 
 const RENDER_AS_ENUMS = [
-    {
-        label: 'H1',
-        tag: 'h1',
-    },
-    {
-        label: 'H2',
-        tag: 'h2',
-    },
-    {
-        label: 'H3',
-        tag: 'h3',
-    },
-    {
-        label: 'H4',
-        tag: 'h4',
-    },
-    {
-        label: 'H5',
-        tag: 'h5',
-    },
-    {
-        label: 'H6',
-        tag: 'h6',
-    },
-];
+  {
+    label: 'H1',
+    tag: 'h1'
+  },
+  {
+    label: 'H2',
+    tag: 'h2'
+  },
+  {
+    label: 'H3',
+    tag: 'h3'
+  },
+  {
+    label: 'H4',
+    tag: 'h4'
+  },
+  {
+    label: 'H5',
+    tag: 'h5'
+  },
+  {
+    label: 'H6',
+    tag: 'h6'
+  }
+]
 
-const Heading = ({children, as=undefined, customRootClass = '', className = ''}, ...props) => {
-    const rootClass = customClassSwitcher(customRootClass, as || 'h1');
+const Heading = (
+  { children, as = undefined, customRootClass = '', className = '' },
+  ...props
+) => {
+  const rootClass = customClassSwitcher(customRootClass, as || 'h1')
 
-    if (as !== undefined && RENDER_AS_ENUMS.find((item) => item.tag === as)) {
-        const {tag: Tag} = RENDER_AS_ENUMS.find((item) => item.tag === as);
-        return <Tag className={`${rootClass} ${className}`} {...props}>{children}</Tag>;
-    }
-    return <h1 className={`${rootClass} ${className}`} {...props}>{children}</h1>;
-};
-Heading.displayName = 'Heading';
+  if (as !== undefined && RENDER_AS_ENUMS.find((item) => item.tag === as)) {
+    const { tag: Tag } = RENDER_AS_ENUMS.find((item) => item.tag === as)
+    return (
+      <Tag className={`${rootClass} ${className}`} {...props}>
+        {children}
+      </Tag>
+    )
+  }
+  return (
+    <h1 className={`${rootClass} ${className}`} {...props}>
+      {children}
+    </h1>
+  )
+}
+Heading.displayName = 'Heading'
 
-export default Heading;
+export default Heading
diff --git a/src/components/ui/Link/Link.stories.js b/src/components/ui/Link/Link.stories.js
deleted file mode 100644
index d25f7a16..00000000
--- a/src/components/ui/Link/Link.stories.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Link from './Link';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'UI/Typography/Link',
-    component: Link,
-    render: (args) => <SandboxEditor>
-        <div className='text-gray-950'>
-            <Link href="https://www.google.com" target="_blank">Hello</Link>
-        </div>
-    </SandboxEditor>,
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const All = {
-    args: {
-        className: '',
-    },
-};
diff --git a/src/components/ui/Link/Link.tsx b/src/components/ui/Link/Link.tsx
index 4b098a53..ba5f19be 100644
--- a/src/components/ui/Link/Link.tsx
+++ b/src/components/ui/Link/Link.tsx
@@ -1,27 +1,39 @@
-'use client';
-import React from 'react';
+'use client'
 
-import {customClassSwitcher} from '~/core';
+import React from 'react'
 
-const COMPONENT_NAME = 'Link';
+import { customClassSwitcher } from '~/core'
+
+const COMPONENT_NAME = 'Link'
 
 export type LinkProps = {
-    children: React.ReactNode;
-    href: string;
-    alt?: string;
-    customRootClass: string;
-    className: string;
-    props: Record<string, any>[];
+  children: React.ReactNode
+  href: string
+  alt?: string
+  customRootClass: string
+  className: string
+  props: Record<string, any>[]
 }
 
 // TODO: in the previous return value
 // return <a href={href} alt={alt} className={`${rootClass} ${className}`} {...props}>{children}</a>;
 // 'alt' prop does not exist on an anchor element
-const Link = ({children, href='#', alt, customRootClass, className, ...props}: LinkProps) => {
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <a href={href} className={`${rootClass} ${className}`} {...props}>{children}</a>;
-};
+const Link = ({
+  children,
+  href = '#',
+  alt,
+  customRootClass,
+  className,
+  ...props
+}: LinkProps) => {
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)
+  return (
+    <a href={href} className={`${rootClass} ${className}`} {...props}>
+      {children}
+    </a>
+  )
+}
 
-Link.displayName = COMPONENT_NAME;
+Link.displayName = COMPONENT_NAME
 
-export default Link;
+export default Link
diff --git a/src/components/ui/Modal/Modal.stories.js b/src/components/ui/Modal/Modal.stories.js
deleted file mode 100644
index fba419e3..00000000
--- a/src/components/ui/Modal/Modal.stories.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import Modal from './Modal';
-import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
-
-
-export default {
-    title: 'UI/Data Display/Modal',
-    component: Modal,
-};
-
-const Template = (args) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-
-    const toggle = () => {
-        setIsOpen(!isOpen);
-    };
-
-    const onClose = () => {
-        setIsOpen(false);
-    };
-
-    return <SandboxEditor>
-        <Modal open={isOpen} onClose={onClose}>
-            <button onClick={toggle} className='bg-green-500 p-2'>Trigger</button>
-        </Modal>
-    </SandboxEditor>;
-};
-
-export const All = Template.bind({});
diff --git a/src/components/ui/Modal/Modal.tsx b/src/components/ui/Modal/Modal.tsx
index 5e5cd734..262fae1e 100644
--- a/src/components/ui/Modal/Modal.tsx
+++ b/src/components/ui/Modal/Modal.tsx
@@ -1,57 +1,57 @@
-import React from 'react';
-import {FloatingOverlay, FloatingPortal, FloatingFocusManager, useFloating} from '@floating-ui/react';
-
+import React from 'react'
+import {
+  FloatingOverlay,
+  FloatingPortal,
+  FloatingFocusManager,
+  useFloating
+} from '@floating-ui/react'
 
 export type ModalProps = {
-    open: boolean;
-    onClose: () => void;
-    children: React.ReactNode;
-};
-
-export const Modal: React.FC<ModalProps> = ({open=true, onClose, children}) => {
-    const {context} = useFloating();
-
-    const onCloseHandler = () => {
-        onClose(false);
-    };
-
-    return (
-        <div className="modal">
-            <div className="modal__content">
-                <div>
-                    {children}
-                </div>
-                <div>
-                    {/* Floating Content */}
-                    {
-                        open &&
-                        <FloatingPortal>
-                            <FloatingOverlay className="overlay" lockScroll>
-                                <FloatingFocusManager context={context}>
-                                    <div className='fixed bg-black/80 overflow-auto w-screen h-screen grid place-items-center'>
-                                        <div className='bg-white p-4 inline-block rounded-md shadow-lg'>
-                                            <button onClick={onCloseHandler}>
-                                                Close
-                                            </button>
-                                            <div>
-                                                Modal Content
-                                                <div>
-                                                    <input type="text" autoFocus />
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </FloatingFocusManager>
-                            </FloatingOverlay>
-                        </FloatingPortal>
-
-
-                    }
-                </div>
-            </div>
+  open: boolean
+  onClose: () => void
+  children: React.ReactNode
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  open = true,
+  onClose,
+  children
+}) => {
+  const { context } = useFloating()
+
+  const onCloseHandler = () => {
+    onClose()
+  }
+
+  return (
+    <div className="modal">
+      <div className="modal__content">
+        <div>{children}</div>
+        <div>
+          {/* Floating Content */}
+          {open && (
+            <FloatingPortal>
+              <FloatingOverlay className="overlay" lockScroll>
+                <FloatingFocusManager context={context}>
+                  <div className="fixed bg-black/80 overflow-auto w-screen h-screen grid place-items-center">
+                    <div className="bg-white p-4 inline-block rounded-md shadow-lg">
+                      <button onClick={onCloseHandler}>Close</button>
+                      <div>
+                        Modal Content
+                        <div>
+                          <input type="text" autoFocus />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </FloatingFocusManager>
+              </FloatingOverlay>
+            </FloatingPortal>
+          )}
         </div>
-    );
-};
-
+      </div>
+    </div>
+  )
+}
 
-export default Modal;
+export default Modal