diff --git a/packages/breadcrumb/src/lib/breadcrumb.tsx b/packages/breadcrumb/src/lib/breadcrumb.tsx
index 9627844..95fd05c 100644
--- a/packages/breadcrumb/src/lib/breadcrumb.tsx
+++ b/packages/breadcrumb/src/lib/breadcrumb.tsx
@@ -12,9 +12,9 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, items, class
   return (
     <nav className={cn("flex", className)} aria-label="Breadcrumb">
       <ol role="list" className="flex items-center space-x-2">
-        {items?.map((item,index) => (
+        {items?.map((item, index) => (
           <li key={index}>
-            <div className="flex items-center">
+            <div className="inline-flex items-center">
               {index > 0 && (
                 <GoChevronRight
                   className="mr-2 h-3 w-3 flex-shrink-0 text-gray-500"
@@ -60,30 +60,27 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
 }) => {
   const content = href ? (
     <a
-      className={`text-sm font-medium ${
-        isActive ? 'text-indigo-600' : 'text-gray-500 hover:text-gray-700'
-      }`}
+      className={`text-sm font-medium ${isActive ? 'text-indigo-600' : 'text-gray-500 hover:text-gray-700'
+        }`}
       href={href}
     >
       {children}
     </a>
   ) : (
     <span
-      className={`text-sm font-medium ${
-        isActive ? 'text-indigo-600' : 'text-gray-500'
-      }`}
+      className={`text-sm font-medium ${isActive ? 'text-indigo-600' : 'text-gray-500'
+        }`}
     >
       {children}
     </span>
   );
 
   return (
-    <div className={cn("breadcrumb", className)}>
+    <div className={cn("breadcrumb inline-flex", className)}>
       {icon &&
         React.cloneElement(icon as React.ReactElement, {
-          className: `${isActive ? 'text-indigo-600' : 'text-gray-500'} ${
-            children ? 'mr-2' : ''
-          }`,
+          className: `${isActive ? 'text-indigo-600' : 'text-gray-500'} ${children ? 'mr-2' : ''
+            }`,
         })}
       {content}
     </div>
diff --git a/packages/core/src/stories/BackdropBlur.stories.tsx b/packages/core/src/stories/BackdropBlur.stories.tsx
new file mode 100644
index 0000000..54d3f19
--- /dev/null
+++ b/packages/core/src/stories/BackdropBlur.stories.tsx
@@ -0,0 +1,70 @@
+import { Meta } from '@storybook/react';
+
+export default {
+    title: 'Components/Core/Backdrop Blur',
+} as Meta;
+
+export const AllBackdropBlur = () => {
+
+    return (
+        <div style={{
+            backgroundImage: "url(" + 'https://w0.peakpx.com/wallpaper/390/257/HD-wallpaper-macos-ventura-ios-16-dark-wwdc-2022-apple.jpg' + ")", backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            backgroundRepeat: 'no-repeat'
+        }} className='p-4'>
+            <p className='px-5 mb-8 text-white'>All the backrop blur used by default tailwind classes https://tailwindcss.com/docs/backdrop-blur</p>
+            <div className="flex gap-5 mb-5 px-5">
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-none" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-none</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-sm" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-sm</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-md" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-md</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-lg" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-lg</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-xl" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-xl</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-2xl" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-2xl</span>
+                    </p>
+                </div>
+            </div>
+            <div className="flex gap-5 mb-5 px-5">
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-3xl" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-3xl</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/packages/core/src/stories/Blur.stories.tsx b/packages/core/src/stories/Blur.stories.tsx
new file mode 100644
index 0000000..76fc280
--- /dev/null
+++ b/packages/core/src/stories/Blur.stories.tsx
@@ -0,0 +1,66 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Blur',
+} as Meta;
+
+export const AllBlur = () => {
+
+  return (
+    <div className='bg-gradient-to-b from-blue-400 to-blue-600 p-4'>
+      <p className='px-5 mb-8 text-white'>All the blur used by default tailwind classes https://tailwindcss.com/docs/blur</p>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-[0px]" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-none</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-sm" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-sm</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-md" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-md</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-lg" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-lg</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-xl" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-xl</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-2xl" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-2xl</span>
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-3xl" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-3xl</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/core/src/stories/Colors.stories.tsx b/packages/core/src/stories/Colors.stories.tsx
index b8960c5..2258292 100644
--- a/packages/core/src/stories/Colors.stories.tsx
+++ b/packages/core/src/stories/Colors.stories.tsx
@@ -1,17 +1,7 @@
 import { Meta } from '@storybook/react';
 
-import Title from '@bootwind/title';
-
 export default {
   title: 'Components/Core/Colors',
-  argTypes: {
-    variant: {
-      control: { type: 'radio', options: ['primary', 'secondary', 'ghost'] },
-    },
-    size: {
-      control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] },
-    },
-  },
 } as Meta;
 
 export const AllColors = () => {
@@ -42,8 +32,16 @@ export const AllColors = () => {
   const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
   return (
-    <div>
-
+    <div className='bg-[#F4F5F7] p-4'>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className={`color-swatch bg-primary w-48 h-16 rounded-md`} >
+          </div>
+          <p className='flex justify-between'>
+            <span>primary</span>
+          </p>
+        </div>
+      </div>
       {colors.map(color => {
         return (
           <div className="flex gap-5 mb-5 px-5">
diff --git a/packages/core/src/stories/Container.stories.tsx b/packages/core/src/stories/Container.stories.tsx
new file mode 100644
index 0000000..b6ce24a
--- /dev/null
+++ b/packages/core/src/stories/Container.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Container',
+} as Meta;
+
+export const AllContainer = () => {
+
+  return (
+    <div className='bg-[#F4F5F7] p-4'>
+      <p className='px-5 mb-5'>All the container used by default tailwind classes https://tailwindcss.com/docs/container</p>
+
+      <div className="w-[1536px] h-[440px] flex-col justify-start items-center gap-[30px] inline-flex">
+        <div className="w-[640px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">sm (640px)</div>
+        </div>
+        <div className="w-[768px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">md (768px)</div>
+        </div>
+        <div className="w-[1024px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">lg (1024px)</div>
+        </div>
+        <div className="w-[1280px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">xl (1280px)</div>
+        </div>
+        <div className="w-[1536px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">2xl (1536px)</div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/core/src/stories/Gradients.stories.tsx b/packages/core/src/stories/Gradients.stories.tsx
new file mode 100644
index 0000000..9868dc5
--- /dev/null
+++ b/packages/core/src/stories/Gradients.stories.tsx
@@ -0,0 +1,91 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Gradients',
+} as Meta;
+
+export const AllGradients = () => {
+
+  return (
+    <div className='bg-[#F4F5F7] p-4'>
+      <p className='px-5 mb-5'>All the gradients use bg-gradient-to-b tailwind classes and the color from - to is below the gradients box.</p>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-fuchsia-500 to-indigo-600 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>fuchsia-500 → indigo-600</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-indigo-500 to-indigo-800 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>indigo-500 → indigo-800 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-pink-500 to-indigo-600 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>pink-500 → indigo-600 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-sky-400 to-purple-500 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>sky-400 → purple-500 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-violet-400 to-purple-700 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>violet-400 → purple-700 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-blue-400 to-blue-600 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>blue-400 → blue-600 </span>
+          </p>
+        </div>
+      </div>
+
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-emerald-400 to-lime-700 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>emerald-400 → lime-700 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-yellow-200 to-lime-700 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>yellow-200 → lime-700 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-green-400 to-blue-500 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>green-400 → blue-500 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-blue-500 to-pink-500 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>blue-500 → pink-500 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-orange-500 to-pink-600 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>orange-500 → pink-600 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-fuchsia-700 to-red-500 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>fuchsia-700 → red-500 </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/core/src/stories/GridSystem.stories.tsx b/packages/core/src/stories/GridSystem.stories.tsx
new file mode 100644
index 0000000..23e96e2
--- /dev/null
+++ b/packages/core/src/stories/GridSystem.stories.tsx
@@ -0,0 +1,336 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Grid System',
+} as Meta;
+
+export const AllGridSystem = () => {
+
+  return (
+    <div className='bg-[#F4F5F7] p-4'>
+      <p className='mb-8 text-black'>All the grid  used by default tailwind classes https://tailwindcss.com/docs/flex</p>
+      <div className="w-[1360px] h-[1962px] flex-col justify-start items-start gap-[30px] inline-flex">
+        <div className="flex-col justify-start items-start gap-[30px] flex">
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 1</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/1</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 2</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/2</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/2</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 3</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/3</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/3</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/3</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 4</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/4</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/4</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/4</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/4</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 5</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/5</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/5</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/5</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/5</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/5</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 6</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/6</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/6</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/6</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/6</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/6</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/6</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 7</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/7</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/7</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/7</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/7</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/7</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/7</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/7</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 8</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/8</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/8</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/8</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/8</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/8</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/8</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/8</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/8</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 9</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/9</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 10</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/10</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 11</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/11</div>
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch h-[136px] flex-col justify-start items-start gap-[15px] flex">
+            <div className="w-[1360px] h-[17px] relative">
+              <div className="w-[1360px] left-0 top-0 absolute text-slate-600 text-[15px] font-medium font-['Inter'] tracking-tight">Size 1 of 12</div>
+            </div>
+            <div className="w-[1360px] py-5 bg-violet-200 justify-start items-start gap-8 inline-flex">
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+              <div className="grow shrink basis-0 p-5 bg-white bg-opacity-20 flex-col justify-center items-center gap-2.5 inline-flex">
+                <div className="text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">1/12</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/core/src/stories/Shadows.stories.tsx b/packages/core/src/stories/Shadows.stories.tsx
new file mode 100644
index 0000000..9e4b539
--- /dev/null
+++ b/packages/core/src/stories/Shadows.stories.tsx
@@ -0,0 +1,60 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Shadows',
+} as Meta;
+
+export const AllShadows = () => {
+
+  return (
+    <div className='bg-[#F4F5F7] p-4'>
+      <p className='px-5 mb-5'>All the shadows used by default tailwind classes https://tailwindcss.com/docs/box-shadow</p>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg shadow-sm" />
+          <p className='flex justify-between mt-5'>
+            <span>shadow-sm</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg shadow" />
+          <p className='flex justify-between mt-5'>
+            <span>shadow</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg shadow-md" />
+          <p className='flex justify-between mt-5'>
+            <span>shadow-md</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg shadow-lg" />
+          <p className='flex justify-between mt-5'>
+            <span>shadow-lg</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg shadow-xl" />
+          <p className='flex justify-between mt-5'>
+            <span>shadow-xl</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg shadow-2xl" />
+          <p className='flex justify-between mt-5'>
+            <span>shadow-2xl</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg shadow-inner" />
+          <p className='flex justify-between mt-5'>
+            <span>shadow-inner</span>
+          </p>
+        </div>
+      </div>
+
+
+    </div>
+  )
+}
diff --git a/packages/core/src/stories/Spacing.stories.tsx b/packages/core/src/stories/Spacing.stories.tsx
new file mode 100644
index 0000000..7116d1a
--- /dev/null
+++ b/packages/core/src/stories/Spacing.stories.tsx
@@ -0,0 +1,157 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Spacing',
+} as Meta;
+
+export const AllSpacing = () => {
+
+  return (
+    <div className='bg-[#F4F5F7] p-4'>
+      <p className='px-5 mb-5'>All the spacing used by default tailwind classes https://tailwindcss.com/docs/theme#spacing</p>
+
+      <div className="w-[843px] h-[1331px] relative bg-white">
+        <div className="w-px h-4 left-[257px] top-[50px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-0.5 h-4 left-[257px] top-[88px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-1 h-4 left-[257px] top-[126px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-1.5 h-4 left-[257px] top-[164px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-2 h-4 left-[257px] top-[202px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-2.5 h-4 left-[257px] top-[240px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-3 h-4 left-[257px] top-[278px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-3.5 h-4 left-[257px] top-[316px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-4 h-4 left-[257px] top-[354px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-5 h-4 left-[257px] top-[392px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-6 h-4 left-[257px] top-[430px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-7 h-4 left-[257px] top-[468px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-8 h-4 left-[257px] top-[506px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-9 h-4 left-[257px] top-[544px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-10 h-4 left-[257px] top-[582px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-11 h-4 left-[257px] top-[620px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-12 h-4 left-[257px] top-[658px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-14 h-4 left-[257px] top-[696px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-16 h-4 left-[257px] top-[734px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-20 h-4 left-[257px] top-[772px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-24 h-4 left-[257px] top-[810px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-28 h-4 left-[257px] top-[848px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-32 h-4 left-[257px] top-[886px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-36 h-4 left-[257px] top-[924px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-40 h-4 left-[257px] top-[962px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-44 h-4 left-[257px] top-[1000px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-48 h-4 left-[257px] top-[1038px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-52 h-4 left-[257px] top-[1076px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-56 h-4 left-[257px] top-[1114px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-60 h-4 left-[257px] top-[1152px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-64 h-4 left-[257px] top-[1190px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-72 h-4 left-[257px] top-[1228px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-80 h-4 left-[257px] top-[1266px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-96 h-4 left-[257px] top-[1304px] absolute bg-blue-500 rounded-[50px]" />
+        <div className="w-[843px] h-[1255px] left-0 top-[38px] absolute">
+          <div className="w-[843px] h-px left-0 top-0 absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[38px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[76px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[114px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[152px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[190px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[228px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[266px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[304px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[342px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[380px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[418px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[456px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[494px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[532px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[570px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[608px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[646px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[684px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[722px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[760px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[798px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[836px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[874px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[912px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[950px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[988px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[1026px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[1064px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[1102px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[1140px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[1178px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[1216px] absolute bg-gray-200" />
+          <div className="w-[843px] h-px left-0 top-[1254px] absolute bg-gray-200" />
+        </div>
+        <div className="w-20 left-[50px] top-[10px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0px</div>
+        <div className="w-20 left-[50px] top-[48px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">1px</div>
+        <div className="w-20 left-[50px] top-[86px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0.125rem</div>
+        <div className="w-20 left-[50px] top-[124px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0.25rem</div>
+        <div className="w-20 left-[50px] top-[162px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0.375rem</div>
+        <div className="w-20 left-[50px] top-[200px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0.5rem</div>
+        <div className="w-20 left-[50px] top-[238px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0.625rem</div>
+        <div className="w-20 left-[50px] top-[276px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0.75rem</div>
+        <div className="w-20 left-[50px] top-[314px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0.875rem</div>
+        <div className="w-20 left-[50px] top-[352px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">1rem</div>
+        <div className="w-20 left-[50px] top-[390px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">1.25rem</div>
+        <div className="w-20 left-[50px] top-[428px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">1.5rem</div>
+        <div className="w-20 left-[50px] top-[466px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">1.75rem</div>
+        <div className="w-20 left-[50px] top-[504px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">2rem</div>
+        <div className="w-20 left-[50px] top-[542px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">2.25rem</div>
+        <div className="w-20 left-[50px] top-[580px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">2.5rem</div>
+        <div className="w-20 left-[50px] top-[618px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">2.75rem</div>
+        <div className="w-20 left-[50px] top-[656px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">3rem</div>
+        <div className="w-20 left-[50px] top-[694px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">3.5rem</div>
+        <div className="w-20 left-[50px] top-[732px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">4rem</div>
+        <div className="w-20 left-[50px] top-[770px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">5rem</div>
+        <div className="w-20 left-[50px] top-[808px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">6rem</div>
+        <div className="w-20 left-[50px] top-[846px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">7rem</div>
+        <div className="w-20 left-[50px] top-[884px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">8rem</div>
+        <div className="w-20 left-[50px] top-[922px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">9rem</div>
+        <div className="w-20 left-[50px] top-[960px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">10rem</div>
+        <div className="w-20 left-[50px] top-[998px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">11rem</div>
+        <div className="w-20 left-[50px] top-[1036px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">12rem</div>
+        <div className="w-20 left-[50px] top-[1074px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">13rem</div>
+        <div className="w-20 left-[50px] top-[1112px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">14rem</div>
+        <div className="w-20 left-[50px] top-[1150px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">15rem</div>
+        <div className="w-20 left-[50px] top-[1188px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">16rem</div>
+        <div className="w-20 left-[50px] top-[1226px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">18rem</div>
+        <div className="w-20 left-[50px] top-[1264px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">20rem</div>
+        <div className="w-20 left-[50px] top-[1302px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">24rem</div>
+        <div className="w-20 left-[151px] top-[11px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">0px</div>
+        <div className="w-20 left-[151px] top-[49px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">1px</div>
+        <div className="w-20 left-[151px] top-[87px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">2px</div>
+        <div className="w-20 left-[151px] top-[125px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">4px</div>
+        <div className="w-20 left-[151px] top-[163px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">6px</div>
+        <div className="w-20 left-[151px] top-[201px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">8px</div>
+        <div className="w-20 left-[151px] top-[239px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">10px</div>
+        <div className="w-20 left-[151px] top-[277px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">12px</div>
+        <div className="w-20 left-[151px] top-[315px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">14px</div>
+        <div className="w-20 left-[151px] top-[353px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">16px</div>
+        <div className="w-20 left-[151px] top-[391px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">20px</div>
+        <div className="w-20 left-[151px] top-[429px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">24px</div>
+        <div className="w-20 left-[151px] top-[467px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">28px</div>
+        <div className="w-20 left-[151px] top-[505px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">32px</div>
+        <div className="w-20 left-[151px] top-[543px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">36px</div>
+        <div className="w-20 left-[151px] top-[581px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">40px</div>
+        <div className="w-20 left-[151px] top-[619px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">44px</div>
+        <div className="w-20 left-[151px] top-[657px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">48px</div>
+        <div className="w-20 left-[151px] top-[695px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">56px</div>
+        <div className="w-20 left-[151px] top-[733px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">64px</div>
+        <div className="w-20 left-[151px] top-[771px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">80px</div>
+        <div className="w-20 left-[151px] top-[809px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">96px</div>
+        <div className="w-20 left-[151px] top-[847px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">112px</div>
+        <div className="w-20 left-[151px] top-[885px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">128px</div>
+        <div className="w-20 left-[151px] top-[923px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">144px</div>
+        <div className="w-20 left-[151px] top-[961px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">160px</div>
+        <div className="w-20 left-[151px] top-[999px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">176px</div>
+        <div className="w-20 left-[151px] top-[1037px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">192px</div>
+        <div className="w-20 left-[151px] top-[1075px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">208px</div>
+        <div className="w-20 left-[151px] top-[1113px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">224px</div>
+        <div className="w-20 left-[151px] top-[1151px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">240px</div>
+        <div className="w-20 left-[151px] top-[1189px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">256px</div>
+        <div className="w-20 left-[151px] top-[1227px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">288px</div>
+        <div className="w-20 left-[151px] top-[1265px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">320px</div>
+        <div className="w-20 left-[151px] top-[1303px] absolute text-gray-500 text-sm font-medium font-['Inter'] leading-tight">384px</div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/typography/src/lib/text.tsx b/packages/typography/src/lib/text.tsx
index b1d881c..7df1f60 100644
--- a/packages/typography/src/lib/text.tsx
+++ b/packages/typography/src/lib/text.tsx
@@ -8,14 +8,14 @@ type TextStyle = Record<TextType, {
     size: number,
     color: string
   },
-  styles: { 
+  styles: {
     fontSize: string
     lineHeight: string
     letterSpacing: string
     mb?: string
   }[]
 }>
-const styleMap: TextStyle  = {
+const styleMap: TextStyle = {
   "display": {
     defaults: {
       fontWeight: "font-bold",
@@ -23,9 +23,9 @@ const styleMap: TextStyle  = {
       size: 1
     },
     styles: [
-      { fontSize: "text-[11.6rem]", lineHeight: "leading-[13.2rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' },
-      { fontSize: "text-[9rem]", lineHeight: "leading-[10.62rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' },
-      { fontSize: "text-[7.5rem]", lineHeight: "leading-[8.37rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' },
+      { fontSize: "text-[11.6rem]", lineHeight: "leading-[13.2rem]", letterSpacing: "tracking-[-3.5px]", mb: 'mb-5' },
+      { fontSize: "text-[9rem]", lineHeight: "leading-[10.62rem]", letterSpacing: "tracking-[-3.5px]", mb: 'mb-5' },
+      { fontSize: "text-[7.5rem]", lineHeight: "leading-[8.37rem]", letterSpacing: "tracking-[-3.5px]", mb: 'mb-5' },
       { fontSize: "text-[6rem]", lineHeight: "leading-[6.87rem]", letterSpacing: "tracking-[2.5px]", mb: 'mb-5' },
     ]
   },
@@ -36,12 +36,12 @@ const styleMap: TextStyle  = {
       size: 1
     },
     styles: [
-      { fontSize: "text-[4.5rem]", lineHeight: "leading-[5.62rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' },
-      { fontSize: "text-[4rem]", lineHeight: "leading-[5rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' },
-      { fontSize: "text-[3rem]", lineHeight: "leading-[3.75rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' },
-      { fontSize: "text-[2.25rem]", lineHeight: "leading-[3.12rem]", letterSpacing: "tracking-[1px]", mb: 'mb-3' },
-      { fontSize: "text-[2rem]", lineHeight: "leading-[2.75rem]", letterSpacing: "tracking-[0.5px]", mb: 'mb-3' },
-      { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[0.4px]", mb: 'mb-3' },
+      { fontSize: "text-[4.5rem]", lineHeight: "leading-[5.62rem]", letterSpacing: "tracking-[-2.3px]", mb: 'mb-4' },
+      { fontSize: "text-[4rem]", lineHeight: "leading-[5rem]", letterSpacing: "tracking-[-2.3px]", mb: 'mb-4' },
+      { fontSize: "text-[3rem]", lineHeight: "leading-[3.75rem]", letterSpacing: "tracking-[-2.3px]", mb: 'mb-4' },
+      { fontSize: "text-[2.25rem]", lineHeight: "leading-[3.12rem]", letterSpacing: "tracking-[-1px]", mb: 'mb-3' },
+      { fontSize: "text-[2rem]", lineHeight: "leading-[2.75rem]", letterSpacing: "tracking-[-0.5px]", mb: 'mb-3' },
+      { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[-0.4px]", mb: 'mb-3' },
     ]
   },
   "short-desc": {
@@ -51,10 +51,10 @@ const styleMap: TextStyle  = {
       size: 1
     },
     styles: [
-      { fontSize: "text-[1.875rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[0.5px]" },
-      { fontSize: "text-[1.75rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[0.5px]" },
-      { fontSize: "text-[1.625rem]", lineHeight: "leading-[2.5rem]", letterSpacing: "tracking-[0.5px]" },
-      { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[0.5px]" },
+      { fontSize: "text-[1.875rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[-0.5px]" },
+      { fontSize: "text-[1.75rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[-0.5px]" },
+      { fontSize: "text-[1.625rem]", lineHeight: "leading-[2.5rem]", letterSpacing: "tracking-[-0.5px]" },
+      { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[-0.5px]" },
     ]
   },
   "paragraph": {
@@ -64,12 +64,12 @@ const styleMap: TextStyle  = {
       size: 1
     },
     styles: [
-      { fontSize: "text-[1.375rem]", lineHeight: "leading-[2.187rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' },
-      { fontSize: "text-[1.25rem]", lineHeight: "leading-[2rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' },
-      { fontSize: "text-[1.125rem]", lineHeight: "leading-[1.87rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' },
-      { fontSize: "text-[1rem]", lineHeight: "leading-[1.75rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' },
-      { fontSize: "text-[0.87rem]", lineHeight: "leading-[1.5rem]", letterSpacing: "tracking-[0.2px]", mb: 'mb-2' },
-      { fontSize: "text-[0.75rem]", lineHeight: "leading-[1.25rem]", letterSpacing: "tracking-[0.2px]", mb: 'mb-2' },
+      { fontSize: "text-[1.375rem]", lineHeight: "leading-[2.187rem]", letterSpacing: "tracking-[-0.3px]", mb: 'mb-2' },
+      { fontSize: "text-[1.25rem]", lineHeight: "leading-[2rem]", letterSpacing: "tracking-[-0.3px]", mb: 'mb-2' },
+      { fontSize: "text-[1.125rem]", lineHeight: "leading-[1.87rem]", letterSpacing: "tracking-[-0.3px]", mb: 'mb-2' },
+      { fontSize: "text-[1rem]", lineHeight: "leading-[1.75rem]", letterSpacing: "tracking-[-0.3px]", mb: 'mb-2' },
+      { fontSize: "text-[0.87rem]", lineHeight: "leading-[1.5rem]", letterSpacing: "tracking-[-0.2px]", mb: 'mb-2' },
+      { fontSize: "text-[0.75rem]", lineHeight: "leading-[1.25rem]", letterSpacing: "tracking-[-0.2px]", mb: 'mb-2' },
     ]
   },
 }
@@ -91,15 +91,15 @@ export const Text: React.FC<TextProps> = ({
   color = styleMap[type].defaults.color,
   italic = false,
   children
-}: TextProps) =>  {
-  const styles = Object.values(styleMap[type].styles[size-1]).join(' ')
+}: TextProps) => {
+  const styles = Object.values(styleMap[type].styles[size - 1]).join(' ')
   const additionalClasses = [
-    `bootwind-text bootwind-text-${type}`, 
+    `bootwind-text bootwind-text-${type}`,
     italic ? 'italic' : '',
     weight,
     color
   ].join(' ')
-  
+
   const classes = `${additionalClasses} ${styles}`
 
   return (
diff --git a/packages/ui/src/stories/examples/TablePagination.stories.tsx b/packages/ui/src/stories/examples/TablePagination.stories.tsx
index fc15625..1b71942 100644
--- a/packages/ui/src/stories/examples/TablePagination.stories.tsx
+++ b/packages/ui/src/stories/examples/TablePagination.stories.tsx
@@ -17,7 +17,7 @@ const columns = [
 ];
 
 export default {
-  title: 'Examples/TablePagination',
+  title: 'Examples/Table with Pagination',
   component: Pagination,
   argTypes: {},
 } as Meta;