diff --git a/.storybook/components/SystemPropsTable/SystemPropsTable.tsx b/.storybook/components/SystemPropsTable/SystemPropsTable.tsx
index 02baefe5..e74ab715 100644
--- a/.storybook/components/SystemPropsTable/SystemPropsTable.tsx
+++ b/.storybook/components/SystemPropsTable/SystemPropsTable.tsx
@@ -25,10 +25,10 @@ const getStoryTitleAndDesignTokenLabelByPropName = (
   if (Object.keys(spacingSystemProps).includes(propName) || ['gap', 'gapX', 'gapY'].includes(propName)) {
     designTokenName = 'spacing';
   }
-  if (['width', 'minWidth', 'maxWidth'].includes(propName)) {
+  if (['width'].includes(propName)) {
     designTokenName = 'width';
   }
-  if (['height', 'minHeight', 'maxHeight'].includes(propName)) {
+  if (['height'].includes(propName)) {
     designTokenName = 'height';
   }
 
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 1f0d6a7a..c36e22a2 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&family=Montserrat:wght@100;400;500;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&family=Montserrat:wght@100;400;500;600;700&display=swap" rel="stylesheet" />
 <style>
     body .sb-story {
         font-family: var(--font-family-base) !important;
diff --git a/__tests__/helpers/systemPropsHelper/flexBoxSystemClassName.test.ts b/__tests__/helpers/systemPropsHelper/flexBoxSystemClassName.test.ts
deleted file mode 100644
index f80d1859..00000000
--- a/__tests__/helpers/systemPropsHelper/flexBoxSystemClassName.test.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { flexBoxSystemClassName } from '@/helpers/systemPropsHelper';
-import { FlexBoxSystemProps } from '@/types';
-
-describe('Test method flexBoxClassName', () => {
-  test.each([
-    {
-      props: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: {
-          xs: 'xs',
-          md: 's',
-        },
-        alignSelf: {
-          xs: 'start',
-          md: 'center',
-        },
-      },
-      expected: 'items-center@xs justify-center@xs gap-xs@xs gap-s@md self-start@xs self-center@md',
-    },
-  ] as { props: FlexBoxSystemProps; expected: string }[])(
-    'return flex or grid box class name $expected',
-    ({ props, expected }) => {
-      expect(flexBoxSystemClassName(props)).toEqual(expected);
-    }
-  );
-});
diff --git a/__tests__/helpers/systemPropsHelper/flexOrGridSystemClassName.test.ts b/__tests__/helpers/systemPropsHelper/flexOrGridSystemClassName.test.ts
new file mode 100644
index 00000000..4d33ea60
--- /dev/null
+++ b/__tests__/helpers/systemPropsHelper/flexOrGridSystemClassName.test.ts
@@ -0,0 +1,23 @@
+import { flexOrGridSystemClassName } from '@/helpers/systemPropsHelper';
+import { FlexOrGridSystemProps } from '@/types';
+
+describe('Test method flexBoxClassName', () => {
+  test.each([
+    {
+      props: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: {
+          xs: 'xs',
+          md: 's',
+        },
+      },
+      expected: 'items-center@xs justify-center@xs gap-xs@xs gap-s@md',
+    },
+  ] as { props: FlexOrGridSystemProps; expected: string }[])(
+    'return flex or grid class name $expected',
+    ({ props, expected }) => {
+      expect(flexOrGridSystemClassName(props)).toEqual(expected);
+    }
+  );
+});
diff --git a/__tests__/helpers/systemPropsHelper/hiddenSystemClassName.test.ts b/__tests__/helpers/systemPropsHelper/hiddenSystemClassName.test.ts
deleted file mode 100644
index 006b9c4c..00000000
--- a/__tests__/helpers/systemPropsHelper/hiddenSystemClassName.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { hiddenSystemClassName } from '@/helpers/systemPropsHelper';
-import { HiddenSystemProps } from '@/types/SystemProps';
-
-describe('Test method hiddenSystemClassName', () => {
-  test.each([
-    {
-      props: {
-        hiddenBelow: 'md',
-      },
-      expected: 'hidden-below@md',
-    },
-  ] as { props: HiddenSystemProps; expected: string }[])(
-    'return hidden class name $expected',
-    ({ props, expected }) => {
-      expect(hiddenSystemClassName(props)).toEqual(expected);
-    }
-  );
-});
diff --git a/__tests__/helpers/systemPropsHelper/layoutSystemClassName.test.ts b/__tests__/helpers/systemPropsHelper/layoutSystemClassName.test.ts
new file mode 100644
index 00000000..ccdb83aa
--- /dev/null
+++ b/__tests__/helpers/systemPropsHelper/layoutSystemClassName.test.ts
@@ -0,0 +1,18 @@
+import { layoutSystemClassName } from '@/helpers/systemPropsHelper';
+import { LayoutSystemProps } from '@/types/SystemProps';
+
+describe('Test method ', () => {
+  test.each([
+    {
+      props: {
+        hiddenBelow: 'md',
+      },
+      expected: 'hidden-below@md',
+    },
+  ] as { props: LayoutSystemProps; expected: string }[])(
+    'return layout class name $expected',
+    ({ props, expected }) => {
+      expect(layoutSystemClassName(props)).toEqual(expected);
+    }
+  );
+});
diff --git a/bin/build-design-tokens/index.ts b/bin/build-design-tokens/index.ts
index 4519c7e3..ce5c85ea 100644
--- a/bin/build-design-tokens/index.ts
+++ b/bin/build-design-tokens/index.ts
@@ -14,16 +14,12 @@ const styleDictionary = StyleDictionary.extend({
   platforms: {
     'css/variables': {
       buildPath: './src/styles/',
-      transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item'],
-      transformGroup: 'css',
+      transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item', 'math', 'size/px'],
       files: [
         {
           format: 'css/variables',
           filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']),
           destination: '_token-custom-properties.scss',
-          options: {
-            outputReferences: true,
-          },
         },
       ],
     },
@@ -36,9 +32,6 @@ const styleDictionary = StyleDictionary.extend({
           filter: (token): boolean => token?.attributes?.category === 'color',
           destination: 'abstracts/variables/_variables.scss',
           mapName: 'variables',
-          options: {
-            outputReferences: true,
-          },
         } as File,
       ],
     },
@@ -50,9 +43,6 @@ const styleDictionary = StyleDictionary.extend({
           format: 'scss/map-deep-with-css-variables',
           filter: (token): boolean => filterExcludesCategories(token, ['asset']),
           destination: 'abstracts/variables/_token-variables.scss',
-          options: {
-            outputReferences: true,
-          },
         },
       ],
       options: {
@@ -61,14 +51,11 @@ const styleDictionary = StyleDictionary.extend({
     },
     'typescript/token-variables': {
       buildPath: './src/',
-      transforms: ['attribute/cti'],
+      transforms: ['attribute/cti', 'math', 'size/px'],
       files: [
         {
           format: 'typescript/object',
           destination: 'constants/tokenVariables.ts',
-          options: {
-            outputReferences: true,
-          },
         },
       ],
     },
diff --git a/bin/build-design-tokens/transforms/register.ts b/bin/build-design-tokens/transforms/register.ts
index d9c60830..3dd5a180 100644
--- a/bin/build-design-tokens/transforms/register.ts
+++ b/bin/build-design-tokens/transforms/register.ts
@@ -1 +1,3 @@
 import './name/cti/kebab-only-category-item';
+import './value/math';
+import './value/size';
diff --git a/bin/build-design-tokens/transforms/value/math.ts b/bin/build-design-tokens/transforms/value/math.ts
new file mode 100644
index 00000000..cbbe2ac9
--- /dev/null
+++ b/bin/build-design-tokens/transforms/value/math.ts
@@ -0,0 +1,12 @@
+import StyleDictionary from 'style-dictionary';
+
+StyleDictionary.registerTransform({
+  name: 'math',
+  type: 'value',
+  transitive: true,
+  matcher: token => typeof token.value === 'string' && /(\+|-|\*|\/)(\s|\d)/.test(token.value),
+  transformer: token => {
+    const cleanExpression = token.value.replace(/[a-z]+/gi, '');
+    return eval(cleanExpression);
+  },
+});
diff --git a/bin/build-design-tokens/transforms/value/size.ts b/bin/build-design-tokens/transforms/value/size.ts
new file mode 100644
index 00000000..959c38d9
--- /dev/null
+++ b/bin/build-design-tokens/transforms/value/size.ts
@@ -0,0 +1,9 @@
+import StyleDictionary from 'style-dictionary';
+
+StyleDictionary.registerTransform({
+  name: 'size/px',
+  type: 'value',
+  transitive: true,
+  matcher: token => token?.type !== 'scale' && ['spacing', 'font-size'].some(name => token.path.includes(name)),
+  transformer: token => `${parseInt(token.value)}px`,
+});
diff --git a/package-lock.json b/package-lock.json
index a45a70a3..cf500a9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@eleven-labs/design-system",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@eleven-labs/design-system",
-      "version": "0.22.0",
+      "version": "0.23.0",
       "license": "MIT",
       "dependencies": {
         "autosuggest-highlight": "^3.3.4",
diff --git a/package.json b/package.json
index b45a4a61..47f5686c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"
diff --git a/src/components/Atoms/Blockquote/Blockquote.scss b/src/components/Atoms/Blockquote/Blockquote.scss
index 6b4b76d1..37285d41 100644
--- a/src/components/Atoms/Blockquote/Blockquote.scss
+++ b/src/components/Atoms/Blockquote/Blockquote.scss
@@ -2,7 +2,6 @@
 
 .blockquote {
   font-family: Georgia, #{map-get-strict($token-variables, 'font-family', 'blockquote')};
-  font-size: #{map-get-strict($token-variables, 'font-size', 'l')};
 
   &::before, &::after {
     content: "“";
diff --git a/src/components/Atoms/Blockquote/Blockquote.tsx b/src/components/Atoms/Blockquote/Blockquote.tsx
index 86c0cf73..fb1a4575 100644
--- a/src/components/Atoms/Blockquote/Blockquote.tsx
+++ b/src/components/Atoms/Blockquote/Blockquote.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { Box } from '@/components';
+import { Text } from '@/components';
 import type { ComponentPropsWithoutRef, MarginSystemProps } from '@/types';
 
 import './Blockquote.scss';
@@ -9,7 +9,7 @@ import './Blockquote.scss';
 export interface BlockquoteProps extends MarginSystemProps, Omit<ComponentPropsWithoutRef<'blockquote'>, 'align'> {}
 
 export const Blockquote: React.FC<BlockquoteProps> = ({ children, className, ...props }) => (
-  <Box as="blockquote" {...props} pl="m" italic className={classNames('blockquote', className)}>
+  <Text as="blockquote" {...props} pl="m" size="m" italic className={classNames('blockquote', className)}>
     {children}
-  </Box>
+  </Text>
 );
diff --git a/src/components/Atoms/Breadcrumb/Breadcrumb.tsx b/src/components/Atoms/Breadcrumb/Breadcrumb.tsx
index e8b2edd7..60574c75 100644
--- a/src/components/Atoms/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/Atoms/Breadcrumb/Breadcrumb.tsx
@@ -10,7 +10,15 @@ export interface BreadcrumbProps extends MarginSystemProps {
 }
 
 export const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, ...props }) => (
-  <Flex {...props} as="ol" itemScope itemType="https://schema.org/BreadcrumbList" gap="xxs-3" className="breadcrumb">
+  <Flex
+    {...props}
+    as="ol"
+    itemScope
+    itemType="https://schema.org/BreadcrumbList"
+    gap="xxs-3"
+    fontWeight="semi-bold"
+    className="breadcrumb"
+  >
     {items.map(({ label, ...itemLink }, index) => (
       <Fragment key={index}>
         <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
@@ -21,7 +29,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, ...props }) => (
               </Text>
             </Link>
           ) : (
-            <Text as="span" itemProp="name">
+            <Text as="span" itemProp="name" fontWeight="regular">
               {label}
             </Text>
           )}
diff --git a/src/components/Atoms/Button/Button.scss b/src/components/Atoms/Button/Button.scss
index 250c77d9..cec38ab0 100644
--- a/src/components/Atoms/Button/Button.scss
+++ b/src/components/Atoms/Button/Button.scss
@@ -3,38 +3,15 @@
 .button {
   $this: &;
 
-  display: inline-flex;
-  flex-direction: column;
-  padding: map-get-strict($token-variables, 'spacing', 'xxs') map-get-strict($token-variables, 'spacing', 'm');
   background: var(--background-color-button, map-get-strict($token-variables, 'color', 'info'));
   color: var(--color-button, white);
-  font-weight: var(--font-weight-button, map-get-strict($token-variables, 'font-weight', 'medium'));
-  text-transform: uppercase;
+  font-family: map-get-strict($token-variables, 'font-family', 'heading');
   border-width: var(--border-width-button, 0);
   border-style: solid;
   border-color: var(--border-color-button, transparent);
-  border-radius: var(--border-radius-button, 4px);
+  border-radius: var(--border-radius-button, 100px);
   cursor: pointer;
 
-  &::after {
-    content: attr(data-text);
-    content: attr(data-text) / "";
-    height: 0;
-    visibility: hidden;
-    overflow: hidden;
-    user-select: none;
-    pointer-events: none;
-    font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
-
-    @media speech {
-      display: none;
-    }
-  }
-
-  &:hover {
-    --font-weight-button: #{map-get-strict($token-variables, 'font-weight', 'bold')};
-  }
-
   &[disabled] {
     cursor: not-allowed;
   }
@@ -58,4 +35,9 @@
       --border-color-button: #{map-get-strict($token-variables, 'color', 'dark-grey')};
     }
   }
+
+  &--accent {
+    --background-color-button: #{map-get-strict($token-variables, 'color', 'accent')};
+    --color-button: #{map-get-strict($token-variables, 'color', 'primary')};
+  }
 }
diff --git a/src/components/Atoms/Button/Button.stories.ts b/src/components/Atoms/Button/Button.stories.ts
index 90288605..c0f24afa 100644
--- a/src/components/Atoms/Button/Button.stories.ts
+++ b/src/components/Atoms/Button/Button.stories.ts
@@ -30,3 +30,8 @@ export const ButtonWithVariantSecondary: Story = {};
 ButtonWithVariantSecondary.args = {
   variant: 'secondary',
 };
+
+export const ButtonWithVariantAccent: Story = {};
+ButtonWithVariantAccent.args = {
+  variant: 'accent',
+};
diff --git a/src/components/Atoms/Button/Button.tsx b/src/components/Atoms/Button/Button.tsx
index 9f9fa6d1..1a4719d4 100644
--- a/src/components/Atoms/Button/Button.tsx
+++ b/src/components/Atoms/Button/Button.tsx
@@ -1,16 +1,18 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
-import type { BoxProps } from '@/components';
+import type { FlexProps } from '@/components';
+import { Flex } from '@/components';
+import { Icon } from '@/components';
 import { Text } from '@/components';
 import { polyRef } from '@/helpers/polyRef';
 
 import './Button.scss';
 
-export const buttonVariant = ['primary', 'secondary'] as const;
+export const buttonVariant = ['primary', 'secondary', 'accent'] as const;
 export type ButtonVariantType = (typeof buttonVariant)[number];
 
-export interface ButtonProps extends BoxProps {
+export interface ButtonProps extends FlexProps {
   className?: string;
   variant?: ButtonVariantType;
   isChoiceChip?: boolean;
@@ -19,11 +21,19 @@ export interface ButtonProps extends BoxProps {
 
 export const Button = polyRef<'button', ButtonProps>(
   ({ as = 'button', variant = 'primary', isChoiceChip = false, className, children, ...props }, ref) => (
-    <Text
+    <Flex
       {...props}
+      display="inline-flex"
+      flexDirection="row"
+      justifyContent="center"
+      alignItems="center"
       as={as}
       ref={ref}
+      px="m"
+      py="xs"
       size="s"
+      fontWeight="bold"
+      textTransform="uppercase"
       data-text={typeof children === 'string' ? children : ''}
       className={classNames(
         'button',
@@ -34,8 +44,9 @@ export const Button = polyRef<'button', ButtonProps>(
         className
       )}
     >
-      {children}
-    </Text>
+      <Text as="span">{children}</Text>
+      <Icon name="arrow" />
+    </Flex>
   )
 );
 
diff --git a/src/components/Atoms/Typography/Heading/Heading.tsx b/src/components/Atoms/Typography/Heading/Heading.tsx
index facde4d4..729d4d92 100644
--- a/src/components/Atoms/Typography/Heading/Heading.tsx
+++ b/src/components/Atoms/Typography/Heading/Heading.tsx
@@ -10,7 +10,7 @@ export interface HeadingProps extends Omit<BoxProps, 'textSize'> {
   size?: HeadingSizeType;
 }
 
-export const Heading = polyRef<'h1', HeadingProps>(({ as = 'h1', size, children, className, ...props }, ref) => (
+export const Heading = polyRef<'p', HeadingProps>(({ as = 'p', size, children, className, ...props }, ref) => (
   <Box {...props} as={as} ref={ref} className={classNames({ [`heading-${size}`]: Boolean(size) }, className)}>
     {children}
   </Box>
diff --git a/src/components/Layout/Flex/Flex.stories.tsx b/src/components/Layout/Flex/Flex.stories.tsx
index 705d04bd..e3a4c125 100644
--- a/src/components/Layout/Flex/Flex.stories.tsx
+++ b/src/components/Layout/Flex/Flex.stories.tsx
@@ -2,13 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 import * as React from 'react';
 
 import { Box, Flex } from '@/components';
-import { systemPropsControls } from '@/constants/storybook';
+import { flexOrGridSystemPropsControls, flexSystemPropsControls, systemPropsControls } from '@/constants/storybook';
 
 const meta: Meta<typeof Flex> = {
   component: Flex,
   args: {
     display: 'flex',
-    bg: 'ultra-light-grey',
     p: 'xxs',
     gap: 'm',
     justifyContent: 'center',
@@ -24,6 +23,8 @@ const meta: Meta<typeof Flex> = {
   },
   argTypes: {
     ...systemPropsControls,
+    ...flexOrGridSystemPropsControls,
+    ...flexSystemPropsControls,
   },
 };
 
diff --git a/src/components/Layout/Flex/Flex.tsx b/src/components/Layout/Flex/Flex.tsx
index 64522061..5f6f4d7b 100644
--- a/src/components/Layout/Flex/Flex.tsx
+++ b/src/components/Layout/Flex/Flex.tsx
@@ -3,22 +3,23 @@ import * as React from 'react';
 
 import type { BoxProps } from '@/components';
 import { Box } from '@/components';
+import { flexOrGridSystemProps, flexSystemProps } from '@/constants';
 import { polyRef } from '@/helpers/polyRef';
-import { flexBoxSystemClassName } from '@/helpers/systemPropsHelper';
-import type { DisplayType, TypeWithMediaQueriesType } from '@/types';
+import { flexOrGridSystemClassName, flexSystemClassName, omitSystemProps } from '@/helpers/systemPropsHelper';
+import type { DisplayType, FlexOrGridSystemProps, FlexSystemProps, TypeWithMediaQueriesType } from '@/types';
 
-export interface FlexProps extends Omit<BoxProps, 'display'> {
+export interface FlexProps extends Omit<BoxProps, 'display'>, FlexOrGridSystemProps, FlexSystemProps {
   display?: TypeWithMediaQueriesType<Extract<DisplayType, 'flex' | 'inline-flex'>>;
 }
 
 export const Flex = polyRef<'div', FlexProps>(
   ({ as = 'div', display = 'flex', className, children, ...props }, ref) => (
     <Box
-      {...props}
+      {...omitSystemProps({ props, systemPropNames: Object.keys({ ...flexOrGridSystemProps, ...flexSystemProps }) })}
       ref={ref}
       as={as}
       display={display}
-      className={classNames(flexBoxSystemClassName(props), className)}
+      className={classNames(flexOrGridSystemClassName(props), flexSystemClassName(props), className)}
     >
       {children}
     </Box>
diff --git a/src/components/Molecules/Blocks/CategoryEndingBlock/CategoryEndingBlock.stories.ts b/src/components/Molecules/Blocks/CategoryEndingBlock/CategoryEndingBlock.stories.ts
deleted file mode 100644
index a061b5b2..00000000
--- a/src/components/Molecules/Blocks/CategoryEndingBlock/CategoryEndingBlock.stories.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { CategoryEndingBlock } from './CategoryEndingBlock';
-
-const meta: Meta<typeof CategoryEndingBlock> = {
-  component: CategoryEndingBlock,
-  args: {
-    title: 'Quels types d’applications peuvent être développées en Javascript ?',
-    description: `Aujourd’hui, il est quasiment possible de tout faire avec le langage Javascript : applications web et mobile, progressive web apps, logiciels, applications métier, site web fullstack Javascript, API backend, jeux vidéos, applications TV et bien d’autres.<br /><br />En bref, Javascript est devenu le langage central du web et celui le plus utilisé sur GitHub depuis plusieurs années. Choisir Javascript pour son projet de <a href="#">développement web</a> est donc, dans la majorité des cas, une bonne idée !<br /><br />Chez Eleven Labs, nous pouvons vous accompagner dans tous vos besoins en développement d’applications web ou mobile en Javascript.`,
-    expertiseLink: {
-      label: 'Découvrir notre expertise en JavaScript',
-      href: '#',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof CategoryEndingBlock>;
-
-export const Overview: Story = {};
diff --git a/src/components/Molecules/Blocks/CategoryEndingBlock/CategoryEndingBlock.stories.tsx b/src/components/Molecules/Blocks/CategoryEndingBlock/CategoryEndingBlock.stories.tsx
new file mode 100644
index 00000000..48b02094
--- /dev/null
+++ b/src/components/Molecules/Blocks/CategoryEndingBlock/CategoryEndingBlock.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Link } from '@/components';
+
+import { CategoryEndingBlock } from './CategoryEndingBlock';
+
+const meta: Meta<typeof CategoryEndingBlock> = {
+  component: CategoryEndingBlock,
+  args: {
+    title: 'Quels types d’applications peuvent être développées en Javascript ?',
+    description: (
+      <>
+        Aujourd’hui, il est quasiment possible de tout faire avec le langage Javascript : applications web et mobile,
+        progressive web apps, logiciels, applications métier, site web fullstack Javascript, API backend, jeux vidéos,
+        applications TV et bien d’autres.
+        <br />
+        En bref, Javascript est devenu le langage central du web et celui le plus utilisé sur GitHub depuis plusieurs
+        années. Choisir Javascript pour son projet de <Link href="#">développement web</Link> est donc, dans la majorité
+        des cas, une bonne idée !<br />
+        <br />
+        Chez Eleven Labs, nous pouvons vous accompagner dans tous vos besoins en développement d’applications web ou
+        mobile en Javascript.
+      </>
+    ),
+    expertiseLink: {
+      label: 'Découvrir notre expertise en JavaScript',
+      href: '#',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CategoryEndingBlock>;
+
+export const Overview: Story = {};
diff --git a/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.stories.ts b/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.stories.tsx
similarity index 87%
rename from src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.stories.ts
rename to src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.stories.tsx
index cb916059..9ef6f468 100644
--- a/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.stories.ts
+++ b/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import BreadcrumbStories from '@/components/Atoms/Breadcrumb/Breadcrumb.stories';
 
@@ -10,7 +11,13 @@ const meta: Meta<typeof CategoryIntroBlock> = {
   component: CategoryIntroBlock,
   args: {
     breadcrumb: BreadcrumbStories.args as CategoryIntroBlockProps['breadcrumb'],
-    title: 'Nos articles et retours d’expérience<br />en développement Javascript',
+    title: (
+      <>
+        Nos articles et retours d’expérience
+        <br />
+        en développement Javascript
+      </>
+    ),
     description: `Javascript est un langage de programmation dynamique complet et doté d’une incroyable flexibilité ! Ce n’est pas pour rien que ce langage est aujourd'hui le plus utilisé par les développeurs à travers le monde. Dans cette catégorie, retrouvez tous les articles, retours d’expérience et tutoriels de nos astronautes autour de React.js, Node.js, Nest.js, Next.js, Vue.js, Svelte.js mais également des outils à utiliser pour faciliter votre delivery, du Design System et bien plus encore ! Bonne lecture.`,
   },
   parameters: {
diff --git a/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx b/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx
index 2432bb1f..aeae673a 100644
--- a/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx
+++ b/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx
@@ -14,10 +14,15 @@ export interface CategoryIntroBlockProps extends BoxProps {
 
 export const CategoryIntroBlock: React.FC<CategoryIntroBlockProps> = ({ title, description, breadcrumb, ...props }) => (
   <Box {...props} className="category-intro-block" color="white">
-    <Flex justifyContent="center" alignItems="center" className="category-intro-block__container">
+    <Flex
+      justifyContent="center"
+      alignItems="center"
+      px={{ xs: 'l', md: '0' }}
+      className="category-intro-block__container"
+    >
       <Box width="content-container" pt="m" pb="xxl">
         <Breadcrumb {...breadcrumb} />
-        <Heading mt="xl" size="xl" textTransform="uppercase">
+        <Heading mt="xl" size="xl">
           {title}
         </Heading>
         <Text mt="l">{description}</Text>
diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.stories.ts b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.stories.ts
deleted file mode 100644
index c886b883..00000000
--- a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { HomeIntroBlock } from './HomeIntroBlock';
-
-const meta: Meta<typeof HomeIntroBlock> = {
-  component: HomeIntroBlock,
-  args: {
-    intro: 'Explorons de nouveaux savoirs',
-    title: 'Le blog des astronautes<br />d’Eleven Labs sur les<br />nouvelles technologies',
-    description: `Dans ce blog, retrouvez les retours d’expériences, conseils et convictions de nos collaborateurs autour des dernières tendances technologiques en <a href="#">développement web et mobile</a>, <a href="#">agilité</a> et de <a href="#">l’écosystème Javascript</a> et <a href="#">PHP Symfony</a>. Découvrez également nos tutoriels pour apprendre pas à pas à créer différentes features !`,
-    elevenLabsLink: {
-      label: 'En savoir plus sur Eleven Labs',
-      href: '#',
-    },
-  },
-  parameters: {
-    layout: 'full',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof HomeIntroBlock>;
-
-export const Overview: Story = {};
diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.stories.tsx b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.stories.tsx
new file mode 100644
index 00000000..bc627139
--- /dev/null
+++ b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Link } from '@/components';
+
+import { HomeIntroBlock } from './HomeIntroBlock';
+
+const meta: Meta<typeof HomeIntroBlock> = {
+  component: HomeIntroBlock,
+  args: {
+    intro: 'Explorons de nouveaux savoirs',
+    title: (
+      <>
+        Le blog des astronautes
+        <br />
+        d’Eleven Labs sur les
+        <br />
+        nouvelles technologies
+      </>
+    ),
+    description: (
+      <>
+        Dans ce blog, retrouvez les retours d’expériences, conseils et convictions de nos collaborateurs autour des
+        dernières tendances technologiques en <Link href="#">développement web et mobile</Link>,{' '}
+        <Link href="#">agilité</Link> et de <Link href="#">l’écosystème Javascript</Link> et{' '}
+        <Link href="#">PHP Symfony</Link>. Découvrez également nos tutoriels pour apprendre pas à pas à créer
+        différentes features !
+      </>
+    ),
+    elevenLabsLink: {
+      label: 'En savoir plus sur Eleven Labs',
+      href: '#',
+    },
+  },
+  parameters: {
+    layout: 'full',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HomeIntroBlock>;
+
+export const Overview: Story = {};
diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
index 272bbe8b..25a5f1c1 100644
--- a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
+++ b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
@@ -27,10 +27,10 @@ export const HomeIntroBlock: React.FC<HomeIntroBlockProps> = ({
       ml={{ xs: '0', md: 'xxl' }}
       className="home-intro-block__container"
     >
-      <Text size="m" fontWeight="bold" color="info" textTransform="uppercase">
+      <Heading size="s" color="info">
         {intro}
-      </Text>
-      <Heading color="primary" textTransform="uppercase">
+      </Heading>
+      <Heading size="xl" color="primary">
         {title}
       </Heading>
       <Text>{description}</Text>
diff --git a/src/components/Molecules/Blocks/NotFoundBlock/NotFoundBlock.tsx b/src/components/Molecules/Blocks/NotFoundBlock/NotFoundBlock.tsx
index 49e10629..cb82eb11 100644
--- a/src/components/Molecules/Blocks/NotFoundBlock/NotFoundBlock.tsx
+++ b/src/components/Molecules/Blocks/NotFoundBlock/NotFoundBlock.tsx
@@ -13,7 +13,7 @@ export type NotFoundBlockProps = Omit<FlexProps, 'title'> & NotFoundBlockOptions
 export const NotFoundBlock: React.FC<NotFoundBlockProps> = ({ title, description, ...props }) => (
   <Flex {...props} flexDirection="column" alignItems="center">
     <img src="/imgs/not-found.png" alt="not-found" />
-    <Heading as="p" size="l" mt="s">
+    <Heading size="xl" mt="s">
       {title}
     </Heading>
     <Text size="s" mt="xxs">
diff --git a/src/components/Molecules/Cards/AuthorCard/AuthorCard.scss b/src/components/Molecules/Cards/AuthorCard/AuthorCard.scss
index d7e23a1a..7b4ffad6 100644
--- a/src/components/Molecules/Cards/AuthorCard/AuthorCard.scss
+++ b/src/components/Molecules/Cards/AuthorCard/AuthorCard.scss
@@ -1,3 +1,5 @@
+@use '@/styles/abstracts' as *;
+
 .author-card {
   --avatar-img-author-card: 72px;
 
@@ -5,6 +7,8 @@
   position: relative;
 
   &__link {
+    font-family: #{map-get-strict($token-variables, 'font-family', 'heading')};
+
     &::before {
       content: " ";
       position: absolute;
diff --git a/src/components/Molecules/Cards/AuthorCard/AuthorCard.tsx b/src/components/Molecules/Cards/AuthorCard/AuthorCard.tsx
index 6a6144ec..28709974 100644
--- a/src/components/Molecules/Cards/AuthorCard/AuthorCard.tsx
+++ b/src/components/Molecules/Cards/AuthorCard/AuthorCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { FlexProps } from '@/components';
-import { Box, Flex, Heading, Link, Text } from '@/components';
+import { Box, Flex, Link, Text } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
 import './AuthorCard.scss';
@@ -24,22 +24,15 @@ export const AuthorCard: React.FC<AuthorCardProps> = ({
     <Flex gap="s" flex="1">
       <img src={avatarImageUrl ?? '/imgs/astronaut.png'} alt={name} className="author-card__avatar-img" />
       <Box>
-        <Heading color="primary" size="s">
+        <Text color="primary" size="m" fontWeight="semi-bold">
           {name}
-        </Heading>
-        <Text as="div" size="xs" mt="xxs-3" style={{ fontStyle: 'italic' }}>
+        </Text>
+        <Text as="div" size="xs" mt="xxs-3" italic>
           {description}
         </Text>
       </Box>
     </Flex>
-    <Link
-      {...link}
-      px="m"
-      fontWeight="medium"
-      textTransform="uppercase"
-      data-internal-link="author"
-      className="author-card__link"
-    >
+    <Link {...link} px="m" textTransform="uppercase" data-internal-link="author" className="author-card__link">
       {linkLabel}
     </Link>
   </Flex>
diff --git a/src/components/Molecules/Cards/ContactCard/ContactCard.stories.ts b/src/components/Molecules/Cards/ContactCard/ContactCard.stories.tsx
similarity index 51%
rename from src/components/Molecules/Cards/ContactCard/ContactCard.stories.ts
rename to src/components/Molecules/Cards/ContactCard/ContactCard.stories.tsx
index a7143177..e670eb8c 100644
--- a/src/components/Molecules/Cards/ContactCard/ContactCard.stories.ts
+++ b/src/components/Molecules/Cards/ContactCard/ContactCard.stories.tsx
@@ -1,13 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Text } from '@/components';
 
 import { ContactCard } from './ContactCard';
 
 const meta: Meta<typeof ContactCard> = {
   component: ContactCard,
   args: {
-    title: 'Vous avez un projet ?',
-    subtitle: 'Contactez nous !',
-    description: `Vous souhaitez en savoir plus sur le sujet ? Organisons un échange !<br />Notre équipe d'experts répond à toutes vos questions.`,
+    title: (
+      <>
+        Vous souhaitez en savoir plus sur le sujet ?<br />
+        <Text as="span" fontWeight="bold">
+          Organisons un échange !
+        </Text>
+      </>
+    ),
+    description: "Notre équipe d'experts répond à toutes vos questions.",
     link: {
       label: 'Nous contacter',
       href: '#',
diff --git a/src/components/Molecules/Cards/ContactCard/ContactCard.tsx b/src/components/Molecules/Cards/ContactCard/ContactCard.tsx
index b4fcbd0c..fa6b1f26 100644
--- a/src/components/Molecules/Cards/ContactCard/ContactCard.tsx
+++ b/src/components/Molecules/Cards/ContactCard/ContactCard.tsx
@@ -8,14 +8,12 @@ import './ContactCard.scss';
 
 export type ContactCardProps = {
   title: React.ReactNode;
-  subtitle: React.ReactNode;
   description: React.ReactNode;
   link: { label: React.ReactNode } & ComponentPropsWithoutRef<'a'>;
 } & FlexProps;
 
 export const ContactCard: React.FC<ContactCardProps> = ({
   title,
-  subtitle,
   description,
   link: { label: linkLabel, ...link },
   ...props
@@ -26,13 +24,11 @@ export const ContactCard: React.FC<ContactCardProps> = ({
       justifyContent="center"
       alignItems="center"
       gap="m"
+      textAlign="center"
       className="contact-card__container"
     >
-      <Heading as="p" size="l" color="primary" textAlign="center">
-        {title}{' '}
-        <Text as="span" fontWeight="bold">
-          {subtitle}
-        </Text>
+      <Heading size="l" color="primary">
+        {title}
       </Heading>
       <Text size="s">{description}</Text>
       <Button as="a" {...link}>
diff --git a/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.stories.tsx b/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.stories.tsx
index f44b204b..9f3ba460 100644
--- a/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.stories.tsx
+++ b/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.stories.tsx
@@ -6,7 +6,11 @@ import { NewsletterCard } from './NewsletterCard';
 const meta: Meta<typeof NewsletterCard> = {
   component: NewsletterCard,
   args: {
-    title: 'Abonnez-vous <br />à notre AstroNews !',
+    title: (
+      <>
+        Abonnez-vous <br />à notre AstroNews !
+      </>
+    ),
     description:
       'Retrouvez dans notre newsletter mensuelle les dernières actualités tech, une sélection de ressources et le meilleur de twitter !',
     children: (
diff --git a/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx b/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx
index 090d0221..7169326d 100644
--- a/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx
+++ b/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx
@@ -33,7 +33,7 @@ export const NewsletterCard: React.FC<NewsletterCardProps> = ({
     className={classNames('newsletter-card', `newsletter-card--${variant}`)}
   >
     <Box className="newsletter-card__intro">
-      <Heading as="p" size="l" color="accent">
+      <Heading size="m" color="accent">
         {title}
       </Heading>
       <Icon name="underline" color="accent" width="56px" />
diff --git a/src/components/Molecules/Cards/PostCard/PostCard.scss b/src/components/Molecules/Cards/PostCard/PostCard.scss
index 612c678b..3b7fb8b5 100644
--- a/src/components/Molecules/Cards/PostCard/PostCard.scss
+++ b/src/components/Molecules/Cards/PostCard/PostCard.scss
@@ -38,6 +38,7 @@
   }
 
   &__tutoriel-tag {
+    font-family: #{map-get-strict($token-variables, 'font-family', 'heading')};
     background-color: #{map-get-strict($token-variables, 'color', 'accent')};
     border-radius: 2px;
   }
diff --git a/src/components/Molecules/Cards/PostCard/PostCard.tsx b/src/components/Molecules/Cards/PostCard/PostCard.tsx
index 9bee3912..45dfff4f 100644
--- a/src/components/Molecules/Cards/PostCard/PostCard.tsx
+++ b/src/components/Molecules/Cards/PostCard/PostCard.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 import type { BoxProps } from '@/components';
-import { Box, Heading, Skeleton, Text } from '@/components';
+import { Box, Skeleton, Text } from '@/components';
 import { PostMetadata } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
@@ -40,10 +40,10 @@ export const PostCard: React.FC<PostCardProps> = ({
 }) => (
   <Box as="article" {...props} p="m" className={classNames('post-preview', `post-preview--${variant}`)}>
     <Skeleton isLoading={isLoading}>
-      <Heading as="h2" size="s" className="post-preview__heading">
-        <Heading as="a" {...link} size="m" data-internal-link="post" className="post-preview__link">
+      <Box as="h2" className="post-preview__heading">
+        <Text as="a" {...link} size="m" data-internal-link="post" className="post-preview__link">
           {title}
-        </Heading>
+        </Text>
         {contentType === 'tutorial' && (
           <Text
             size="xs"
@@ -57,7 +57,7 @@ export const PostCard: React.FC<PostCardProps> = ({
             {tutorialLabel}
           </Text>
         )}
-      </Heading>
+      </Box>
     </Skeleton>
     <PostMetadata
       variant="primary"
diff --git a/src/components/Molecules/Cards/SummaryCard/SummaryCard.tsx b/src/components/Molecules/Cards/SummaryCard/SummaryCard.tsx
index 2b31318c..9917e464 100644
--- a/src/components/Molecules/Cards/SummaryCard/SummaryCard.tsx
+++ b/src/components/Molecules/Cards/SummaryCard/SummaryCard.tsx
@@ -26,7 +26,7 @@ export const SummaryCard: React.FC<SummaryCardProps> = ({
   ...props
 }) => (
   <Box bg="white" p="m" className={classNames('summary-card', { [`summary-card--${variant}`]: variant })} {...props}>
-    <Heading size="l" fontWeight="bold" color="primary">
+    <Heading size="m" color="primary">
       {title}
     </Heading>
     <Flex flexDirection="column" mt="m">
@@ -35,7 +35,7 @@ export const SummaryCard: React.FC<SummaryCardProps> = ({
           <Flex
             as="a"
             gap="s"
-            fontWeight="medium"
+            fontWeight="semi-bold"
             className={classNames('summary-card__section', {
               'summary-card__section--active': sectionActive === name,
             })}
diff --git a/src/components/Molecules/Link/Link.scss b/src/components/Molecules/Link/Link.scss
index a4c089d5..7b5373cb 100644
--- a/src/components/Molecules/Link/Link.scss
+++ b/src/components/Molecules/Link/Link.scss
@@ -1,8 +1,10 @@
 @use '@/styles/abstracts' as *;
 
 .link {
+  text-decoration-line: underline;
+  font-weight: #{map-get-strict($token-variables, 'font-weight', 'semi-bold')};
+
   &:hover {
-    font-weight: #{map-get-strict($token-variables, 'font-weight', 'medium')};
-    text-decoration-line: underline;
+    text-decoration-line: none;
   }
 }
diff --git a/src/components/Molecules/PostMetadata/PostMetadata.scss b/src/components/Molecules/PostMetadata/PostMetadata.scss
index f69064e9..5a0f870e 100644
--- a/src/components/Molecules/PostMetadata/PostMetadata.scss
+++ b/src/components/Molecules/PostMetadata/PostMetadata.scss
@@ -2,12 +2,14 @@
 
 .post-metadata {
   &--primary {
+    font-family: #{map-get-strict($token-variables, 'font-family', 'heading')};
     color: #{map-get-strict($token-variables, 'color', 'info')};
     font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
     text-transform: uppercase;
   }
 
   &--secondary {
-    font-weight: #{map-get-strict($token-variables, 'font-weight', 'medium')};
+    color: #{map-get-strict($token-variables, 'color', 'primary')};
+    font-weight: #{map-get-strict($token-variables, 'font-weight', 'semi-bold')};
   }
 }
diff --git a/src/components/Molecules/PostMetadata/PostMetadata.tsx b/src/components/Molecules/PostMetadata/PostMetadata.tsx
index f893af5b..784eb44e 100644
--- a/src/components/Molecules/PostMetadata/PostMetadata.tsx
+++ b/src/components/Molecules/PostMetadata/PostMetadata.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { Fragment } from 'react';
 
-import { Flex, Icon, Skeleton, Text } from '@/components';
+import { Flex, Icon, Link, Skeleton, Text } from '@/components';
 import type { ComponentPropsWithoutRef, SpacingSystemProps } from '@/types';
 
 import './PostMetadata.scss';
@@ -63,7 +63,7 @@ export const PostMetadata: React.FC<PostMetadataProps> = ({
                 {variant === 'secondary' && <Icon name="person" size="24px" color="light-grey" />}
                 {authors.map(({ username, name, link }, authorIndex) => (
                   <Fragment key={username}>
-                    <Text {...(link ? { as: 'a', ...link } : { as: 'span' })}>{name}</Text>
+                    {link ? <Link {...link}>{name}</Link> : <Text as="span">{name}</Text>}
                     {authorIndex !== authors.length - 1 && <Text as="span">{'&'}</Text>}
                   </Fragment>
                 ))}
@@ -90,7 +90,7 @@ export const PostMetadata: React.FC<PostMetadataProps> = ({
     <Flex
       {...props}
       alignItems="center"
-      textSize="xs"
+      textSize="s"
       flexWrap="wrap"
       gap={variant === 'secondary' ? 's' : 'xxs'}
       className={classNames('post-metadata', { [`post-metadata--${variant}`]: variant })}
diff --git a/src/components/Molecules/SearchField/SearchField.scss b/src/components/Molecules/SearchField/SearchField.scss
index c96928f0..6c704332 100644
--- a/src/components/Molecules/SearchField/SearchField.scss
+++ b/src/components/Molecules/SearchField/SearchField.scss
@@ -10,7 +10,7 @@
     width: 100%;
     padding: #{map-get-strict($token-variables, 'spacing', 'xs')} calc(#{map-get-strict($token-variables, 'spacing', 'xxl')} + #{map-get-strict($token-variables, 'spacing', 'm')}) #{map-get-strict($token-variables, 'spacing', 'xs')} #{map-get-strict($token-variables, 'spacing', 'xs')};
     font-family: #{map-get-strict($token-variables, 'font-family', 'base')};
-    font-size: var(--font-size-input, #{map-get-strict($token-variables, 'font-size', 's')});
+    font-size: var(--font-size-input, #{map-get-strict($token-variables, 'typography', 'text', 'xs', 'font-size')});
     line-height: #{map-get-strict($token-variables, 'line-height', 'large')};
     border-width: var(--border-width-input-search-field, 2px);
     border-style: solid;
@@ -19,7 +19,7 @@
     background-color: #{map-get-strict($token-variables, 'color', 'secondary')};
 
     @include create-media-queries('md') {
-      --font-size-input: #{map-get-strict($token-variables, 'font-size', 'xs')};
+      --font-size-input: #{map-get-strict($token-variables, 'desktop', 'typography', 'text', 'xs', 'font-size')};
     }
 
     &, &::placeholder {
diff --git a/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx b/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx
index e84f0169..c03f2acc 100644
--- a/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx
+++ b/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx
@@ -90,7 +90,7 @@ export const AutocompleteResult = polyRef<'div', AutocompleteResultProps>(
       {items.length === 0 && searchNotFound && (
         <Box textAlign="center" px="xl" py="m">
           <img src="/imgs/not-found.png" alt="not-found" />
-          <Heading as="p" size="m" mt="s">
+          <Heading size="m" mt="s">
             {searchNotFound.title}
           </Heading>
           <Text size="xs" mt="xxs">
diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts
index c62cb706..f2061904 100644
--- a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts
+++ b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts
@@ -15,6 +15,9 @@ const meta: Meta<typeof LastArticlesBlock> = {
       authors: [{ username: 'jdoe', name: 'J. Doe' }],
       excerpt:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',
+      link: {
+        href: '#',
+      },
     })),
     linkSeeMore: { label: 'Voir tous les articles', href: '#' },
   },
diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx
index 948e4ca0..f040c7e5 100644
--- a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx
+++ b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx
@@ -25,16 +25,16 @@ export const LastArticlesBlock: React.FC<LastArticlesBlockProps> = ({
     width={{ md: 'content-container' }}
     className="last-articles-block"
   >
-    <Heading as="p" size="m" color="primary">
+    <Heading size="m" color="primary">
       {title}
     </Heading>
-    <Box mt="l" gap="m" className="last-articles-block__post-list">
+    <Flex mt="l" gap="m" className="last-articles-block__post-list">
       {posts.map((post, index) => (
         <React.Fragment key={post?.slug ?? index}>
           <PostCard {...(post || {})} />
         </React.Fragment>
       ))}
-    </Box>
+    </Flex>
     <Flex justifyContent="center" alignItems="center">
       <Button mt="l" as="a" {...linkSeeMore}>
         {labelLinkSeeMore}
diff --git a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts
index 29e928b8..13c62739 100644
--- a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts
+++ b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts
@@ -18,6 +18,9 @@ const meta: Meta<typeof LastTutorialsBlock> = {
       authors: [{ username: 'jdoe', name: 'J. Doe' }],
       excerpt:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel tellus in molestie. Curabitur malesuada sodales consectetur. Aliquam convallis nec lacus in euismod. Vestibulum id eros vitae tellus sodales ultricies eget eu ipsum.',
+      link: {
+        href: '#',
+      },
     })),
     linkSeeMore: { label: 'Découvrir tous nos tutoriels', href: '#' },
   },
diff --git a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx
index 00242ba6..37c5b6df 100644
--- a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx
+++ b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import type { FlexProps, PostCardProps } from '@/components';
+import { Icon } from '@/components';
 import { Flex, PostCard } from '@/components';
 import { Box, Button, Heading, Text } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
@@ -36,21 +37,20 @@ export const LastTutorialsBlock: React.FC<LastTutorialsBlockProps> = ({
       className="last-tutorials-block"
     >
       <Box>
-        <Heading as="p" size="m">
-          {title}
-        </Heading>
+        <Heading size="m">{title}</Heading>
+        <Icon name="underline" color="white" width="56px" />
         <Text mt="l">{description}</Text>
-        <Button mt="l" as="a" {...linkSeeMore}>
+        <Button mt="l" as="a" variant="accent" {...linkSeeMore}>
           {labelLinkSeeMore}
         </Button>
       </Box>
-      <Box gap="l" className="last-tutorials-block__post-list">
+      <Flex gap="l" className="last-tutorials-block__post-list">
         {posts.map((post, index) => (
           <React.Fragment key={post?.slug ?? index}>
             <PostCard variant="secondary" tutorialLabel={tutorialLabel} {...(post || {})} />
           </React.Fragment>
         ))}
-      </Box>
+      </Flex>
     </Flex>
   </Box>
 );
diff --git a/src/components/Organisms/Footer/Footer.tsx b/src/components/Organisms/Footer/Footer.tsx
index 2f267dd9..37d85a81 100644
--- a/src/components/Organisms/Footer/Footer.tsx
+++ b/src/components/Organisms/Footer/Footer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Button, Flex, Icon, Link, Logo, Text } from '@/components';
+import { Box, Button, Flex, Heading, Icon, Link, Logo, Text } from '@/components';
 import type { ComponentPropsWithoutRef, IconNameType } from '@/types';
 
 import './Footer.scss';
@@ -42,12 +42,12 @@ export const Footer: React.FC<FooterProps> = ({
       flexDirection={{ xs: 'column', md: 'row' }}
       justifyContent="center"
       alignItems="center"
-      py="xs"
+      py="m"
       bg="primary-very-dark"
       className="footer__intro"
       gap="s"
     >
-      <Text fontWeight="bold">{introBlock.title}</Text>
+      <Heading size="s">{introBlock.title}</Heading>
       <Box as="a" {...elevenLabsSiteLink} className="footer__intro-link">
         {introBlock.description}
       </Box>
diff --git a/src/components/Organisms/Header/Header.scss b/src/components/Organisms/Header/Header.scss
index e41f693c..213d086e 100644
--- a/src/components/Organisms/Header/Header.scss
+++ b/src/components/Organisms/Header/Header.scss
@@ -20,6 +20,19 @@
   &__menu {
     display: flex;
     text-transform: uppercase;
+    font-family: #{map-get-strict($token-variables, 'font-family', 'heading')};
+    font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
+  }
+
+  &__menu-item {
+    color: #{map-get-strict($token-variables, 'color', 'info')};
+    font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
+    text-decoration: none;
+
+    &:hover {
+      color: #{map-get-strict($token-variables, 'color', 'primary')};
+      text-decoration: underline;
+    }
   }
 
   @include create-media-queries('md', 'max') {
@@ -42,7 +55,6 @@
 
     &__menu-item {
         padding: #{map-get-strict($token-variables, 'spacing', 'xs')} #{map-get-strict($token-variables, 'spacing', 'm')};
-        color: black;
         border-bottom: 0.5px solid #{map-get-strict($token-variables, 'color', 'secondary-dark')};
     }
   }
diff --git a/src/components/Organisms/Header/Header.tsx b/src/components/Organisms/Header/Header.tsx
index 873f08bd..f4935589 100644
--- a/src/components/Organisms/Header/Header.tsx
+++ b/src/components/Organisms/Header/Header.tsx
@@ -43,9 +43,9 @@ export const Header: React.FC<HeaderProps> = ({
       {hasTutorial && (
         <>
           <Box className="header__separator" />
-          <Link as="a" {...tutorialLink} data-internal-link="category" className="header__menu-item">
+          <Box as="a" {...tutorialLink} data-internal-link="category" className="header__menu-item">
             {tutorialLinkLabel}
-          </Link>
+          </Box>
         </>
       )}
       <Flex justifyContent="center" alignItems="center" mt="m" hiddenAbove="md">
diff --git a/src/constants/storybook/flexBoxSystemPropsControls.ts b/src/constants/storybook/flexBoxSystemPropsControls.ts
deleted file mode 100644
index 471076f9..00000000
--- a/src/constants/storybook/flexBoxSystemPropsControls.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  alignContentCssPropertyNameList,
-  alignItemsCssPropertyNameList,
-  alignSelfCssPropertyNameList,
-  flexBoxSystemProps,
-  flexCssPropertyNameList,
-  flexDirectionCssPropertyNameList,
-  flexWrapCssPropertyNameList,
-  justifyContentCssPropertyNameList,
-  spacingTokenNameList,
-} from '@/constants';
-import { createControls } from '@/helpers/storybookHelper';
-import type { FlexBoxSystemProps } from '@/types/SystemProps';
-
-export const flexBoxSystemPropsControls = createControls<FlexBoxSystemProps>({
-  category: 'Flex Box System Props',
-  props: flexBoxSystemProps,
-  options: {
-    alignContent: alignContentCssPropertyNameList,
-    alignItems: alignItemsCssPropertyNameList,
-    alignSelf: alignSelfCssPropertyNameList,
-    flexBasis: flexWrapCssPropertyNameList,
-    flex: flexCssPropertyNameList,
-    flexDirection: flexDirectionCssPropertyNameList,
-    flexWrap: flexWrapCssPropertyNameList,
-    gap: spacingTokenNameList,
-    gapX: spacingTokenNameList,
-    gapY: spacingTokenNameList,
-    justifyContent: justifyContentCssPropertyNameList,
-  },
-});
diff --git a/src/constants/storybook/flexItemSystemPropsControls.ts b/src/constants/storybook/flexItemSystemPropsControls.ts
new file mode 100644
index 00000000..c174751a
--- /dev/null
+++ b/src/constants/storybook/flexItemSystemPropsControls.ts
@@ -0,0 +1,12 @@
+import { flexCssPropertyNameList, flexItemSystemProps, flexWrapCssPropertyNameList } from '@/constants';
+import { createControls } from '@/helpers/storybookHelper';
+import type { FlexItemSystemProps } from '@/types/SystemProps';
+
+export const flexItemSystemPropsControls = createControls<FlexItemSystemProps>({
+  category: 'Flex Item System Props',
+  props: flexItemSystemProps,
+  options: {
+    flexBasis: flexWrapCssPropertyNameList,
+    flex: flexCssPropertyNameList,
+  },
+});
diff --git a/src/constants/storybook/flexOrGridItemSystemPropsControls.ts b/src/constants/storybook/flexOrGridItemSystemPropsControls.ts
new file mode 100644
index 00000000..8f902d50
--- /dev/null
+++ b/src/constants/storybook/flexOrGridItemSystemPropsControls.ts
@@ -0,0 +1,11 @@
+import { alignSelfCssPropertyNameList, flexOrGridItemSystemProps } from '@/constants';
+import { createControls } from '@/helpers/storybookHelper';
+import type { FlexOrGridItemSystemProps } from '@/types/SystemProps';
+
+export const flexOrGridItemSystemPropsControls = createControls<FlexOrGridItemSystemProps>({
+  category: 'Flex Or Grid Item System Props',
+  props: flexOrGridItemSystemProps,
+  options: {
+    alignSelf: alignSelfCssPropertyNameList,
+  },
+});
diff --git a/src/constants/storybook/flexOrGridSystemPropsControls.ts b/src/constants/storybook/flexOrGridSystemPropsControls.ts
new file mode 100644
index 00000000..fa5f929c
--- /dev/null
+++ b/src/constants/storybook/flexOrGridSystemPropsControls.ts
@@ -0,0 +1,22 @@
+import {
+  alignContentCssPropertyNameList,
+  alignItemsCssPropertyNameList,
+  flexOrGridSystemProps,
+  justifyContentCssPropertyNameList,
+  spacingTokenNameList,
+} from '@/constants';
+import { createControls } from '@/helpers/storybookHelper';
+import type { FlexOrGridSystemProps } from '@/types/SystemProps';
+
+export const flexOrGridSystemPropsControls = createControls<FlexOrGridSystemProps>({
+  category: 'Flex Or Grid System Props',
+  props: flexOrGridSystemProps,
+  options: {
+    alignContent: alignContentCssPropertyNameList,
+    alignItems: alignItemsCssPropertyNameList,
+    gap: spacingTokenNameList,
+    gapX: spacingTokenNameList,
+    gapY: spacingTokenNameList,
+    justifyContent: justifyContentCssPropertyNameList,
+  },
+});
diff --git a/src/constants/storybook/flexSystemPropsControls.ts b/src/constants/storybook/flexSystemPropsControls.ts
new file mode 100644
index 00000000..22e1ddd4
--- /dev/null
+++ b/src/constants/storybook/flexSystemPropsControls.ts
@@ -0,0 +1,12 @@
+import { flexDirectionCssPropertyNameList, flexSystemProps, flexWrapCssPropertyNameList } from '@/constants';
+import { createControls } from '@/helpers/storybookHelper';
+import type { FlexSystemProps } from '@/types/SystemProps';
+
+export const flexSystemPropsControls = createControls<FlexSystemProps>({
+  category: 'Flex System Props',
+  props: flexSystemProps,
+  options: {
+    flexDirection: flexDirectionCssPropertyNameList,
+    flexWrap: flexWrapCssPropertyNameList,
+  },
+});
diff --git a/src/constants/storybook/hiddenSystemPropsControls.ts b/src/constants/storybook/hiddenSystemPropsControls.ts
deleted file mode 100644
index 192c9981..00000000
--- a/src/constants/storybook/hiddenSystemPropsControls.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { hiddenSystemProps, mediaQueriesList } from '@/constants';
-import { createControls } from '@/helpers/storybookHelper';
-import type { HiddenSystemProps } from '@/types';
-
-export const hiddenSystemPropsControls = createControls<HiddenSystemProps>({
-  category: 'Hidden System Props',
-  props: hiddenSystemProps,
-  options: {
-    hiddenAbove: mediaQueriesList,
-    hiddenBelow: mediaQueriesList,
-  },
-});
diff --git a/src/constants/storybook/index.ts b/src/constants/storybook/index.ts
index 5aa003d6..bc89d679 100644
--- a/src/constants/storybook/index.ts
+++ b/src/constants/storybook/index.ts
@@ -1,6 +1,8 @@
 export * from './spacingSystemPropsControls';
 export * from './colorSystemPropsControls';
 export * from './typographySystemPropsControls';
-export * from './flexBoxSystemPropsControls';
+export * from './flexOrGridSystemPropsControls';
+export * from './flexSystemPropsControls';
+export * from './flexOrGridItemSystemPropsControls';
+export * from './flexItemSystemPropsControls';
 export * from './systemPropsControls';
-export * from './hiddenSystemPropsControls';
diff --git a/src/constants/storybook/layoutSystemPropsControls.ts b/src/constants/storybook/layoutSystemPropsControls.ts
index 1d552197..b1ac9f60 100644
--- a/src/constants/storybook/layoutSystemPropsControls.ts
+++ b/src/constants/storybook/layoutSystemPropsControls.ts
@@ -1,4 +1,10 @@
-import { displayCssPropertyNameList, heightTokenNameList, layoutSystemProps, widthTokenNameList } from '@/constants';
+import {
+  displayCssPropertyNameList,
+  heightTokenNameList,
+  layoutSystemProps,
+  mediaQueriesList,
+  widthTokenNameList,
+} from '@/constants';
 import { createControls } from '@/helpers/storybookHelper';
 import type { LayoutSystemProps } from '@/types/SystemProps';
 
@@ -9,9 +15,7 @@ export const layoutSystemPropsControls = createControls<LayoutSystemProps>({
     display: displayCssPropertyNameList,
     width: widthTokenNameList,
     height: heightTokenNameList,
-    minWidth: widthTokenNameList,
-    maxWidth: widthTokenNameList,
-    minHeight: heightTokenNameList,
-    maxHeight: heightTokenNameList,
+    hiddenAbove: mediaQueriesList,
+    hiddenBelow: mediaQueriesList,
   },
 });
diff --git a/src/constants/storybook/systemPropsControls.ts b/src/constants/storybook/systemPropsControls.ts
index 72ca1caf..09b51744 100644
--- a/src/constants/storybook/systemPropsControls.ts
+++ b/src/constants/storybook/systemPropsControls.ts
@@ -1,10 +1,10 @@
 import type { ArgTypes } from '@storybook/csf';
 
-import { hiddenSystemPropsControls } from '@/constants/storybook/hiddenSystemPropsControls';
 import type { SystemProps } from '@/types';
 
 import { colorSystemPropsControls } from './colorSystemPropsControls';
-import { flexBoxSystemPropsControls } from './flexBoxSystemPropsControls';
+import { flexItemSystemPropsControls } from './flexItemSystemPropsControls';
+import { flexOrGridItemSystemPropsControls } from './flexOrGridItemSystemPropsControls';
 import { layoutSystemPropsControls } from './layoutSystemPropsControls';
 import { spacingSystemPropsControls } from './spacingSystemPropsControls';
 import { typographySystemPropsControls } from './typographySystemPropsControls';
@@ -13,7 +13,7 @@ export const systemPropsControls: Partial<ArgTypes<SystemProps>> = {
   ...spacingSystemPropsControls,
   ...colorSystemPropsControls,
   ...layoutSystemPropsControls,
-  ...hiddenSystemPropsControls,
-  ...flexBoxSystemPropsControls,
+  ...flexOrGridItemSystemPropsControls,
+  ...flexItemSystemPropsControls,
   ...typographySystemPropsControls,
 };
diff --git a/src/constants/systemProps/flexBoxSystemProps.ts b/src/constants/systemProps/flexBoxSystemProps.ts
deleted file mode 100644
index 8622bbd1..00000000
--- a/src/constants/systemProps/flexBoxSystemProps.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { FlexBoxSystemProps } from '@/types';
-
-export const flexBoxSystemProps: Record<keyof FlexBoxSystemProps, readonly string[]> = {
-  alignItems: ['align-items'],
-  alignContent: ['align-content'],
-  justifyContent: ['justify-content'],
-  gap: ['gap'],
-  gapX: ['row-gap'],
-  gapY: ['col-gap'],
-  flexDirection: ['flex-direction'],
-  flexBasis: ['flex-basis'],
-  flexWrap: ['flex-wrap'],
-  flex: ['flex'],
-  alignSelf: ['align-self'],
-};
diff --git a/src/constants/systemProps/flexItemSystemProps.ts b/src/constants/systemProps/flexItemSystemProps.ts
new file mode 100644
index 00000000..167e8b27
--- /dev/null
+++ b/src/constants/systemProps/flexItemSystemProps.ts
@@ -0,0 +1,6 @@
+import type { FlexItemSystemProps } from '@/types';
+
+export const flexItemSystemProps: Record<keyof FlexItemSystemProps, readonly string[]> = {
+  flexBasis: ['flex-basis'],
+  flex: ['flex'],
+};
diff --git a/src/constants/systemProps/flexOrGridItemSystemProps.ts b/src/constants/systemProps/flexOrGridItemSystemProps.ts
new file mode 100644
index 00000000..d1da23cc
--- /dev/null
+++ b/src/constants/systemProps/flexOrGridItemSystemProps.ts
@@ -0,0 +1,5 @@
+import type { FlexOrGridItemSystemProps } from '@/types';
+
+export const flexOrGridItemSystemProps: Record<keyof FlexOrGridItemSystemProps, readonly string[]> = {
+  alignSelf: ['align-self'],
+};
diff --git a/src/constants/systemProps/flexOrGridSystemProps.ts b/src/constants/systemProps/flexOrGridSystemProps.ts
new file mode 100644
index 00000000..a7318053
--- /dev/null
+++ b/src/constants/systemProps/flexOrGridSystemProps.ts
@@ -0,0 +1,10 @@
+import type { FlexOrGridSystemProps } from '@/types';
+
+export const flexOrGridSystemProps: Record<keyof FlexOrGridSystemProps, readonly string[]> = {
+  alignItems: ['align-items'],
+  alignContent: ['align-content'],
+  justifyContent: ['justify-content'],
+  gap: ['gap'],
+  gapX: ['row-gap'],
+  gapY: ['col-gap'],
+};
diff --git a/src/constants/systemProps/flexSystemProps.ts b/src/constants/systemProps/flexSystemProps.ts
new file mode 100644
index 00000000..c0dde1f6
--- /dev/null
+++ b/src/constants/systemProps/flexSystemProps.ts
@@ -0,0 +1,6 @@
+import type { FlexSystemProps } from '@/types';
+
+export const flexSystemProps: Record<keyof FlexSystemProps, readonly string[]> = {
+  flexDirection: ['flex-direction'],
+  flexWrap: ['flex-wrap'],
+};
diff --git a/src/constants/systemProps/hiddenSystemProps.ts b/src/constants/systemProps/hiddenSystemProps.ts
deleted file mode 100644
index b1d47586..00000000
--- a/src/constants/systemProps/hiddenSystemProps.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { HiddenSystemProps } from '@/types';
-
-export const hiddenSystemProps: Record<keyof HiddenSystemProps, readonly string[]> = {
-  hiddenBelow: ['display'],
-  hiddenAbove: ['display'],
-};
diff --git a/src/constants/systemProps/index.ts b/src/constants/systemProps/index.ts
index 9a087331..76ed507a 100644
--- a/src/constants/systemProps/index.ts
+++ b/src/constants/systemProps/index.ts
@@ -2,6 +2,8 @@ export * from './colorSystemProps';
 export * from './spacingSystemProps';
 export * from './systemProps';
 export * from './typographySystemProps';
-export * from './flexBoxSystemProps';
 export * from './layoutSystemProps';
-export * from './hiddenSystemProps';
+export * from './flexOrGridSystemProps';
+export * from './flexSystemProps';
+export * from './flexOrGridItemSystemProps';
+export * from './flexItemSystemProps';
diff --git a/src/constants/systemProps/layoutSystemProps.ts b/src/constants/systemProps/layoutSystemProps.ts
index 4a85d832..9bdd228f 100644
--- a/src/constants/systemProps/layoutSystemProps.ts
+++ b/src/constants/systemProps/layoutSystemProps.ts
@@ -4,8 +4,6 @@ export const layoutSystemProps: Record<keyof LayoutSystemProps, readonly string[
   display: ['display'],
   width: ['width'],
   height: ['height'],
-  minWidth: ['min-width'],
-  maxWidth: ['max-width'],
-  minHeight: ['min-height'],
-  maxHeight: ['max-height'],
+  hiddenBelow: ['display'],
+  hiddenAbove: ['display'],
 };
diff --git a/src/constants/systemProps/systemProps.ts b/src/constants/systemProps/systemProps.ts
index d02a4f9f..a7d6deed 100644
--- a/src/constants/systemProps/systemProps.ts
+++ b/src/constants/systemProps/systemProps.ts
@@ -1,17 +1,17 @@
 import type { SystemProps } from '@/types';
 
 import { colorSystemProps } from './colorSystemProps';
-import { flexBoxSystemProps } from './flexBoxSystemProps';
-import { hiddenSystemProps } from './hiddenSystemProps';
+import { flexItemSystemProps } from './flexItemSystemProps';
+import { flexOrGridItemSystemProps } from './flexOrGridItemSystemProps';
 import { layoutSystemProps } from './layoutSystemProps';
 import { spacingSystemProps } from './spacingSystemProps';
 import { typographySystemProps } from './typographySystemProps';
 
 export const systemProps: Record<keyof SystemProps, readonly string[]> = {
   ...spacingSystemProps,
-  ...flexBoxSystemProps,
+  ...flexOrGridItemSystemProps,
   ...colorSystemProps,
   ...typographySystemProps,
   ...layoutSystemProps,
-  ...hiddenSystemProps,
+  ...flexItemSystemProps,
 };
diff --git a/src/constants/tokenNameList.ts b/src/constants/tokenNameList.ts
index 1d9fd889..4852217f 100644
--- a/src/constants/tokenNameList.ts
+++ b/src/constants/tokenNameList.ts
@@ -23,8 +23,8 @@ export const fontWeightTokenNameList = Object.keys(tokenVariables['font-weight']
 export const iconTokenNameList = Object.keys(tokenVariables['asset']['icon']) as ReadonlyArray<IconNameType>;
 
 export const headingSizeTokenNameList = Object.keys(
-  tokenVariables['mobile']['typography']['heading'] || tokenVariables['desktop']['typography']['heading']
+  tokenVariables['typography']['heading'] || tokenVariables['desktop']['typography']['heading']
 ) as ReadonlyArray<HeadingSizeType>;
 export const textSizeTokenNameList = Object.keys(
-  tokenVariables['mobile']['typography']['text'] || tokenVariables['desktop']['typography']['text']
+  tokenVariables['typography']['text'] || tokenVariables['desktop']['typography']['text']
 ) as ReadonlyArray<TextSizeType>;
diff --git a/src/designTokens/typography/font-size.tokens.json b/src/designTokens/typography/font-size.tokens.json
deleted file mode 100644
index 5a00a2a9..00000000
--- a/src/designTokens/typography/font-size.tokens.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "font-size": {
-    "xxs": {
-      "value": "12px"
-    },
-    "xs": {
-      "value": "14px"
-    },
-    "s": {
-      "value": "16px"
-    },
-    "m": {
-      "value": "18px"
-    },
-    "l": {
-      "value": "20px"
-    },
-    "xl": {
-      "value": "22px"
-    },
-    "xxl": {
-      "value": "24px"
-    },
-    "xxl-2": {
-      "value": "26px"
-    },
-    "xxl-3": {
-      "value": "28px"
-    }
-  }
-}
diff --git a/src/designTokens/typography/heading.tokens.json b/src/designTokens/typography/heading.tokens.json
index 92fe4899..1d4fb1b1 100644
--- a/src/designTokens/typography/heading.tokens.json
+++ b/src/designTokens/typography/heading.tokens.json
@@ -7,40 +7,41 @@
         },
         "line-height": {
           "value": "{line-height.base.value}"
+        }
+      },
+      "s": {
+        "font-size": {
+          "value": "20px"
         },
         "font-weight": {
-          "value": "{font-weight.medium.value}"
+          "value": "{font-weight.bold.value}"
+        },
+        "text-transform": {
+          "value": "uppercase"
         }
       },
-      "xl": {
+      "m": {
+        "font-size": {
+          "value": "{typography.heading.s.font-size.value} + 8"
+        },
         "font-weight": {
           "value": "{font-weight.bold.value}"
         }
-      }
-    }
-  },
-  "mobile": {
-    "typography": {
-      "heading": {
-        "s": {
-          "font-size": {
-            "value": "{font-size.s.value}"
-          }
-        },
-        "m": {
-          "font-size": {
-            "value": "{font-size.l.value}"
-          }
+      },
+      "l": {
+        "font-size": {
+          "value": "{typography.heading.m.font-size.value} + 8"
+        }
+      },
+      "xl": {
+        "font-size": {
+          "value": "{typography.heading.m.font-size.value} * 2"
         },
-        "l": {
-          "font-size": {
-            "value": "{font-size.xl.value}"
-          }
+        "font-weight": {
+          "value": "{font-weight.regular.value}"
         },
-        "xl": {
-          "font-size": {
-            "value": "{font-size.xxl.value}"
-          }
+        "text-transform": {
+          "value": "uppercase"
         }
       }
     }
@@ -50,22 +51,22 @@
       "heading": {
         "s": {
           "font-size": {
-            "value": "{font-size.m.value}"
+            "value": "24px"
           }
         },
         "m": {
           "font-size": {
-            "value": "{font-size.xl.value}"
+            "value": "{desktop.typography.heading.s.font-size.value} + 8"
           }
         },
         "l": {
           "font-size": {
-            "value": "{font-size.xxl-2.value}"
+            "value": "{desktop.typography.heading.m.font-size.value} + 8"
           }
         },
         "xl": {
           "font-size": {
-            "value": "{font-size.xxl-3.value}"
+            "value": "{desktop.typography.heading.m.font-size.value} * 2"
           }
         }
       }
diff --git a/src/designTokens/typography/text.tokens.json b/src/designTokens/typography/text.tokens.json
index f33126d7..764b2f34 100644
--- a/src/designTokens/typography/text.tokens.json
+++ b/src/designTokens/typography/text.tokens.json
@@ -7,43 +7,27 @@
         }
       },
       "xs": {
-        "line-height": {
-          "value": "{line-height.large.value}"
+        "font-size": {
+          "value": "12px"
+        },
+        "icon-size": {
+          "value": "{typography.text.xs.font-size.value} + 2"
         }
       },
-      "m": {
-        "line-height": {
-          "value": "{line-height.large.value}"
-        }
-      }
-    }
-  },
-  "mobile": {
-    "typography": {
-      "text": {
-        "xs": {
-          "font-size": {
-            "value": "{font-size.xxs}"
-          },
-          "icon-size": {
-            "value": "{font-size.xs.value}"
-          }
+      "s": {
+        "font-size": {
+          "value": "{typography.text.xs.font-size.value} + 2"
         },
-        "s": {
-          "font-size": {
-            "value": "{font-size.xs.value}"
-          },
-          "icon-size": {
-            "value": "{font-size.s.value}"
-          }
+        "icon-size": {
+          "value": "{typography.text.s.font-size.value} + 2"
+        }
+      },
+      "m": {
+        "font-size": {
+          "value": "{typography.text.s.font-size.value} + 4"
         },
-        "m": {
-          "font-size": {
-            "value": "{font-size.m.value}"
-          },
-          "icon-size": {
-            "value": "{font-size.l.value}"
-          }
+        "icon-size": {
+          "value": "{typography.text.m.font-size.value} + 2"
         }
       }
     }
@@ -53,26 +37,26 @@
       "text": {
         "xs": {
           "font-size": {
-            "value": "{font-size.xs.value}"
+            "value": "14px"
           },
           "icon-size": {
-            "value": "{font-size.s.value}"
+            "value": "{desktop.typography.text.s.font-size.value} + 2"
           }
         },
         "s": {
           "font-size": {
-            "value": "{font-size.s.value}"
+            "value": "{desktop.typography.text.xs.font-size.value} + 2"
           },
           "icon-size": {
-            "value": "{font-size.m.value}"
+            "value": "{desktop.typography.text.s.font-size.value} + 2"
           }
         },
         "m": {
           "font-size": {
-            "value": "{font-size.l.value}"
+            "value": "{desktop.typography.text.s.font-size.value} + 4"
           },
           "icon-size": {
-            "value": "{font-size.xl.value}"
+            "value": "{desktop.typography.text.m.font-size.value} + 2"
           }
         }
       }
diff --git a/src/documentations/Foundations/DesignTokens/Typography/Heading.stories.mdx b/src/documentations/Foundations/DesignTokens/Typography/Heading.stories.mdx
index 93f10bc8..ce594e2f 100644
--- a/src/documentations/Foundations/DesignTokens/Typography/Heading.stories.mdx
+++ b/src/documentations/Foundations/DesignTokens/Typography/Heading.stories.mdx
@@ -3,6 +3,7 @@ import { Layout, Table } from '@/storybook/components';
 import { Heading, Text } from '@/components';
 import { tokenVariables, headingSizeTokenNameList } from '@/constants';
 import { getValueOfCssPropertyInDesignTokens } from '@/helpers/storybookHelper';
+import { get } from '@/helpers/objectHelper';
 
 <Meta
     title="Foundations/Design Tokens/Typography/Heading"
@@ -35,6 +36,10 @@ import { getValueOfCssPropertyInDesignTokens } from '@/helpers/storybookHelper';
                 name: 'preview',
                 label: 'Preview',
             },
+            {
+              name: 'fontFamily',
+              label: 'Font Family',
+            },
             {
                 name: 'mobile',
                 label: 'Value for mobile',
@@ -44,7 +49,9 @@ import { getValueOfCssPropertyInDesignTokens } from '@/helpers/storybookHelper';
                 label: 'Value for desktop',
             },
         ]}
-        rows={headingSizeTokenNameList.map(tokenName => ({
+        rows={headingSizeTokenNameList
+          .filter(tokenName => tokenName !== 'base')
+          .map(tokenName => ({
             name: (
                 <Text fontWeight="medium">heading-{tokenName}</Text>
             ),
@@ -53,27 +60,26 @@ import { getValueOfCssPropertyInDesignTokens } from '@/helpers/storybookHelper';
                     Title
                 </Heading>
             ),
+            fontFamily: get(tokenVariables, 'typography.heading.base.font-family.value'),
             mobile: `${getValueOfCssPropertyInDesignTokens({
                 path: 'typography.heading',
                 tokenName,
-                device: 'mobile',
                 propertyCSS: 'font-size'
             })} / ${getValueOfCssPropertyInDesignTokens({
               path: 'typography.heading',
               tokenName,
-              device: 'mobile',
               propertyCSS: 'line-height'
             })}`,
             desktop: `${getValueOfCssPropertyInDesignTokens({
                 path: 'typography.heading',
                 tokenName,
-                device: 'desktop',
-                propertyCSS: 'font-size'
+                propertyCSS: 'font-size',
+                isDesktop: true,
             })} / ${getValueOfCssPropertyInDesignTokens({
               path: 'typography.heading',
               tokenName,
-              device: 'desktop',
-              propertyCSS: 'line-height'
+              propertyCSS: 'line-height',
+              isDesktop: true,
             })}`,
         }))}
     />
diff --git a/src/documentations/Foundations/DesignTokens/Typography/Text.stories.mdx b/src/documentations/Foundations/DesignTokens/Typography/Text.stories.mdx
index b9a33bfb..054a0004 100644
--- a/src/documentations/Foundations/DesignTokens/Typography/Text.stories.mdx
+++ b/src/documentations/Foundations/DesignTokens/Typography/Text.stories.mdx
@@ -3,6 +3,7 @@ import { Layout, Table } from '@/storybook/components';
 import { Text } from '@/components';
 import { tokenVariables, textSizeTokenNameList } from '@/constants';
 import { getValueOfCssPropertyInDesignTokens } from '@/helpers/storybookHelper';
+import { get } from '@/helpers/objectHelper';
 
 <Meta
     title="Foundations/Design Tokens/Typography/Text"
@@ -35,6 +36,10 @@ import { getValueOfCssPropertyInDesignTokens } from '@/helpers/storybookHelper';
                 name: 'preview',
                 label: 'Preview',
             },
+            {
+              name: 'fontFamily',
+              label: 'Font Family',
+            },
             {
                 name: 'mobile',
                 label: 'Value for mobile',
@@ -44,7 +49,9 @@ import { getValueOfCssPropertyInDesignTokens } from '@/helpers/storybookHelper';
                 label: 'Value for desktop',
             },
         ]}
-        rows={textSizeTokenNameList.map((tokenName) => ({
+        rows={textSizeTokenNameList
+          .filter(tokenName => tokenName !== 'base')
+          .map((tokenName) => ({
             name: (
                 <Text fontWeight="medium">text-{tokenName}</Text>
             ),
@@ -53,27 +60,27 @@ import { getValueOfCssPropertyInDesignTokens } from '@/helpers/storybookHelper';
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
                 </Text>
             ),
+            fontFamily: get(tokenVariables, 'font-family.base.value'),
             mobile: `${getValueOfCssPropertyInDesignTokens({
                 path: 'typography.text',
                 tokenName,
-                device: 'mobile',
                 propertyCSS: 'font-size'
             })} / ${getValueOfCssPropertyInDesignTokens({
               path: 'typography.text',
               tokenName,
-              device: 'mobile',
               propertyCSS: 'line-height'
             })}`,
             desktop: `${getValueOfCssPropertyInDesignTokens({
                 path: 'typography.text',
                 tokenName,
-                device: 'desktop',
-                propertyCSS: 'font-size'
+                propertyCSS: 'font-size',
+                isDesktop: true,
             })} / ${getValueOfCssPropertyInDesignTokens({
               path: 'typography.text',
               tokenName,
               device: 'desktop',
-              propertyCSS: 'line-height'
+              propertyCSS: 'line-height',
+              isDesktop: true,
             })}`,
         }))}
     />
diff --git a/src/documentations/Foundations/SystemProps/About.stories.mdx b/src/documentations/Foundations/SystemProps/About.stories.mdx
index 6bd5b9a8..a72ef59d 100644
--- a/src/documentations/Foundations/SystemProps/About.stories.mdx
+++ b/src/documentations/Foundations/SystemProps/About.stories.mdx
@@ -9,4 +9,4 @@ Inspired by **Chakra UI**, **System Props** allows you to add accessories to you
 
 > Here are the two libraries that inspired the System Props, [Chakra UI](https://chakra-ui.com/docs/styled-system/style-props) and [System Props](https://system-props.com/)
 
-The `SystemProps` interface is composed of `Color System Props`, `SpacingSystemProps`, `TypographySystemProps`, `FlexBoxSystemProps` and `LayoutSystemProps`.
+The `SystemProps` interface is composed of `Color System Props`, `SpacingSystemProps`, `TypographySystemProps`, `LayoutSystemProps`, `FlexOrGridSystemProps`, `FlexSystemProps`, `FlexOrGridItemSystemProps`, and `FlexItemSystemProps`.
diff --git a/src/documentations/Foundations/SystemProps/FlexBoxSystemProps.stories.mdx b/src/documentations/Foundations/SystemProps/FlexBoxSystemProps.stories.mdx
deleted file mode 100644
index 49b70135..00000000
--- a/src/documentations/Foundations/SystemProps/FlexBoxSystemProps.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { Layout, SystemPropsTable } from '@/storybook/components';
-import { flexBoxSystemProps } from '@/constants/systemProps';
-
-<Meta title="Foundations/System Props/Flex Box System Props" />
-
-<Layout
-    title="System Props"
-    description="All properties available on Flex Box System Props"
->
-    <SystemPropsTable
-        title="Flex Box System Props"
-        systemProps={flexBoxSystemProps}
-    />
-</Layout>
diff --git a/src/documentations/Foundations/SystemProps/FlexOrGridSystemProps.stories.mdx b/src/documentations/Foundations/SystemProps/FlexOrGridSystemProps.stories.mdx
new file mode 100644
index 00000000..e0892337
--- /dev/null
+++ b/src/documentations/Foundations/SystemProps/FlexOrGridSystemProps.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/addon-docs';
+import { Layout, SystemPropsTable } from '@/storybook/components';
+import { flexOrGridSystemProps, flexSystemProps, flexOrGridItemSystemProps, flexItemSystemProps } from '@/constants/systemProps';
+
+<Meta title="Foundations/System Props/Flex Or Grid System Props" />
+
+<Layout
+    title="System Props"
+    description="All properties available on Flex Or Grid System Props"
+>
+    <SystemPropsTable
+      title="Flex Or Grid System Props"
+      systemProps={flexOrGridSystemProps}
+    />
+    <SystemPropsTable
+      title="Flex System Props"
+      systemProps={flexSystemProps}
+    />
+    <SystemPropsTable
+      title="Flex Or Grid Item System Props"
+      systemProps={flexOrGridItemSystemProps}
+    />
+    <SystemPropsTable
+        title="Flex Item System Props"
+        systemProps={flexItemSystemProps}
+    />
+</Layout>
diff --git a/src/documentations/Foundations/SystemProps/HiddenSystemProps.stories.mdx b/src/documentations/Foundations/SystemProps/HiddenSystemProps.stories.mdx
deleted file mode 100644
index 5cfe6655..00000000
--- a/src/documentations/Foundations/SystemProps/HiddenSystemProps.stories.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { Layout, SystemPropsTable } from '@/storybook/components';
-import { hiddenSystemProps } from '@/constants/systemProps';
-import { Text } from '@/components';
-
-<Meta title="Foundations/System Props/Hidden System Props" />
-
-<Layout
-    title="System Props"
-    description="All properties available on Hidden System Props"
->
-    <Text mb="s">
-        Hide component if the media query matches.<br />
-        The above is similar to "min-width" and below props is similar to "max-width".<br />
-        They receive the breakpoint keys.
-    </Text>
-    <SystemPropsTable
-        title="Hidden System Props"
-        systemProps={hiddenSystemProps}
-    />
-</Layout>
diff --git a/src/helpers/storybookHelper.ts b/src/helpers/storybookHelper.ts
index bf21e23e..ef9ff094 100644
--- a/src/helpers/storybookHelper.ts
+++ b/src/helpers/storybookHelper.ts
@@ -74,9 +74,12 @@ export const createControls = <T>(parameters: {
 export const getValueOfCssPropertyInDesignTokens = (options: {
   path: string;
   tokenName: string;
-  device: 'mobile' | 'desktop';
   propertyCSS: string;
+  isDesktop?: boolean;
 }): number | string =>
-  get(tokenVariables, `${options.device}.${options.path}.${options.tokenName}.${options.propertyCSS}.value`) ||
+  get(
+    tokenVariables,
+    `${options.isDesktop ? 'desktop.' : ''}${options.path}.${options.tokenName}.${options.propertyCSS}.value`
+  ) ||
   get(tokenVariables, `${options.path}.${options.tokenName}.${options.propertyCSS}.value`) ||
   get(tokenVariables, `${options.path}.base.${options.propertyCSS}.value`);
diff --git a/src/helpers/systemPropsHelper/flexBoxSystemClassName.ts b/src/helpers/systemPropsHelper/flexBoxSystemClassName.ts
deleted file mode 100644
index 2ea790fd..00000000
--- a/src/helpers/systemPropsHelper/flexBoxSystemClassName.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import classNames from 'classnames';
-
-import { classNamesWithModifiers } from '@/helpers/systemPropsHelper';
-import type { FlexBoxSystemProps, FlexDirectionType, FlexType, SpacingType } from '@/types';
-import type {
-  AlignContentType,
-  AlignItemsType,
-  AlignSelfType,
-  FlexBasisType,
-  FlexWrapType,
-  JustifyContentType,
-  MediaQueryType,
-} from '@/types';
-
-export const flexBoxSystemClassName = <TProps extends FlexBoxSystemProps>(props: TProps): string =>
-  classNames(
-    classNamesWithModifiers<MediaQueryType, FlexDirectionType>({
-      propValue: props.flexDirection,
-      className: 'flex',
-    }),
-    classNamesWithModifiers<MediaQueryType, FlexWrapType>({
-      propValue: props.flexWrap,
-      className: 'flex',
-    }),
-    ...classNamesWithModifiers<MediaQueryType, AlignItemsType>({
-      propValue: props.alignItems,
-      className: 'items',
-    }),
-    ...classNamesWithModifiers<MediaQueryType, AlignContentType>({
-      propValue: props.alignContent,
-      className: 'content',
-    }),
-    ...classNamesWithModifiers<MediaQueryType, JustifyContentType>({
-      propValue: props.justifyContent,
-      className: 'justify',
-    }),
-    ...classNamesWithModifiers<MediaQueryType, SpacingType>({
-      propValue: props.gap,
-      className: 'gap',
-    }),
-    ...classNamesWithModifiers<MediaQueryType, SpacingType>({
-      propValue: props.gapX,
-      className: 'gap-x',
-    }),
-    ...classNamesWithModifiers<MediaQueryType, SpacingType>({
-      propValue: props.gapY,
-      className: 'gap-y',
-    }),
-    ...classNamesWithModifiers<MediaQueryType, AlignSelfType>({
-      propValue: props.alignSelf,
-      className: 'self',
-    }),
-    classNamesWithModifiers<MediaQueryType, FlexBasisType>({
-      propValue: props.flexBasis,
-      className: 'basis',
-    }),
-    classNamesWithModifiers<MediaQueryType, FlexType>({
-      propValue: props.flex,
-      className: 'flex',
-    })
-  );
diff --git a/src/helpers/systemPropsHelper/flexItemSystemClassName.ts b/src/helpers/systemPropsHelper/flexItemSystemClassName.ts
new file mode 100644
index 00000000..2e19d581
--- /dev/null
+++ b/src/helpers/systemPropsHelper/flexItemSystemClassName.ts
@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+
+import { classNamesWithModifiers } from '@/helpers/systemPropsHelper';
+import type { FlexItemSystemProps, FlexType } from '@/types';
+import type { FlexBasisType, MediaQueryType } from '@/types';
+
+export const flexItemSystemClassName = <TProps extends FlexItemSystemProps>(props: TProps): string =>
+  classNames(
+    classNamesWithModifiers<MediaQueryType, FlexBasisType>({
+      propValue: props.flexBasis,
+      className: 'basis',
+    }),
+    classNamesWithModifiers<MediaQueryType, FlexType>({
+      propValue: props.flex,
+      className: 'flex',
+    })
+  );
diff --git a/src/helpers/systemPropsHelper/flexOrGridItemSystemClassName.ts b/src/helpers/systemPropsHelper/flexOrGridItemSystemClassName.ts
new file mode 100644
index 00000000..a67c398d
--- /dev/null
+++ b/src/helpers/systemPropsHelper/flexOrGridItemSystemClassName.ts
@@ -0,0 +1,9 @@
+import { classNamesWithModifiers } from '@/helpers/systemPropsHelper';
+import type { FlexOrGridItemSystemProps } from '@/types';
+import type { AlignSelfType, MediaQueryType } from '@/types';
+
+export const flexOrGridItemSystemClassName = <TProps extends FlexOrGridItemSystemProps>(props: TProps): string =>
+  classNamesWithModifiers<MediaQueryType, AlignSelfType>({
+    propValue: props.alignSelf,
+    className: 'self',
+  }).join(' ');
diff --git a/src/helpers/systemPropsHelper/flexOrGridSystemClassName.ts b/src/helpers/systemPropsHelper/flexOrGridSystemClassName.ts
new file mode 100644
index 00000000..a6c4456e
--- /dev/null
+++ b/src/helpers/systemPropsHelper/flexOrGridSystemClassName.ts
@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+
+import { classNamesWithModifiers } from '@/helpers/systemPropsHelper';
+import type { FlexOrGridSystemProps, SpacingType } from '@/types';
+import type { AlignContentType, AlignItemsType, JustifyContentType, MediaQueryType } from '@/types';
+
+export const flexOrGridSystemClassName = <TProps extends FlexOrGridSystemProps>(props: TProps): string =>
+  classNames(
+    ...classNamesWithModifiers<MediaQueryType, AlignItemsType>({
+      propValue: props.alignItems,
+      className: 'items',
+    }),
+    ...classNamesWithModifiers<MediaQueryType, AlignContentType>({
+      propValue: props.alignContent,
+      className: 'content',
+    }),
+    ...classNamesWithModifiers<MediaQueryType, JustifyContentType>({
+      propValue: props.justifyContent,
+      className: 'justify',
+    }),
+    ...classNamesWithModifiers<MediaQueryType, SpacingType>({
+      propValue: props.gap,
+      className: 'gap',
+    }),
+    ...classNamesWithModifiers<MediaQueryType, SpacingType>({
+      propValue: props.gapX,
+      className: 'gap-x',
+    }),
+    ...classNamesWithModifiers<MediaQueryType, SpacingType>({
+      propValue: props.gapY,
+      className: 'gap-y',
+    })
+  );
diff --git a/src/helpers/systemPropsHelper/flexSystemClassName.ts b/src/helpers/systemPropsHelper/flexSystemClassName.ts
new file mode 100644
index 00000000..9e746c1b
--- /dev/null
+++ b/src/helpers/systemPropsHelper/flexSystemClassName.ts
@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+
+import { classNamesWithModifiers } from '@/helpers/systemPropsHelper';
+import type { FlexDirectionType, FlexSystemProps, FlexWrapType } from '@/types';
+import type { MediaQueryType } from '@/types';
+
+export const flexSystemClassName = <TProps extends FlexSystemProps>(props: TProps): string =>
+  classNames(
+    classNamesWithModifiers<MediaQueryType, FlexDirectionType>({
+      propValue: props.flexDirection,
+      className: 'flex',
+    }),
+    classNamesWithModifiers<MediaQueryType, FlexWrapType>({
+      propValue: props.flexWrap,
+      className: 'flex',
+    })
+  );
diff --git a/src/helpers/systemPropsHelper/hiddenSystemClassName.ts b/src/helpers/systemPropsHelper/hiddenSystemClassName.ts
deleted file mode 100644
index 613ad2d4..00000000
--- a/src/helpers/systemPropsHelper/hiddenSystemClassName.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import classNames from 'classnames';
-
-import type { HiddenSystemProps } from '@/types';
-
-export const hiddenSystemClassName = <TProps extends HiddenSystemProps>(props: TProps): string =>
-  classNames({
-    [`hidden-above@${props.hiddenAbove}`]: Boolean(props.hiddenAbove),
-    [`hidden-below@${props.hiddenBelow}`]: Boolean(props.hiddenBelow),
-  });
diff --git a/src/helpers/systemPropsHelper/index.ts b/src/helpers/systemPropsHelper/index.ts
index e77d819f..b450fc5e 100644
--- a/src/helpers/systemPropsHelper/index.ts
+++ b/src/helpers/systemPropsHelper/index.ts
@@ -1,10 +1,12 @@
 export * from './classNameWithModifier';
 export * from './classNamesWithModifiers';
 export * from './colorSystemClassName';
-export * from './flexBoxSystemClassName';
 export * from './layoutSystemClassName';
+export * from './flexOrGridSystemClassName';
+export * from './flexSystemClassName';
+export * from './flexOrGridItemSystemClassName';
+export * from './flexItemSystemClassName';
 export * from './spacingSystemClassName';
 export * from './typographySystemClassName';
-export * from './hiddenSystemClassName';
 export * from './omitSystemProps';
 export * from './systemClassName';
diff --git a/src/helpers/systemPropsHelper/layoutSystemClassName.ts b/src/helpers/systemPropsHelper/layoutSystemClassName.ts
index 71d62bc1..720a1e6d 100644
--- a/src/helpers/systemPropsHelper/layoutSystemClassName.ts
+++ b/src/helpers/systemPropsHelper/layoutSystemClassName.ts
@@ -18,20 +18,8 @@ export const layoutSystemClassName = <TProps extends LayoutSystemProps>(props: T
       propValue: props.height,
       className: 'height',
     }),
-    classNamesWithModifiers<MediaQueryType, WidthType>({
-      propValue: props.minWidth,
-      className: 'min-width',
-    }),
-    classNamesWithModifiers<MediaQueryType, WidthType>({
-      propValue: props.maxWidth,
-      className: 'max-width',
-    }),
-    classNamesWithModifiers<MediaQueryType, HeightType>({
-      propValue: props.minHeight,
-      className: 'min-height',
-    }),
-    classNamesWithModifiers<MediaQueryType, HeightType>({
-      propValue: props.maxHeight,
-      className: 'max-height',
-    })
+    {
+      [`hidden-above@${props.hiddenAbove}`]: Boolean(props.hiddenAbove),
+      [`hidden-below@${props.hiddenBelow}`]: Boolean(props.hiddenBelow),
+    }
   );
diff --git a/src/helpers/systemPropsHelper/systemClassName.ts b/src/helpers/systemPropsHelper/systemClassName.ts
index 4630e63b..cdc9582e 100644
--- a/src/helpers/systemPropsHelper/systemClassName.ts
+++ b/src/helpers/systemPropsHelper/systemClassName.ts
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 
 import { colorSystemClassName } from '@/helpers/systemPropsHelper/colorSystemClassName';
-import { flexBoxSystemClassName } from '@/helpers/systemPropsHelper/flexBoxSystemClassName';
-import { hiddenSystemClassName } from '@/helpers/systemPropsHelper/hiddenSystemClassName';
+import { flexItemSystemClassName } from '@/helpers/systemPropsHelper/flexItemSystemClassName';
+import { flexOrGridItemSystemClassName } from '@/helpers/systemPropsHelper/flexOrGridItemSystemClassName';
 import { layoutSystemClassName } from '@/helpers/systemPropsHelper/layoutSystemClassName';
 import { spacingSystemClassName } from '@/helpers/systemPropsHelper/spacingSystemClassName';
 import { typographySystemClassName } from '@/helpers/systemPropsHelper/typographySystemClassName';
@@ -13,7 +13,7 @@ export const systemClassName = <TProps extends SystemProps = SystemProps>(props:
     colorSystemClassName(props),
     layoutSystemClassName(props),
     spacingSystemClassName(props),
-    hiddenSystemClassName(props),
-    flexBoxSystemClassName(props),
+    flexOrGridItemSystemClassName(props),
+    flexItemSystemClassName(props),
     typographySystemClassName(props)
   );
diff --git a/src/pages/CategoryPage/CategoryPageContent.tsx b/src/pages/CategoryPage/CategoryPageContent.tsx
index b9ad4189..7e169f5d 100644
--- a/src/pages/CategoryPage/CategoryPageContent.tsx
+++ b/src/pages/CategoryPage/CategoryPageContent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Text } from '@/components';
+import { Box, Heading } from '@/components';
 import type { CategoryEndingBlockProps } from '@/components';
 import { CategoryEndingBlock, Divider } from '@/components';
 
@@ -16,9 +16,9 @@ export const CategoryPageContent: React.FC<CategoryPageContentProps> = ({
   categoryEndingBlock,
 }) => (
   <Box>
-    <Text size="m" mb="l" fontWeight="medium">
+    <Heading size="m" mb="l" color="primary">
       {title}
-    </Text>
+    </Heading>
     {postCardList}
     {categoryEndingBlock && (
       <>
diff --git a/src/pages/PostPage/PostFooter/PostFooter.tsx b/src/pages/PostPage/PostFooter/PostFooter.tsx
index f9bdab8c..76d424f0 100644
--- a/src/pages/PostPage/PostFooter/PostFooter.tsx
+++ b/src/pages/PostPage/PostFooter/PostFooter.tsx
@@ -11,7 +11,7 @@ export interface PostFooterProps extends BoxProps {
 
 export const PostFooter: React.FC<PostFooterProps> = ({ title, authors, ...props }) => (
   <Box {...props}>
-    <Heading mb="xxs" size="l" fontWeight="bold" color="primary">
+    <Heading mb="xxs" size="m" color="primary">
       {title}
     </Heading>
     <Flex mt="l" flexDirection="column" gap="s">
diff --git a/src/pages/PostPage/PostHeader/PostHeader.tsx b/src/pages/PostPage/PostHeader/PostHeader.tsx
index 74e7aaa3..de1154bf 100644
--- a/src/pages/PostPage/PostHeader/PostHeader.tsx
+++ b/src/pages/PostPage/PostHeader/PostHeader.tsx
@@ -19,7 +19,7 @@ export interface PostHeaderProps extends BoxProps {
 
 export const PostHeader: React.FC<PostHeaderProps> = ({ title, date, readingTime, authors, shareLinks, ...props }) => (
   <Box {...props} textSize="xs">
-    <Heading as="h1" size="xl">
+    <Heading as="h1" size="xl" color="primary">
       {title}
     </Heading>
     <Flex flexDirection={{ xs: 'column', md: 'row' }} justifyContent="between" gap="xs" mt="m">
diff --git a/src/pages/PostPage/RelatedPostList/RelatedPostList.tsx b/src/pages/PostPage/RelatedPostList/RelatedPostList.tsx
index fd90636d..4e4a76db 100644
--- a/src/pages/PostPage/RelatedPostList/RelatedPostList.tsx
+++ b/src/pages/PostPage/RelatedPostList/RelatedPostList.tsx
@@ -11,7 +11,7 @@ export interface RelatedPostListProps extends BoxProps {
 
 export const RelatedPostList: React.FC<RelatedPostListProps> = ({ relatedPostListTitle, posts, ...props }) => (
   <Box {...props}>
-    <Heading as="p" mb="m" size="m" color="primary">
+    <Heading mb="m" size="m" color="primary">
       {relatedPostListTitle}
     </Heading>
     {posts.map((post, index) => (
diff --git a/src/styles/abstracts/mixins/_component.scss b/src/styles/abstracts/mixins/_component.scss
new file mode 100644
index 00000000..9901e3c4
--- /dev/null
+++ b/src/styles/abstracts/mixins/_component.scss
@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../variables' as *;
+
+@mixin component($component-name, $config) {
+  @each $component-variant-name, $properties in $config {
+    @if $component-variant-name != 'base' {
+      .#{$component-name}-#{$component-variant-name} {
+        @each $property-name, $property-value in map.merge(map.get($config, 'base'), $properties) {
+          #{$property-name}: #{$property-value};
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/abstracts/mixins/_index.scss b/src/styles/abstracts/mixins/_index.scss
index 3daec06d..c6483a1f 100644
--- a/src/styles/abstracts/mixins/_index.scss
+++ b/src/styles/abstracts/mixins/_index.scss
@@ -1,2 +1,4 @@
 @forward 'create-media-queries';
 @forward 'utility-classes';
+@forward 'system_classes';
+@forward 'component';
diff --git a/src/styles/abstracts/mixins/_system_classes.scss b/src/styles/abstracts/mixins/_system_classes.scss
new file mode 100644
index 00000000..ce831a0e
--- /dev/null
+++ b/src/styles/abstracts/mixins/_system_classes.scss
@@ -0,0 +1,14 @@
+@use '../functions/map-get-strict' as *;
+@use './utility-classes' as *;
+
+@mixin system-classes($prop-list) {
+  @each $prop-name, $options in $prop-list {
+    @include utility-classes(map-get-strict($options, 'property-css'), map-get-strict($options, 'value-list'), map-get-strict($options, 'prefix-class-name'));
+  }
+}
+
+@mixin system-classes-with-breakpoints($prop-list) {
+  @each $prop-name, $options in $prop-list {
+    @include utility-classes-with-breakpoints(map-get-strict($options, 'property-css'), map-get-strict($options, 'value-list'), map-get-strict($options, 'prefix-class-name'));
+  }
+}
diff --git a/src/styles/abstracts/mixins/_utility-classes.scss b/src/styles/abstracts/mixins/_utility-classes.scss
index 124f8161..56343439 100644
--- a/src/styles/abstracts/mixins/_utility-classes.scss
+++ b/src/styles/abstracts/mixins/_utility-classes.scss
@@ -2,10 +2,11 @@
 @use './create-media-queries' as *;
 @use '../variables' as *;
 
-@mixin utility-classes($prefix-class-name, $property-css, $list) {
+@mixin utility-classes($property-css, $list, $prefix-class-name: null) {
   @each $name, $value in $list {
+    $class-name: if($prefix-class-name, #{$prefix-class-name}-#{$name}, #{$name});
     .#{$prefix-class-name}-#{$name} {
-      @if  type-of($property-css) == 'list' {
+      @if type-of($property-css) == 'list' {
         @each $current-property-css in $property-css {
           #{$current-property-css}: #{$value};
         }
@@ -16,11 +17,16 @@
   }
 }
 
-@mixin utility-classes-with-modifiers($prefix-class-name, $property-css, $list) {
+@mixin utility-classes-with-breakpoints($property-css, $list, $prefix-class-name: null) {
   @each $breakpoint-name, $breakpoint-value in map.get($token-variables, 'breakpoint') {
     @include create-media-queries($breakpoint-name) {
       @each $name, $value in $list {
-        .#{$prefix-class-name}-#{$name}\@#{$breakpoint-name} {
+        $class-name: if(
+            $prefix-class-name,
+            #{$prefix-class-name}-#{$name}\@#{$breakpoint-name},
+            #{$name}\@#{$breakpoint-name}
+        );
+        .#{$class-name} {
           @if type-of($property-css) == 'list' {
             @each $current-property-css in $property-css {
               #{$current-property-css}: #{$value};
diff --git a/src/styles/utilities/_color.scss b/src/styles/utilities/_color.scss
index e9220eae..883ed4c2 100644
--- a/src/styles/utilities/_color.scss
+++ b/src/styles/utilities/_color.scss
@@ -1,14 +1,21 @@
 @use 'sass:map';
 @use '../abstracts' as *;
 
+$color-list: map.get($token-variables, 'color');
 $color-prop-list: (
-  'bg':  'background-color',
-  'color': 'color',
+  'bg':  (
+    'prefix-class-name': 'bg',
+    'property-css': 'background-color',
+    'value-list': $color-list,
+  ),
+  'color': (
+    'prefix-class-name': 'color',
+    'property-css': 'color',
+    'value-list': $color-list,
+  ),
 );
 
 /*
  * Color System Class Names
  */
-@each $prefix-class-name, $property-css in $color-prop-list {
-  @include utility-classes($prefix-class-name, $property-css, map.get($token-variables, 'color'));
-}
+@include system-classes($color-prop-list);
diff --git a/src/styles/utilities/_flexBox.scss b/src/styles/utilities/_flexBox.scss
deleted file mode 100644
index 338ceca2..00000000
--- a/src/styles/utilities/_flexBox.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use 'sass:map';
-@use '../abstracts' as *;
-
-$flex-direction-list: map.get($css-properties, 'flex-direction');
-$flex-wrap-list: map.get($css-properties, 'flex-wrap');
-$align-items-list: map.get($css-properties, 'align-items');
-$align-content-list: map.get($css-properties, 'align-content');
-$justify-content-list: map.get($css-properties, 'justify-content');
-$align-self-list: map.get($css-properties, 'align-self');
-$spacing-list: map.get($token-variables, 'spacing');
-$flex-basis-list: map.get($css-properties, 'flex-basis');
-$flex-list: map.get($css-properties, 'flex');
-
-@include utility-classes-with-modifiers('flex', 'flex-direction', $flex-direction-list);
-@include utility-classes-with-modifiers('flex', 'flex-wrap', $flex-wrap-list);
-@include utility-classes-with-modifiers('items', 'align-items', $align-items-list);
-@include utility-classes-with-modifiers('content', 'align-content', $align-content-list);
-@include utility-classes-with-modifiers('justify', 'justify-content', $justify-content-list);
-@include utility-classes-with-modifiers('self', 'align-self', $align-self-list);
-@include utility-classes-with-modifiers('gap', 'gap', $spacing-list);
-@include utility-classes-with-modifiers('gap-x', 'gap-x', $spacing-list);
-@include utility-classes-with-modifiers('gap-y', 'gap-y', $spacing-list);
-@include utility-classes-with-modifiers('basis', 'flex-basis', $flex-basis-list);
-@include utility-classes-with-modifiers('flex', 'flex', $flex-list);
diff --git a/src/styles/utilities/_flexOrGrid.scss b/src/styles/utilities/_flexOrGrid.scss
new file mode 100755
index 00000000..52b1a681
--- /dev/null
+++ b/src/styles/utilities/_flexOrGrid.scss
@@ -0,0 +1,97 @@
+@use 'sass:map';
+@use '../abstracts' as *;
+
+$flex-direction-list: map.get($css-properties, 'flex-direction');
+$flex-wrap-list: map.get($css-properties, 'flex-wrap');
+$align-items-list: map.get($css-properties, 'align-items');
+$align-content-list: map.get($css-properties, 'align-content');
+$justify-content-list: map.get($css-properties, 'justify-content');
+$align-self-list: map.get($css-properties, 'align-self');
+$spacing-list: map.get($token-variables, 'spacing');
+$flex-basis-list: map.get($css-properties, 'flex-basis');
+$flex-list: map.get($css-properties, 'flex');
+$spacing-list: map.get($token-variables, 'spacing');
+$flex-or-grid-prop-list: (
+  'alignItems': (
+    'prefix-class-name': 'items',
+    'property-css': 'align-items',
+    'value-list': $align-items-list,
+  ),
+  'alignContent': (
+    'prefix-class-name': 'content',
+    'property-css': 'align-content',
+    'value-list': $align-content-list,
+  ),
+  'justifyContent': (
+    'prefix-class-name': 'justify',
+    'property-css': 'justify-content',
+    'value-list': $justify-content-list,
+  ),
+  'gap': (
+    'prefix-class-name': 'gap',
+    'property-css': 'gap',
+    'value-list': $spacing-list,
+  ),
+  'gapX': (
+    'prefix-class-name': 'gap-x',
+    'property-css': 'gap-x',
+    'value-list': $spacing-list,
+  ),
+  'gapY': (
+    'prefix-class-name': 'gap-y',
+    'property-css': 'gap-y',
+    'value-list': $spacing-list,
+  ),
+);
+$flex-or-grid-item-prop-list: (
+  'alignSelf': (
+    'prefix-class-name': 'self',
+    'property-css': 'align-self',
+    'value-list': $align-self-list,
+  ),
+);
+$flex-prop-list: (
+  'flexDirection':  (
+    'prefix-class-name': 'flex',
+    'property-css': 'flex-direction',
+    'value-list': $flex-direction-list,
+  ),
+  'flexWrap': (
+    'prefix-class-name': 'flex',
+    'property-css': 'flex-wrap',
+    'value-list': $flex-wrap-list,
+  ),
+);
+$flex-item-prop-list: (
+  'flexBasis': (
+    'prefix-class-name': 'basis',
+    'property-css': 'flex-basis',
+    'value-list': $flex-basis-list,
+  ),
+  'flex': (
+    'prefix-class-name': 'flex',
+    'property-css': 'flex',
+    'value-list': $flex-list,
+  ),
+);
+
+
+/*
+ * Flex Or Grid System Class Names
+ */
+@include system-classes-with-breakpoints($flex-or-grid-prop-list);
+
+/*
+ * Flex Or Grid Item System Class Names
+ */
+@include system-classes-with-breakpoints($flex-or-grid-item-prop-list);
+
+/*
+ * Flex System Class Names
+ */
+@include system-classes-with-breakpoints($flex-prop-list);
+
+/*
+ * Flex Item System Class Names
+ */
+@include system-classes-with-breakpoints($flex-item-prop-list);
diff --git a/src/styles/utilities/_hidden.scss b/src/styles/utilities/_hidden.scss
deleted file mode 100644
index 8d479b4a..00000000
--- a/src/styles/utilities/_hidden.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use 'sass:map';
-@use 'sass:list';
-@use '../abstracts' as *;
-
-@each $breakpoint-name, $breakpoint-value in map.get($token-variables, 'breakpoint') {
-  @include create-media-queries($breakpoint-name, 'min') {
-    .hidden-above\@#{$breakpoint-name} {
-      display: none !important;
-    }
-  }
-
-  @include create-media-queries($breakpoint-name, 'max') {
-    .hidden-below\@#{$breakpoint-name} {
-      display: none !important;
-    }
-  }
-}
diff --git a/src/styles/utilities/_index.scss b/src/styles/utilities/_index.scss
index dbdc94dc..ec1c8d79 100644
--- a/src/styles/utilities/_index.scss
+++ b/src/styles/utilities/_index.scss
@@ -1,7 +1,6 @@
 @use 'animations';
 @use 'color';
-@use 'flexBox';
-@use 'hidden';
+@use 'flexOrGrid';
 @use 'layout';
 @use 'spacing';
 @use 'typography';
diff --git a/src/styles/utilities/_layout.scss b/src/styles/utilities/_layout.scss
index 2d406a01..75439724 100644
--- a/src/styles/utilities/_layout.scss
+++ b/src/styles/utilities/_layout.scss
@@ -4,11 +4,39 @@
 $display-list: map.get($css-properties, 'display');
 $width-list: map.get($token-variables, 'width');
 $height-list: map.get($token-variables, 'height');
+$layout-prop-list: (
+  'display':  (
+    'prefix-class-name': 'display',
+    'property-css': 'display',
+    'value-list': $display-list,
+  ),
+  'width': (
+    'prefix-class-name': 'width',
+    'property-css': 'width',
+    'value-list': $width-list,
+  ),
+  'height': (
+    'prefix-class-name': 'height',
+    'property-css': 'height',
+    'value-list': $height-list,
+  ),
+);
 
-@include utility-classes-with-modifiers('display', 'display', $display-list);
-@include utility-classes-with-modifiers('width', 'width', $width-list);
-@include utility-classes-with-modifiers('height', 'height', $height-list);
-@include utility-classes-with-modifiers('min-width', 'min-width', $width-list);
-@include utility-classes-with-modifiers('max-width', 'max-width', $width-list);
-@include utility-classes-with-modifiers('min-height', 'min-height', $height-list);
-@include utility-classes-with-modifiers('max-height', 'max-height', $height-list);
+/*
+ * Layout System Class Names
+ */
+@include system-classes-with-breakpoints($layout-prop-list);
+
+@each $breakpoint-name, $breakpoint-value in map.get($token-variables, 'breakpoint') {
+  @include create-media-queries($breakpoint-name, 'min') {
+    .hidden-above\@#{$breakpoint-name} {
+      display: none !important;
+    }
+  }
+
+  @include create-media-queries($breakpoint-name, 'max') {
+    .hidden-below\@#{$breakpoint-name} {
+      display: none !important;
+    }
+  }
+}
diff --git a/src/styles/utilities/_spacing.scss b/src/styles/utilities/_spacing.scss
index 2c610b3c..b2328163 100644
--- a/src/styles/utilities/_spacing.scss
+++ b/src/styles/utilities/_spacing.scss
@@ -2,29 +2,84 @@
 @use '../abstracts' as *;
 
 $spacing-list: map.get($token-variables, 'spacing');
+$spacing-list-with-auto: map.merge($spacing-list, ('auto': 'auto'));
 $margin-prop-list: (
-  'm':  'margin',
-  'mt': 'margin-top',
-  'mr': 'margin-right',
-  'mb': 'margin-bottom',
-  'ml': 'margin-left',
-  'mx': ('margin-left', 'margin-right'),
-  'my': ('margin-top', 'margin-bottom'),
+  'm':  (
+    'prefix-class-name': 'm',
+    'property-css': 'margin',
+    'value-list': $spacing-list-with-auto,
+  ),
+  'mt': (
+    'prefix-class-name': 'mt',
+    'property-css': 'margin-top',
+    'value-list': $spacing-list-with-auto,
+  ),
+  'mr': (
+    'prefix-class-name': 'mr',
+    'property-css': 'margin-right',
+    'value-list': $spacing-list-with-auto,
+  ),
+  'mb': (
+    'prefix-class-name': 'mb',
+    'property-css': 'margin-bottom',
+    'value-list': $spacing-list-with-auto,
+  ),
+  'ml': (
+    'prefix-class-name': 'ml',
+    'property-css': 'margin-left',
+    'value-list': $spacing-list-with-auto,
+  ),
+  'mx': (
+    'prefix-class-name': 'mx',
+    'property-css': ('margin-left', 'margin-right'),
+    'value-list': $spacing-list-with-auto,
+  ),
+  'my': (
+    'prefix-class-name': 'my',
+    'property-css': ('margin-top', 'margin-bottom'),
+    'value-list': $spacing-list-with-auto,
+  ),
 );
 $padding-prop-list: (
-  'p': 'padding',
-  'pt': 'padding-top',
-  'pr': 'padding-right',
-  'pb': 'padding-bottom',
-  'pl': 'padding-left',
-  'px': ('padding-left', 'padding-right'),
-  'py': ('padding-top', 'padding-bottom'),
+  'p':  (
+    'prefix-class-name': 'p',
+    'property-css': 'padding',
+    'value-list': $spacing-list,
+  ),
+  'pt': (
+    'prefix-class-name': 'pt',
+    'property-css': 'padding-top',
+    'value-list': $spacing-list,
+  ),
+  'pr': (
+    'prefix-class-name': 'pr',
+    'property-css': 'padding-right',
+    'value-list': $spacing-list,
+  ),
+  'pb': (
+    'prefix-class-name': 'pb',
+    'property-css': 'padding-bottom',
+    'value-list': $spacing-list,
+  ),
+  'pl': (
+    'prefix-class-name': 'pl',
+    'property-css': 'padding-left',
+    'value-list': $spacing-list,
+  ),
+  'px': (
+    'prefix-class-name': 'px',
+    'property-css': ('padding-left', 'padding-right'),
+    'value-list': $spacing-list,
+  ),
+  'py': (
+    'prefix-class-name': 'py',
+    'property-css': ('padding-top', 'padding-bottom'),
+    'value-list': $spacing-list,
+  ),
 );
 
-@each $prefix-class-name, $property-css in $margin-prop-list {
-  @include utility-classes-with-modifiers($prefix-class-name, $property-css, map.merge($spacing-list, ('auto': 'auto')));
-}
-
-@each $prefix-class-name, $property-css in $padding-prop-list {
-  @include utility-classes-with-modifiers($prefix-class-name, $property-css, $spacing-list);
-}
+/*
+ * Spacing System Class Names
+ */
+@include system-classes-with-breakpoints($margin-prop-list);
+@include system-classes-with-breakpoints($padding-prop-list);
diff --git a/src/styles/utilities/_typography.scss b/src/styles/utilities/_typography.scss
index 1ffe1f07..d870abee 100644
--- a/src/styles/utilities/_typography.scss
+++ b/src/styles/utilities/_typography.scss
@@ -1,42 +1,56 @@
 @use 'sass:map';
 @use '../abstracts' as *;
 
-$font-weight-list: map.get($token-variables, 'font-weight');
 $text-align-list: map.get($css-properties, 'text-align');
+$font-weight-list: map.get($token-variables, 'font-weight');
 $text-transform-list: map.get($css-properties, 'text-transform');
+$typography-prop-list: (
+  'fontWeight': (
+    'prefix-class-name': 'font-weight',
+    'property-css': 'font-weight',
+    'value-list': $font-weight-list,
+  ),
+  'textTransform': (
+    'prefix-class-name': text,
+    'property-css': 'text-transform',
+    'value-list': $text-transform-list,
+  ),
+);
+$typography-prop-list-with-breakpoints: (
+  'textAlign':  (
+    'prefix-class-name': 'text',
+    'property-css': 'text-align',
+    'value-list': $text-align-list,
+  ),
+);
+
 
-@mixin size($prefix-name, $size-name, $font-size, $line-height, $font-weight, $icon-size: null) {
-  .#{$prefix-name}-#{$size-name} {
-    font-size: $font-size;
-    line-height: $line-height;
-    font-weight: $font-weight;
+@mixin text-component($config) {
+  @each $component-variant-name, $properties in $config {
+    @if $component-variant-name != 'base' {
+      $icon-size: map.get($properties, 'icon-size');
+      .text-#{$component-variant-name} {
+        @each $property-name, $property-value in map.merge(map.get($config, 'base'), $properties) {
+          @if $property-name != 'icon-size' {
+            #{$property-name}: #{$property-value};
+          }
+        }
 
-    @if $icon-size {
-      .icon {
-        font-size: $icon-size;
+        @if $icon-size {
+          .icon {
+            font-size: $icon-size;
+          }
+        }
       }
     }
-
-  }
-}
-
-@function get-token-value-by-typography-type($typography-type, $size-name, $css-property, $device: 'none') {
-  @if  map.has-key($token-variables, $device, 'typography', $typography-type, $size-name, $css-property) {
-    @return map.get($token-variables, $device, 'typography', $typography-type, $size-name, $css-property);
-  } @else if map.has-key($token-variables, 'typography', $typography-type, $size-name, $css-property) {
-    @return map.get($token-variables, 'typography', $typography-type, $size-name, $css-property);
   }
-
-  @return map.get($token-variables, 'typography', $typography-type, 'base', $css-property);
 }
 
 /*
- * Utility classes
+ * Typography System Class Names
  */
-
-@include utility-classes-with-modifiers('text', 'text-align', $text-align-list);
-@include utility-classes('font-weight', 'font-weight', $font-weight-list);
-@include utility-classes('text', 'text-transform', $text-transform-list);
+@include system-classes($typography-prop-list);
+@include system-classes-with-breakpoints($typography-prop-list-with-breakpoints);
 
 .text-underline {
   text-decoration: underline;
@@ -46,51 +60,19 @@ $text-transform-list: map.get($css-properties, 'text-transform');
   font-style: italic;
 }
 
-/*
- * Utility classes for heading
- */
-@each $device, $heading-token-variables-by-device in (
-  'mobile': map.get($token-variables, 'mobile', 'typography', 'heading'),
-  'desktop': map.get($token-variables, 'desktop', 'typography', 'heading'),
-) {
-  $breakpoint-name: if($device == 'desktop', 'md', 'xs');
+$heading-config: map.get($token-variables, 'typography', 'heading');
+$heading-desktop-config: map.get($token-variables, 'desktop', 'typography', 'heading');
+$text-config: map.get($token-variables, 'typography', 'text');
+$text-desktop-config: map.get($token-variables, 'desktop', 'typography', 'text');
 
-  @each $heading-size-name, $heading-token-variables in $heading-token-variables-by-device {
-    @if  $heading-size-name != 'base' {
-      @include create-media-queries($breakpoint-name) {
-        @include size(
-          'heading',
-          $heading-size-name,
-          map.get($heading-token-variables, 'font-size'),
-          map.get($heading-token-variables, 'line-height'),
-          get-token-value-by-typography-type('heading', $heading-size-name, 'font-weight', $device),
-        );
-      }
-    }
-  }
+@include component('heading', $heading-config);
+
+@include create-media-queries('md') {
+  @include component('heading', map.merge($heading-config, $heading-desktop-config));
 }
 
-/*
- * Utility classes for text
- */
-@each $device, $text-token-variables-by-device in (
-  'mobile': map.get($token-variables, 'mobile', 'typography', 'text'),
-  'desktop': map.get($token-variables, 'desktop', 'typography', 'text'),
-) {
-  $breakpoint-name: if($device == 'desktop', 'md', 'xs');
+@include text-component($text-config);
 
-  @each $text-size-name, $text-token-variables in $text-token-variables-by-device {
-    @if  $text-size-name != 'base' {
-      @include create-media-queries($breakpoint-name) {
-        @include size(
-          'text',
-          $text-size-name,
-          map.get($text-token-variables, 'font-size'),
-          map.get($text-token-variables, 'line-height'),
-          get-token-value-by-typography-type('text', $text-token-variables, 'font-weight', $device),
-          map.get($text-token-variables, 'icon-size')
-        );
-      }
-    }
-  }
+@include create-media-queries('md') {
+  @include text-component(map.merge($text-config, $text-desktop-config));
 }
diff --git a/src/templates/LayoutTemplate/LayoutTemplate.scss b/src/templates/LayoutTemplate/LayoutTemplate.scss
new file mode 100644
index 00000000..8caeaa16
--- /dev/null
+++ b/src/templates/LayoutTemplate/LayoutTemplate.scss
@@ -0,0 +1,5 @@
+@use '@/styles/abstracts' as *;
+
+.layout-template {
+  min-height: #{map-get-strict($token-variables, 'height', 'screen')};
+}
diff --git a/src/templates/LayoutTemplate/LayoutTemplate.tsx b/src/templates/LayoutTemplate/LayoutTemplate.tsx
index 1267baa1..0fe2b13a 100644
--- a/src/templates/LayoutTemplate/LayoutTemplate.tsx
+++ b/src/templates/LayoutTemplate/LayoutTemplate.tsx
@@ -3,6 +3,8 @@ import React from 'react';
 import type { FooterProps } from '@/components';
 import { Flex, Footer } from '@/components';
 
+import './LayoutTemplate.scss';
+
 export type LayoutTemplateProps = {
   header: React.ReactNode;
   footer: FooterProps;
@@ -10,7 +12,7 @@ export type LayoutTemplateProps = {
 };
 
 export const LayoutTemplate: React.FC<LayoutTemplateProps> = ({ header, footer, children }) => (
-  <Flex flexDirection="column" minHeight="screen">
+  <Flex flexDirection="column" className="layout-template">
     {header}
     {children}
     <Footer {...footer} />
diff --git a/src/types/SystemProps/FlexItemSystemProps.ts b/src/types/SystemProps/FlexItemSystemProps.ts
new file mode 100644
index 00000000..e715be6a
--- /dev/null
+++ b/src/types/SystemProps/FlexItemSystemProps.ts
@@ -0,0 +1,12 @@
+import type { FlexBasisType, FlexType, TypeWithMediaQueriesType } from '@/types';
+
+export interface FlexItemSystemProps {
+  /**
+   * Defines a flex basis, auto or number (including breakpoints modifiers)
+   */
+  flexBasis?: TypeWithMediaQueriesType<FlexBasisType>;
+  /**
+   * Defines a flex (including breakpoints modifiers)
+   */
+  flex?: TypeWithMediaQueriesType<FlexType>;
+}
diff --git a/src/types/SystemProps/FlexOrGridItemSystemProps.ts b/src/types/SystemProps/FlexOrGridItemSystemProps.ts
new file mode 100644
index 00000000..eecc9ba4
--- /dev/null
+++ b/src/types/SystemProps/FlexOrGridItemSystemProps.ts
@@ -0,0 +1,9 @@
+import type { TypeWithMediaQueriesType } from '@/types';
+import type { AlignSelfType } from '@/types';
+
+export interface FlexOrGridItemSystemProps {
+  /**
+   * Defines a align self (including breakpoints modifiers)
+   */
+  alignSelf?: TypeWithMediaQueriesType<AlignSelfType>;
+}
diff --git a/src/types/SystemProps/FlexBoxSystemProps.ts b/src/types/SystemProps/FlexOrGridSystemProps.ts
similarity index 53%
rename from src/types/SystemProps/FlexBoxSystemProps.ts
rename to src/types/SystemProps/FlexOrGridSystemProps.ts
index d09a40dc..0b9d122e 100644
--- a/src/types/SystemProps/FlexBoxSystemProps.ts
+++ b/src/types/SystemProps/FlexOrGridSystemProps.ts
@@ -1,22 +1,12 @@
 import type {
   AlignContentType,
   AlignItemsType,
-  FlexType,
   JustifyContentType,
   SpacingType,
   TypeWithMediaQueriesType,
 } from '@/types';
-import type { AlignSelfType, FlexBasisType, FlexDirectionType, FlexWrapType } from '@/types';
 
-export interface FlexBoxSystemProps {
-  /**
-   * flex-direction (including breakpoints modifiers)
-   */
-  flexDirection?: TypeWithMediaQueriesType<FlexDirectionType>;
-  /**
-   * Can flex items wrap onto multiple lines (including breakpoints modifiers)
-   */
-  flexWrap?: TypeWithMediaQueriesType<FlexWrapType>;
+export interface FlexOrGridSystemProps {
   /**
    * align-items (including breakpoints modifiers)
    */
@@ -29,10 +19,6 @@ export interface FlexBoxSystemProps {
    * Defines horizontal alignment along the main axis (including breakpoints modifiers)
    */
   justifyContent?: TypeWithMediaQueriesType<JustifyContentType>;
-  /**
-   * Defines a align self (including breakpoints modifiers)
-   */
-  alignSelf?: TypeWithMediaQueriesType<AlignSelfType>;
   /**
    * Defines gap for col and row (including breakpoints modifiers)
    */
@@ -45,12 +31,4 @@ export interface FlexBoxSystemProps {
    * Defines col gap (including breakpoints modifiers)
    */
   gapY?: TypeWithMediaQueriesType<SpacingType>;
-  /**
-   * Defines a flex basis, auto or number (including breakpoints modifiers)
-   */
-  flexBasis?: TypeWithMediaQueriesType<FlexBasisType>;
-  /**
-   * Defines a flex (including breakpoints modifiers)
-   */
-  flex?: TypeWithMediaQueriesType<FlexType>;
 }
diff --git a/src/types/SystemProps/FlexSystemProps.ts b/src/types/SystemProps/FlexSystemProps.ts
new file mode 100644
index 00000000..696e9b08
--- /dev/null
+++ b/src/types/SystemProps/FlexSystemProps.ts
@@ -0,0 +1,13 @@
+import type { TypeWithMediaQueriesType } from '@/types';
+import type { FlexDirectionType, FlexWrapType } from '@/types';
+
+export interface FlexSystemProps {
+  /**
+   * flex-direction (including breakpoints modifiers)
+   */
+  flexDirection?: TypeWithMediaQueriesType<FlexDirectionType>;
+  /**
+   * Can flex items wrap onto multiple lines (including breakpoints modifiers)
+   */
+  flexWrap?: TypeWithMediaQueriesType<FlexWrapType>;
+}
diff --git a/src/types/SystemProps/HiddenSystemProps.ts b/src/types/SystemProps/HiddenSystemProps.ts
deleted file mode 100644
index 1d8d23d2..00000000
--- a/src/types/SystemProps/HiddenSystemProps.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { MediaQueryType } from '@/types';
-
-export interface HiddenSystemProps {
-  /**
-   * Defines hidden above strategy with media queries (is similar to "min-width") (including breakpoints modifiers)
-   */
-  hiddenAbove?: MediaQueryType;
-  /**
-   * Defines hidden below strategy with media queries (is similar to "max-width") (including breakpoints modifiers)
-   */
-  hiddenBelow?: MediaQueryType;
-}
diff --git a/src/types/SystemProps/LayoutSystemProps.ts b/src/types/SystemProps/LayoutSystemProps.ts
index 6c28cd67..16e72b8e 100644
--- a/src/types/SystemProps/LayoutSystemProps.ts
+++ b/src/types/SystemProps/LayoutSystemProps.ts
@@ -1,4 +1,4 @@
-import type { DisplayType, HeightType, TypeWithMediaQueriesType, WidthType } from '@/types';
+import type { DisplayType, HeightType, MediaQueryType, TypeWithMediaQueriesType, WidthType } from '@/types';
 
 export interface LayoutSystemProps {
   /**
@@ -14,19 +14,11 @@ export interface LayoutSystemProps {
    */
   height?: TypeWithMediaQueriesType<HeightType>;
   /**
-   * min-width (including breakpoints modifiers)
+   * Defines hidden above strategy with media queries (is similar to "min-width") (including breakpoints modifiers)
    */
-  minWidth?: TypeWithMediaQueriesType<WidthType>;
+  hiddenAbove?: MediaQueryType;
   /**
-   * max-width (including breakpoints modifiers)
+   * Defines hidden below strategy with media queries (is similar to "max-width") (including breakpoints modifiers)
    */
-  maxWidth?: TypeWithMediaQueriesType<WidthType>;
-  /**
-   * min-height (including breakpoints modifiers)
-   */
-  minHeight?: TypeWithMediaQueriesType<HeightType>;
-  /**
-   * max-height (including breakpoints modifiers)
-   */
-  maxHeight?: TypeWithMediaQueriesType<HeightType>;
+  hiddenBelow?: MediaQueryType;
 }
diff --git a/src/types/SystemProps/SystemProps.ts b/src/types/SystemProps/SystemProps.ts
index 91366932..6ead743c 100644
--- a/src/types/SystemProps/SystemProps.ts
+++ b/src/types/SystemProps/SystemProps.ts
@@ -1,6 +1,6 @@
 import type { ColorSystemProps } from './ColorSystemProps';
-import type { FlexBoxSystemProps } from './FlexBoxSystemProps';
-import type { HiddenSystemProps } from './HiddenSystemProps';
+import type { FlexItemSystemProps } from './FlexItemSystemProps';
+import type { FlexOrGridItemSystemProps } from './FlexOrGridItemSystemProps';
 import type { LayoutSystemProps } from './LayoutSystemProps';
 import type { SpacingSystemProps } from './SpacingSystemProps';
 import type { TypographySystemProps } from './TypographySystemProps';
@@ -10,5 +10,5 @@ export interface SystemProps
     ColorSystemProps,
     TypographySystemProps,
     LayoutSystemProps,
-    FlexBoxSystemProps,
-    HiddenSystemProps {}
+    FlexOrGridItemSystemProps,
+    FlexItemSystemProps {}
diff --git a/src/types/SystemProps/index.ts b/src/types/SystemProps/index.ts
index 3aecd8f8..5de9a31e 100644
--- a/src/types/SystemProps/index.ts
+++ b/src/types/SystemProps/index.ts
@@ -2,6 +2,8 @@ export * from './ColorSystemProps';
 export * from './SpacingSystemProps';
 export * from './SystemProps';
 export * from './TypographySystemProps';
-export * from './FlexBoxSystemProps';
 export * from './LayoutSystemProps';
-export * from './HiddenSystemProps';
+export * from './FlexOrGridSystemProps';
+export * from './FlexSystemProps';
+export * from './FlexOrGridItemSystemProps';
+export * from './FlexItemSystemProps';
diff --git a/src/types/tokenTypes.ts b/src/types/tokenTypes.ts
index 8b2f0703..a7fdb653 100644
--- a/src/types/tokenTypes.ts
+++ b/src/types/tokenTypes.ts
@@ -12,10 +12,10 @@ export type FontWeightType = keyof (typeof tokenVariables)['font-weight'];
 export type IconNameType = keyof (typeof tokenVariables)['asset']['icon'];
 
 export type HeadingSizeType = keyof (
-  | (typeof tokenVariables)['mobile']['typography']['heading']
+  | (typeof tokenVariables)['typography']['heading']
   | (typeof tokenVariables)['desktop']['typography']['heading']
 );
 export type TextSizeType = keyof (
-  | (typeof tokenVariables)['mobile']['typography']['text']
+  | (typeof tokenVariables)['typography']['text']
   | (typeof tokenVariables)['desktop']['typography']['text']
 );