diff --git a/.storybook/style.css b/.storybook/style.css
index 916c6e10..c5f9f034 100644
--- a/.storybook/style.css
+++ b/.storybook/style.css
@@ -1056,30 +1056,6 @@ input[type='number'] {
   letter-spacing: -0.5px;
 }
 
-.description-1 {
-  font-size: 1.875rem;
-  line-height: 2.625rem;
-  letter-spacing: -0.5px;
-}
-
-.description-2 {
-  font-size: 1.75rem;
-  line-height: 2.625rem;
-  letter-spacing: -0.5px;
-}
-
-.description-3 {
-  font-size: 1.625rem;
-  line-height: 2.5rem;
-  letter-spacing: -0.5px;
-}
-
-.description-4 {
-  font-size: 1.5rem;
-  line-height: 2.25rem;
-  letter-spacing: -0.5px;
-}
-
 .body-1 {
   font-size: 1.375rem;
   line-height: 1.875rem;
diff --git a/app/components/CodePreview.tsx b/app/components/CodePreview.tsx
index a26c9944..cdc8cf59 100644
--- a/app/components/CodePreview.tsx
+++ b/app/components/CodePreview.tsx
@@ -23,7 +23,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
         <button
           type="button"
           onClick={() => setActive(0)}
-          className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
+          className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-4 font-medium text-metal-400 first:ml-0 ${
             active === 0 ? '!border-b-white text-white' : ''
           }`}
           id="preview-btn">
@@ -32,7 +32,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
         <button
           id="code-btn"
           onClick={() => setActive(1)}
-          className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium  text-metal-400 first:ml-0 ${
+          className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-4 font-medium  text-metal-400 first:ml-0 ${
             active === 1 ? '!border-b-metal-100 text-white' : ''
           }`}>
           Code
@@ -54,7 +54,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
                 className="flex h-8 w-8 items-center justify-center rounded-md border-2 border-metal-800 bg-metal-900 transition-all duration-300 hover:border-transparent hover:bg-metal-700 md:h-9 md:w-9"
                 onClick={() => copyToClipboard(code)}>
                 {copy ? (
-                  <span className="flex items-center text-body-6">
+                  <span className="flex items-center text-body-5">
                     <Check size={20} color="white" />
                   </span>
                 ) : (
diff --git a/app/components/DocsContentLayout.tsx b/app/components/DocsContentLayout.tsx
index 677dd2be..aad29095 100644
--- a/app/components/DocsContentLayout.tsx
+++ b/app/components/DocsContentLayout.tsx
@@ -10,10 +10,8 @@ export const DocsContentLayout: FC<DocsContentLayoutProps> = function ({ title,
   return (
     <div>
       <div className="mb-[50px]">
-        <h1 className="mb-2 inline-block w-full text-body-1 font-semibold leading-10 tracking-[-0.5px] text-metal-900 md:text-[26px]">
-          {title}
-        </h1>
-        <p className="text-body-5 leading-6 tracking-[-0.3px] text-metal-700 md:text-body-4">{description}</p>
+        <h1 className="mb-2 inline-block w-full text-heading-6 font-semibold text-metal-900">{title}</h1>
+        <p className="text-body-3 text-metal-500">{description}</p>
       </div>
       <div id="mainContent">{children}</div>
     </div>
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index eb6616e8..60b9f7ef 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -14,14 +14,14 @@ const Footer = () => {
             <Link href="/" className="flex">
               <Image width="113" height="40" src="/images/keep.svg" alt="Keep React" />
             </Link>
-            <p className="mt-6 max-w-lg text-body-4 font-normal text-metal-700">
+            <p className="mt-6 max-w-lg text-body-3 font-normal text-metal-700">
               Keep React is an open-source component library built on Tailwind CSS and React.js. It provides a versatile
               set of pre-designed UI components to build modern web applications.
             </p>
           </div>
           <div>
-            <h4 className="mb-3 text-body-4 font-medium uppercase text-metal-900">RESOURCES</h4>
-            <ul className="flex flex-col gap-3 text-body-4 font-normal text-metal-700">
+            <h4 className="mb-3 text-body-3 font-medium uppercase text-metal-900">RESOURCES</h4>
+            <ul className="flex flex-col gap-3 text-body-3 font-normal text-metal-700">
               <li>
                 <a href="https://github.com/StaticMania/keep-react" target="_blank">
                   GitHub
@@ -44,8 +44,8 @@ const Footer = () => {
         </div>
       </div>
       <div className="border-t border-t-metal-100 py-5 text-center">
-        <p className="text-body-4 font-normal text-metal-900">
-          &copy;{new Date().getFullYear()} All Rights Reserved by
+        <p className="text-body-3 font-normal text-metal-900">
+          &copy;{new Date().getFullYear()} All Rights Reserved by &nbsp;
           <a href="https://staticmania.com/" target="_blank" className="font-medium">
             StaticMania
           </a>
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 0293fe47..6afc2479 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -42,7 +42,7 @@ const Navbar = () => {
                   key={nav.id}
                   href={nav.href}
                   target={nav.redirect ? '_blank' : '_self'}
-                  className="text-body-5 font-normal text-metal-500 hover:text-metal-900 active:text-metal-900">
+                  className="text-body-4 font-normal text-metal-500 hover:text-metal-900 active:text-metal-900">
                   {nav.name}
                 </Link>
               ))}
@@ -87,7 +87,7 @@ const Navbar = () => {
             </a>
             <Link
               href="/docs/getting-started/Introduction"
-              className="group h-min w-fit justify-center rounded-md border border-metal-900  bg-metal-900 px-4 py-2.5 text-center text-body-5 font-medium capitalize text-white transition-all duration-75 ease-in hover:bg-metal-800 focus:ring-4 focus:ring-metal-800 active:bg-metal-900">
+              className="group h-min w-fit justify-center rounded-md border border-metal-900  bg-metal-900 px-4 py-2.5 text-center text-body-4 font-medium capitalize text-white transition-all duration-75 ease-in hover:bg-metal-800 focus:ring-4 focus:ring-metal-800 active:bg-metal-900">
               get started
             </Link>
           </div>
diff --git a/app/docs.css b/app/docs.css
index cfb20d20..d6864b1d 100644
--- a/app/docs.css
+++ b/app/docs.css
@@ -1,8 +1,8 @@
 #mainContent > h2 {
-  @apply border-b border-b-metal-200 pb-2 text-body-3 font-semibold leading-6 tracking-[-0.3px] text-metal-900;
+  @apply border-b border-b-metal-200 pb-2 text-body-2 font-semibold text-metal-900;
 }
 #mainContent > p {
-  @apply mt-4 text-body-5 font-normal leading-6 tracking-[-0.3px] text-metal-700 md:text-body-4;
+  @apply mt-4 text-body-3 font-normal text-metal-500;
 }
 
 #mainContent > p a {
@@ -56,7 +56,7 @@
 }
 
 #visible-table-of-contents li {
-  @apply my-2 -ml-px border-l border-l-transparent pl-3 text-body-5 leading-7 tracking-[-0.2px] text-metal-500 hover:border-l-metal-900 hover:text-metal-900  active:text-metal-900;
+  @apply my-2 -ml-px border-l border-l-transparent pl-3 text-body-4 text-metal-500 hover:border-l-metal-900 hover:text-metal-900 active:text-metal-900;
 }
 
 #visible-table-of-contents li:has(.active-link) {
diff --git a/app/docs/components/card/variant/PostCard.tsx b/app/docs/components/card/variant/PostCard.tsx
index a584d914..8d0bf371 100644
--- a/app/docs/components/card/variant/PostCard.tsx
+++ b/app/docs/components/card/variant/PostCard.tsx
@@ -18,11 +18,11 @@ const PostCard = () => {
         <Card.Container className="absolute flex items-start px-5 py-3">
           <Card.Container>
             <Card.Title className=" font-medium text-white md:text-body-2">Keep Design System</Card.Title>
-            <Card.Description className="text-body-6 font-normal text-white md:text-body-5">
+            <Card.Description className="text-body-5 font-normal text-white md:text-body-5">
               Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo excepturi quam incidunt tempora?
             </Card.Description>
             <Card.Link
-              className="mt-3 flex items-center gap-1 text-body-6 font-normal text-white md:text-body-5"
+              className="mt-3 flex items-center gap-1 text-body-5 font-normal text-white md:text-body-5"
               href="/"
               icon={<CaretRight size={16} color="#fff" />}
               iconPosition="left">
@@ -49,7 +49,7 @@ const PostCard = () => {
             <Card.Title className="text-body-5 font-medium text-metal-700 md:text-body-2">
               Keep Design System
             </Card.Title>
-            <Card.Description className="text-body-6 font-normal text-metal-500 md:text-body-5">
+            <Card.Description className="text-body-5 font-normal text-metal-500 md:text-body-5">
               Component design systems can help developers to be more productive by providing them with a ready-made set
               of components to use.
             </Card.Description>
@@ -84,12 +84,12 @@ export const CardComponent = () => {
             <Card.Title className=" md:text-body-2 font-medium text-white">
               Keep React
             </Card.Title>
-            <Card.Description className="text-body-6 md:text-body-5 font-normal text-white">
+            <Card.Description className="text-body-5 md:text-body-5 font-normal text-white">
               Component design systems can help developers to be more productive
               by providing them with a ready-made set of components to use.
             </Card.Description>
             <Card.Link
-              className="mt-3 flex items-center gap-1 text-body-6 md:text-body-5 font-normal text-white"
+              className="mt-3 flex items-center gap-1 text-body-5 md:text-body-5 font-normal text-white"
               href="/"
               icon={<CaretRight size={16} color="#fff" />}
               iconPosition="left"
@@ -117,7 +117,7 @@ export const CardComponent = () => {
             <Card.Title className="text-body-5 md:text-body-2 font-medium text-metal-700">
               Keep React
             </Card.Title>
-            <Card.Description className="text-body-6 md:text-body-5 font-normal text-metal-500">
+            <Card.Description className="text-body-5 md:text-body-5 font-normal text-metal-500">
               Component design systems can help developers to be more productive
               by providing them with a ready-made set of components to use.
             </Card.Description>
diff --git a/app/docs/components/card/variant/PricingCard.tsx b/app/docs/components/card/variant/PricingCard.tsx
index 0f61e682..de325008 100644
--- a/app/docs/components/card/variant/PricingCard.tsx
+++ b/app/docs/components/card/variant/PricingCard.tsx
@@ -13,7 +13,7 @@ const PricingCard = () => {
         <Card.Container>
           <Card.Title className="text-body-4 font-medium text-primary-500 md:text-body-2">Business</Card.Title>
           <Card.Title className="my-3 flex items-center">
-            <span className="text-description-2 font-bold text-metal-800 md:text-heading-4">$79</span>
+            <span className="text-heading-6 font-bold text-metal-800 md:text-heading-3">$79</span>
             <span className="ml-1 text-body-4 font-medium text-metal-400">/ mth</span>
           </Card.Title>
           <Card.Description className="text-body-5 text-metal-700 md:text-body-4">
@@ -69,7 +69,7 @@ export const CardComponent = () => {
             Business
           </Card.Title>
           <Card.Title className="flex items-center my-3">
-            <span className="text-heading-4 font-bold text-metal-800">$79</span>
+            <span className="text-heading-3 font-bold text-metal-800">$79</span>
             <span className="ml-1 text-body-4 font-medium text-metal-400">
               / mth
             </span>
diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx
index 1e363013..83967c42 100644
--- a/app/docs/components/card/variant/ProductCard.tsx
+++ b/app/docs/components/card/variant/ProductCard.tsx
@@ -55,8 +55,8 @@ const ProductCard = () => {
               <Card.Description className="text-body-5 font-medium text-metal-500">By Static Mania</Card.Description>
             </Card.Container>
             <Card.Container className="flex items-center justify-between">
-              <Card.Title className="text-body-6 font-medium text-metal-500">4:05</Card.Title>
-              <Card.Title className="text-body-6 font-medium text-metal-500">10:05</Card.Title>
+              <Card.Title className="text-body-5 font-medium text-metal-500">4:05</Card.Title>
+              <Card.Title className="text-body-5 font-medium text-metal-500">10:05</Card.Title>
             </Card.Container>
             <LineProgress progress={45} />
             <Card.Container className="flex items-center justify-between">
@@ -175,8 +175,8 @@ export const CardComponent = () => {
               <Card.Description className="text-body-5 font-medium text-metal-500">By Static Mania</Card.Description>
             </Card.Container>
             <Card.Container className="flex items-center justify-between">
-              <Card.Title className="text-body-6 font-medium text-metal-500">4:05</Card.Title>
-              <Card.Title className="text-body-6 font-medium text-metal-500">10:05</Card.Title>
+              <Card.Title className="text-body-5 font-medium text-metal-500">4:05</Card.Title>
+              <Card.Title className="text-body-5 font-medium text-metal-500">10:05</Card.Title>
             </Card.Container>
             <LineProgress progress={45} />
             <Card.Container className="flex items-center justify-between">
diff --git a/app/docs/components/card/variant/ProfileCard.tsx b/app/docs/components/card/variant/ProfileCard.tsx
index d3d94bc1..d74bf36c 100644
--- a/app/docs/components/card/variant/ProfileCard.tsx
+++ b/app/docs/components/card/variant/ProfileCard.tsx
@@ -15,7 +15,7 @@ const ProfileCard = () => {
           <Avatar size="lg" shape="circle" img="https://randomuser.me/api/portraits/men/11.jpg" />
           <Card.Container className="ml-3">
             <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Md Ariful Islam</Card.Title>
-            <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">Product Designer</Card.Title>
+            <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">Product Designer</Card.Title>
           </Card.Container>
         </Card.Container>
       </Card>
@@ -28,7 +28,7 @@ const ProfileCard = () => {
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">
             Khairul Islam Ridoy
           </Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="circled mx-auto flex max-w-[220px] items-center justify-center divide-x divide-metal-200 rounded-md border border-metal-200 p-1 md:p-2">
           <Card.Link
@@ -69,7 +69,7 @@ export const CardComponent = () => {
           <Avatar size="lg" shape="circle" img="https://randomuser.me/api/portraits/men/11.jpg" />
           <Card.Container className="ml-3">
             <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Md Ariful Islam</Card.Title>
-            <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">Product Designer</Card.Title>
+            <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">Product Designer</Card.Title>
           </Card.Container>
         </Card.Container>
       </Card>
@@ -86,7 +86,7 @@ export const CardComponent = () => {
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">
             Khairul Islam Ridoy
           </Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="circled mx-auto flex max-w-[220px] items-center justify-center divide-x divide-metal-200 rounded-md border border-metal-200 p-1 md:p-2">
           <Card.Link
diff --git a/app/docs/components/card/variant/ProfileCardWithCover.tsx b/app/docs/components/card/variant/ProfileCardWithCover.tsx
index 1bed1c35..863d4ea5 100644
--- a/app/docs/components/card/variant/ProfileCardWithCover.tsx
+++ b/app/docs/components/card/variant/ProfileCardWithCover.tsx
@@ -17,7 +17,7 @@ const ProfileCardWithCover = () => {
         </Card.Container>
         <Card.Container className="mb-3 mt-10 text-center">
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Khairul Islam</Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="flex w-full justify-between border-t border-t-metal-50 px-5 py-3">
           <Card.Container className="text-center">
@@ -64,7 +64,7 @@ export const CardComponent = () => {
         </Card.Container>
         <Card.Container className="mb-3 mt-10 text-center">
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Khairul Islam</Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="flex w-full justify-between border-t border-t-metal-50 px-5 py-3">
           <Card.Container className="text-center">
diff --git a/app/docs/components/dropdown/variant/CustomDropdown.tsx b/app/docs/components/dropdown/variant/CustomDropdown.tsx
index 6daa180d..040cc2a8 100644
--- a/app/docs/components/dropdown/variant/CustomDropdown.tsx
+++ b/app/docs/components/dropdown/variant/CustomDropdown.tsx
@@ -47,7 +47,7 @@ const CustomDropdown = () => {
               <Typography variant="p" className="text-body-5 font-medium text-metal-800">
                 {data.name}
               </Typography>
-              <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+              <Typography variant="p" className="text-body-5 font-normal text-metal-400">
                 {data.title}
               </Typography>
             </div>
@@ -75,7 +75,7 @@ export const DropdownComponent = () => {
               <Typography variant="p" className="text-body-5 font-medium text-metal-800">
                 {data.name}
               </Typography>
-              <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+              <Typography variant="p" className="text-body-5 font-normal text-metal-400">
                 {data.title}
               </Typography>
             </div>
diff --git a/app/docs/components/modal/variant/HistoryModal.tsx b/app/docs/components/modal/variant/HistoryModal.tsx
index 7a281359..ee35bb03 100644
--- a/app/docs/components/modal/variant/HistoryModal.tsx
+++ b/app/docs/components/modal/variant/HistoryModal.tsx
@@ -53,7 +53,7 @@ const HistoryModal = () => {
               <Avatar img="/images/avatar/avatar-4.png" />
               <div>
                 <p className="text-body-5 font-semibold text-gray-500">Albert Flores</p>
-                <p className="text-body-6 text-gray-500">keep@designsystem.com</p>
+                <p className="text-body-5 text-gray-500">keep@designsystem.com</p>
               </div>
             </div>
           </div>
@@ -135,7 +135,7 @@ export const ModalComponent = () => {
               <Avatar shape="circle" img="/images/avatar/avatar-4.png" statusPosition="bottom-right" size="md" />
               <div>
                 <p className="text-body-5 font-semibold text-gray-500">Albert Flores</p>
-                <p className="text-body-6 text-gray-500">keep@designsystem.com</p>
+                <p className="text-body-5 text-gray-500">keep@designsystem.com</p>
               </div>
             </div>
           </div>
diff --git a/app/docs/components/table/variant/BorderedTable.tsx b/app/docs/components/table/variant/BorderedTable.tsx
index fffb047a..92e06b3b 100644
--- a/app/docs/components/table/variant/BorderedTable.tsx
+++ b/app/docs/components/table/variant/BorderedTable.tsx
@@ -28,7 +28,7 @@ const BorderedTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell>Status</Table.HeadCell>
           <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
@@ -136,7 +136,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[290px]">
-          <p className="text-body-6 font-medium text-metal-400">Type</p>
+          <p className="text-body-5 font-medium text-metal-400">Type</p>
         </Table.HeadCell>
         <Table.HeadCell>Status</Table.HeadCell>
         <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
diff --git a/app/docs/components/table/variant/DefaultTable.tsx b/app/docs/components/table/variant/DefaultTable.tsx
index 096f5e17..b6fc4ce5 100644
--- a/app/docs/components/table/variant/DefaultTable.tsx
+++ b/app/docs/components/table/variant/DefaultTable.tsx
@@ -34,7 +34,7 @@ const DefaultTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell>Status</Table.HeadCell>
           <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
@@ -144,7 +144,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[290px]">
-          <p className="text-body-6 font-medium text-metal-400">Type</p>
+          <p className="text-body-5 font-medium text-metal-400">Type</p>
         </Table.HeadCell>
         <Table.HeadCell>Status</Table.HeadCell>
         <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
diff --git a/app/docs/components/table/variant/FilesUploadedTable.tsx b/app/docs/components/table/variant/FilesUploadedTable.tsx
index 14a91ef7..72a44df2 100644
--- a/app/docs/components/table/variant/FilesUploadedTable.tsx
+++ b/app/docs/components/table/variant/FilesUploadedTable.tsx
@@ -30,7 +30,7 @@ const FilesUploadedTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[344px]">
-            <p className="text-body-6 font-medium text-metal-400">File no.</p>
+            <p className="text-body-5 font-medium text-metal-400">File no.</p>
           </Table.HeadCell>
           <Table.HeadCell className="min-w-[160px]">File size</Table.HeadCell>
           <Table.HeadCell className="min-w-[171px]">Date uploaded</Table.HeadCell>
@@ -48,7 +48,7 @@ const FilesUploadedTable = () => {
                       <Avatar shape="circle" img="/images/icon/file.svg" size="md" />
                       <div>
                         <p className="-mb-0.5 text-body-4 font-medium text-metal-600">{cell.fileName}</p>
-                        <p className="text-body-6 font-normal text-metal-500">{cell.fileSize}</p>
+                        <p className="text-body-5 font-normal text-metal-500">{cell.fileSize}</p>
                       </div>
                     </div>
                   </div>
@@ -56,11 +56,11 @@ const FilesUploadedTable = () => {
               </Table.Cell>
               <Table.Cell>
                 <p className="text-body-5 font-medium text-metal-500">{cell.totalSize}</p>
-                <p className="text-body-6 font-normal text-metal-500">{cell.fileSize}</p>
+                <p className="text-body-5 font-normal text-metal-500">{cell.fileSize}</p>
               </Table.Cell>
               <Table.Cell>
                 <p className="text-body-5 font-medium text-metal-500">{cell.date}</p>
-                <p className="text-body-6 font-normal text-metal-500">{cell.time}</p>
+                <p className="text-body-5 font-normal text-metal-500">{cell.time}</p>
               </Table.Cell>
               <Table.Cell>
                 <p className="text-body-5 font-medium text-metal-500">{cell.date}</p>
@@ -119,7 +119,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[344px]">
-          <p className="text-body-6 font-medium text-metal-400">File no.</p>
+          <p className="text-body-5 font-medium text-metal-400">File no.</p>
         </Table.HeadCell>
         <Table.HeadCell className="min-w-[160px]">File size</Table.HeadCell>
         <Table.HeadCell className="min-w-[171px]">Date uploaded</Table.HeadCell>
@@ -136,7 +136,7 @@ export const TableComponent = () => {
                   <Avatar shape="circle" img="/images/icon/file.svg" size="md" />
                   <div>
                     <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Static Next Plan.pdf</p>
-                    <p className="text-body-6 font-normal text-metal-500">200 KB</p>
+                    <p className="text-body-5 font-normal text-metal-500">200 KB</p>
                   </div>
                 </div>
               </div>
@@ -144,11 +144,11 @@ export const TableComponent = () => {
           </Table.Cell>
           <Table.Cell>
             <p className="text-body-5 font-medium text-metal-500">Total 0.2 MB</p>
-            <p className="text-body-6 font-normal text-metal-500">200 KB</p>
+            <p className="text-body-5 font-normal text-metal-500">200 KB</p>
           </Table.Cell>
           <Table.Cell>
             <p className="text-body-5 font-medium text-metal-500">Jan 10, 2023</p>
-            <p className="text-body-6 font-normal text-metal-500">4:45 pm</p>
+            <p className="text-body-5 font-normal text-metal-500">4:45 pm</p>
           </Table.Cell>
           <Table.Cell>
             <p className="text-body-5 font-medium text-metal-500">Jan 10, 2023</p>
diff --git a/app/docs/components/table/variant/HoverableTable.tsx b/app/docs/components/table/variant/HoverableTable.tsx
index e03a6221..8f91e060 100644
--- a/app/docs/components/table/variant/HoverableTable.tsx
+++ b/app/docs/components/table/variant/HoverableTable.tsx
@@ -34,7 +34,7 @@ const HoverableTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell>Status</Table.HeadCell>
           <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
@@ -148,7 +148,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[290px]">
-          <p className="text-body-6 font-medium text-metal-400">Type</p>
+          <p className="text-body-5 font-medium text-metal-400">Type</p>
         </Table.HeadCell>
         <Table.HeadCell>Status</Table.HeadCell>
         <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
diff --git a/app/docs/components/table/variant/OrdersTable.tsx b/app/docs/components/table/variant/OrdersTable.tsx
index 1672cee6..dea31b87 100644
--- a/app/docs/components/table/variant/OrdersTable.tsx
+++ b/app/docs/components/table/variant/OrdersTable.tsx
@@ -31,7 +31,7 @@ const OrdersTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[302px]">
-            <p className="text-body-6 font-medium text-metal-400">Order no.</p>
+            <p className="text-body-5 font-medium text-metal-400">Order no.</p>
           </Table.HeadCell>
           <Table.HeadCell
             className="min-w-[165px]"
@@ -67,7 +67,7 @@ const OrdersTable = () => {
               </Table.Cell>
               <Table.Cell>
                 <p className="text-body-5 font-medium text-metal-500">{cell.date}</p>
-                <p className="text-body-6 font-normal text-metal-500">{cell.time}</p>
+                <p className="text-body-5 font-normal text-metal-500">{cell.time}</p>
               </Table.Cell>
               <Table.Cell>
                 <Image src={cell.img} alt="country" height="18" width="24" />
@@ -143,7 +143,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[302px]">
-          <p className="text-body-6 font-medium text-metal-400">Order no.</p>
+          <p className="text-body-5 font-medium text-metal-400">Order no.</p>
         </Table.HeadCell>
         <Table.HeadCell
           className="min-w-[165px]"
@@ -178,7 +178,7 @@ export const TableComponent = () => {
           </Table.Cell>
           <Table.Cell>
             <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-            <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+            <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
           </Table.Cell>
           <Table.Cell>
             <Image src="/images/icon/country-0.svg" alt="country" height="18" width="24" />
diff --git a/app/docs/components/table/variant/StripedTable.tsx b/app/docs/components/table/variant/StripedTable.tsx
index a8e0b2b9..9e14802e 100644
--- a/app/docs/components/table/variant/StripedTable.tsx
+++ b/app/docs/components/table/variant/StripedTable.tsx
@@ -34,7 +34,7 @@ const StripedTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell>Status</Table.HeadCell>
           <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
@@ -148,7 +148,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[290px]">
-          <p className="text-body-6 font-medium text-metal-400">Type</p>
+          <p className="text-body-5 font-medium text-metal-400">Type</p>
         </Table.HeadCell>
         <Table.HeadCell>Status</Table.HeadCell>
         <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
diff --git a/app/docs/components/table/variant/TransactionsTable.tsx b/app/docs/components/table/variant/TransactionsTable.tsx
index 61b32214..f58f2a75 100644
--- a/app/docs/components/table/variant/TransactionsTable.tsx
+++ b/app/docs/components/table/variant/TransactionsTable.tsx
@@ -30,7 +30,7 @@ const TransactionsTable = () => {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell className="min-w-[183px]" icon={<ArrowsDownUp size={14} color="#8897AE" />}>
             Date
@@ -56,7 +56,7 @@ const TransactionsTable = () => {
                       <Avatar img={cell.img} />
                       <div>
                         <p className="-mb-0.5 text-body-4 font-medium text-metal-600">{cell.name}</p>
-                        <span className="text-body-6 font-normal text-metal-500">{cell.tag}</span>
+                        <span className="text-body-5 font-normal text-metal-500">{cell.tag}</span>
                       </div>
                     </div>
                   </div>
@@ -64,7 +64,7 @@ const TransactionsTable = () => {
               </Table.Cell>
               <Table.Cell>
                 <p className="text-body-5 font-medium text-metal-500">{cell.date}</p>
-                <p className="text-body-6 font-normal text-metal-500">{cell.time}</p>
+                <p className="text-body-5 font-normal text-metal-500">{cell.time}</p>
               </Table.Cell>
               <Table.Cell>
                 <p className="text-body-5 font-medium text-metal-500">${cell.amount}</p>
@@ -76,7 +76,7 @@ const TransactionsTable = () => {
               </Table.Cell>
               <Table.Cell>
                 <p className="text-body-5 font-medium text-metal-500">{cell.date}</p>
-                <p className="text-body-6 font-normal text-metal-500">{cell.time}</p>
+                <p className="text-body-5 font-normal text-metal-500">{cell.time}</p>
               </Table.Cell>
               <Table.Cell>
                 <Button variant="outline" size="sm" shape="circle">
@@ -122,7 +122,7 @@ export const TableComponent = () => {
       </Table.Caption>
       <Table.Head>
         <Table.HeadCell className="min-w-[290px]">
-          <p className="text-body-6 font-medium text-metal-400">Type</p>
+          <p className="text-body-5 font-medium text-metal-400">Type</p>
         </Table.HeadCell>
         <Table.HeadCell className="min-w-[183px]" icon={<ArrowsDownUp size={14} color="#8897AE" />}>
           Date
@@ -147,7 +147,7 @@ export const TableComponent = () => {
                   <Avatar img="/images/company/paypal.png" />
                   <div>
                     <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Paypal</p>
-                    <span className="text-body-6 font-normal text-metal-500">Withdraw</span>
+                    <span className="text-body-5 font-normal text-metal-500">Withdraw</span>
                   </div>
                 </div>
               </div>
@@ -155,7 +155,7 @@ export const TableComponent = () => {
           </Table.Cell>
           <Table.Cell>
             <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-            <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+            <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
           </Table.Cell>
           <Table.Cell>
             <p className="text-body-5 font-medium text-metal-500">$652.00</p>
@@ -167,7 +167,7 @@ export const TableComponent = () => {
           </Table.Cell>
           <Table.Cell>
             <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-            <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+            <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
           </Table.Cell>
           <Table.Cell>
             <Button variant="outline" size="sm" shape="circle">
diff --git a/app/docs/components/upload/variant/DefaultUpload.tsx b/app/docs/components/upload/variant/DefaultUpload.tsx
index c13370d6..9fa2a846 100644
--- a/app/docs/components/upload/variant/DefaultUpload.tsx
+++ b/app/docs/components/upload/variant/DefaultUpload.tsx
@@ -28,7 +28,7 @@ const DefaultUpload = () => {
           <Typography variant="p" className="text-body-4 font-medium text-metal-600">
             Drag & Drop or Choose File to Upload
           </Typography>
-          <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+          <Typography variant="p" className="text-body-5 font-normal text-metal-400">
             DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
           </Typography>
         </Upload.Text>
@@ -68,7 +68,7 @@ export const UploadComponent = () => {
           <Typography variant="p" className="text-body-4 font-medium text-metal-600">
             Drag & Drop or Choose File to Upload
           </Typography>
-          <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+          <Typography variant="p" className="text-body-5 font-normal text-metal-400">
             DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
           </Typography>
         </Upload.Text>
diff --git a/app/docs/components/upload/variant/HorizontalUpload.tsx b/app/docs/components/upload/variant/HorizontalUpload.tsx
index 831abdb1..605291f9 100644
--- a/app/docs/components/upload/variant/HorizontalUpload.tsx
+++ b/app/docs/components/upload/variant/HorizontalUpload.tsx
@@ -20,7 +20,7 @@ const HorizontalUpload = () => {
           <Typography variant="p" className="text-body-4 font-medium text-metal-600">
             Choose File to Upload
           </Typography>
-          <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+          <Typography variant="p" className="text-body-5 font-normal text-metal-400">
             PDF and JPG formats
           </Typography>
         </Upload.Text>
@@ -60,7 +60,7 @@ export const UploadComponent = () => {
           <Typography variant="p" className="text-body-4 font-medium text-metal-600">
             Choose File to Upload
           </Typography>
-          <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+          <Typography variant="p" className="text-body-5 font-normal text-metal-400">
             PDF and JPG formats
           </Typography>
         </Upload.Text>
diff --git a/app/docs/components/upload/variant/SingleUpload.tsx b/app/docs/components/upload/variant/SingleUpload.tsx
index 07042659..a829eb7c 100644
--- a/app/docs/components/upload/variant/SingleUpload.tsx
+++ b/app/docs/components/upload/variant/SingleUpload.tsx
@@ -20,7 +20,7 @@ const SingleUpload = () => {
           <Typography variant="p" className="text-body-4 font-medium text-metal-600">
             Drag & Drop or Choose File to Upload
           </Typography>
-          <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+          <Typography variant="p" className="text-body-5 font-normal text-metal-400">
             DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
           </Typography>
         </Upload.Text>
@@ -60,7 +60,7 @@ export const UploadComponent = () => {
           <Typography variant="p" className="text-body-4 font-medium text-metal-600">
             Drag & Drop or Choose File to Upload
           </Typography>
-          <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+          <Typography variant="p" className="text-body-5 font-normal text-metal-400">
             DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
           </Typography>
         </Upload.Text>
diff --git a/app/docs/components/upload/variant/UploadDisabled.tsx b/app/docs/components/upload/variant/UploadDisabled.tsx
index 21d345f6..da1a0972 100644
--- a/app/docs/components/upload/variant/UploadDisabled.tsx
+++ b/app/docs/components/upload/variant/UploadDisabled.tsx
@@ -20,7 +20,7 @@ const DisabledUpload = () => {
           <Typography variant="p" className="text-body-4 font-medium text-metal-600">
             Drag & Drop or Choose File to Upload
           </Typography>
-          <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+          <Typography variant="p" className="text-body-5 font-normal text-metal-400">
             DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
           </Typography>
         </Upload.Text>
@@ -60,7 +60,7 @@ export const UploadComponent = () => {
           <Typography variant="p" className="text-body-4 font-medium text-metal-600">
             Drag & Drop or Choose File to Upload
           </Typography>
-          <Typography variant="p" className="text-body-6 font-normal text-metal-400">
+          <Typography variant="p" className="text-body-5 font-normal text-metal-400">
             DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
           </Typography>
         </Upload.Text>
diff --git a/app/docs/getting-started/Typography/Typography.mdx b/app/docs/getting-started/Typography/Typography.mdx
index dbc2b749..03cdade0 100644
--- a/app/docs/getting-started/Typography/Typography.mdx
+++ b/app/docs/getting-started/Typography/Typography.mdx
@@ -1,9 +1,8 @@
-import CodePreview from "../../../components/CodePreview"
-import ComponentApi from "../../../components/ComponentApi"
+import CodePreview from '../../../components/CodePreview'
+import ComponentApi from '../../../components/ComponentApi'
 import { Heading, HeadingCode } from './variant/Heading'
 import { Display, DisplayCode } from './variant/Display'
 import { BodyTypo, BodyTypoCode } from './variant/Body'
-import { Description, DescriptionCode } from './variant/Description'
 import { TypographyAPI } from './TypographyAPI'
 
 ## Table of Contents
@@ -18,17 +17,9 @@ The Heading Typography component in Keep React allows you to style headings easi
   <Heading />
 </CodePreview>
 
-## Description Typography
-
-Enhance your content with the Description Typography component in Keep React. Use `<Typography>` with the `variant` prop, providing four distinct description styles from `"description-1"` to `"description-4"`.
-
-<CodePreview github="Typography" code={DescriptionCode}>
-  <Description />
-</CodePreview>
-
 ## Body Typography
 
-Elevate the readability of your text with the Body Typography component in Keep React. Employ `<Typography>` with the `variant` prop, featuring six body text styles from `"body-1"` to `"body-6"`.
+Elevate the readability of your text with the Body Typography component in Keep React. Employ `<Typography>` with the `variant` prop, featuring six body text styles from `"body-1"` to `"body-5"`.
 
 <CodePreview github="Typography" code={BodyTypoCode}>
   <BodyTypo />
@@ -36,7 +27,7 @@ Elevate the readability of your text with the Body Typography component in Keep
 
 ## Display Typography
 
-Make a visual impact with the Display Typography component in Keep React. Use `<Typography>` with the `variant` prop, offering four display styles from `"display-1"` to `"display-4"`.
+Make a visual impact with the Display Typography component in Keep React. Use `<Typography>` with the `variant` prop with `'display'`.
 
 <CodePreview github="Typography" code={DisplayCode}>
   <Display />
diff --git a/app/docs/getting-started/Typography/variant/Body.tsx b/app/docs/getting-started/Typography/variant/Body.tsx
index 92ae6fff..a3d122bb 100644
--- a/app/docs/getting-started/Typography/variant/Body.tsx
+++ b/app/docs/getting-started/Typography/variant/Body.tsx
@@ -10,7 +10,6 @@ const BodyTypo = () => {
       <Typography variant="body-3">Body Text 3</Typography>
       <Typography variant="body-4">Body Text 4</Typography>
       <Typography variant="body-5">Body Text 5</Typography>
-      <Typography variant="body-6">Body Text 6</Typography>
     </Typography>
   )
 }
@@ -26,7 +25,6 @@ export const BodyTypo = () => {
       <Typography variant="body-3">Body Text 3</Typography>
       <Typography variant="body-4">Body Text 4</Typography>
       <Typography variant="body-5">Body Text 5</Typography>
-      <Typography variant="body-6">Body Text 6</Typography>
     </Typography>
   )
 }
diff --git a/app/docs/getting-started/Typography/variant/Description.tsx b/app/docs/getting-started/Typography/variant/Description.tsx
deleted file mode 100644
index b9686593..00000000
--- a/app/docs/getting-started/Typography/variant/Description.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { Typography } from '../../../../src'
-
-const Description = () => {
-  return (
-    <Typography variant="div" className="space-y-4">
-      <Typography variant="description-1">Description 1</Typography>
-      <Typography variant="description-2">Description 2</Typography>
-      <Typography variant="description-3">Description 3</Typography>
-      <Typography variant="description-4">Description 4</Typography>
-    </Typography>
-  )
-}
-
-const DescriptionCode = `
-'use client'
-import { Typography } from 'keep-react'
-export const Description = () => {
-  return (
-    <Typography variant='div' className="space-y-4">
-      <Typography variant="description-1">Description 1</Typography>
-      <Typography variant="description-2">Description 2</Typography>
-      <Typography variant="description-3">Description 3</Typography>
-      <Typography variant="description-4">Description 4</Typography>
-    </Typography>
-  )
-}
-`
-
-export { Description, DescriptionCode }
diff --git a/app/docs/getting-started/Typography/variant/Display.tsx b/app/docs/getting-started/Typography/variant/Display.tsx
index fd604088..24ce6af1 100644
--- a/app/docs/getting-started/Typography/variant/Display.tsx
+++ b/app/docs/getting-started/Typography/variant/Display.tsx
@@ -1,14 +1,10 @@
 'use client'
-
 import { Typography } from '../../../../src'
 
 const Display = () => {
   return (
-    <Typography variant="div" className="scale-75 space-y-4">
-      <Typography variant="display-1">Display 1</Typography>
-      <Typography variant="display-2">Display 2</Typography>
-      <Typography variant="display-3">Display 3</Typography>
-      <Typography variant="display-4">Display 4</Typography>
+    <Typography variant="div" className="">
+      <Typography variant="display">Display</Typography>
     </Typography>
   )
 }
@@ -16,15 +12,15 @@ const Display = () => {
 const DisplayCode = `
 'use client'
 import { Typography } from 'keep-react'
+
 export const DisplayTypo = () => {
   return (
-    <Typography variant='div' className="space-y-4">
-      <Typography variant="display-1">Display 1</Typography>
-      <Typography variant="display-2">Display 2</Typography>
-      <Typography variant="display-3">Display 3</Typography>
+    <Typography variant="div">
+      <Typography variant="display">Display</Typography>
     </Typography>
   )
 }
+
 `
 
 export { Display, DisplayCode }
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
index 007def53..57477137 100644
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@@ -89,7 +89,7 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
             <Accordion flush openFirstPanel>
               <Accordion.Panel className="!border-b-0">
                 <Accordion.Container className="p-0">
-                  <Accordion.Title className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
+                  <Accordion.Title className="text-body-3 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
                     Getting Started
                   </Accordion.Title>
                 </Accordion.Container>
@@ -98,7 +98,7 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
                     {gettingStartedRoutes.map((route) => (
                       <Typography variant="li" key={route.id}>
                         <Link
-                          className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
+                          className={`-ml-px border-l border-l-transparent pl-3 text-body-4 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
                             IsActive(route.href)
                               ? 'border-l !border-primary-500 text-primary-500 transition-colors duration-150'
                               : ''
@@ -115,7 +115,7 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
             <Accordion openFirstPanel flush>
               <Accordion.Panel className="!border-b-0">
                 <Accordion.Container className="p-0">
-                  <Accordion.Title className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
+                  <Accordion.Title className="text-body-3 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
                     Components
                   </Accordion.Title>
                 </Accordion.Container>
@@ -124,7 +124,7 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
                     {routes.map((route) => (
                       <Typography variant="li" key={route.id}>
                         <Link
-                          className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
+                          className={`-ml-px border-l border-l-transparent pl-3 text-body-4 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
                             IsActive(route.href)
                               ? 'border-l !border-primary-500 text-primary-500 transition-colors duration-150'
                               : ''
@@ -149,7 +149,7 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
           <aside id="linkPage" className="sticky top-28 h-[80vh] 2xl:top-60">
             <div className="2xl:pl-5">
               <div className="flex flex-col justify-between overflow-y-auto">
-                <h4 className="mb-2 text-body-5 font-semibold uppercase text-black/100">On this page</h4>
+                <h4 className="mb-2 text-body-4 font-semibold uppercase text-black/100">On this page</h4>
                 <nav id="visible-table-of-contents">
                   <ul
                     dangerouslySetInnerHTML={{
diff --git a/app/main.css b/app/main.css
index 96241bba..a089b0bf 100644
--- a/app/main.css
+++ b/app/main.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 .ReactCollapse--collapse {
   transition: height 300ms;
 }
@@ -821,7 +822,7 @@ input[type='number'] {
   justify-content: center;
   align-items: center;
   transform: translate(-50%, -50%);
-  clippath: polygon(100% 0, 0 50%, 100% 100%);
+  clip-path: polygon(100% 0, 0 50%, 100% 100%);
   background-color: #005bea;
   width: 8px;
   height: 8px;
@@ -835,7 +836,7 @@ input[type='number'] {
   justify-content: center;
   align-items: center;
   transform: translate(-50%, -50%);
-  clippath: polygon(0 0, 0 100%, 100% 50%);
+  clip-path: polygon(0 0, 0 100%, 100% 50%);
   background-color: #005bea;
   width: 8px;
   height: 8px;
@@ -933,7 +934,7 @@ input[type='number'] {
   padding: 0 9px 0 5px;
 }
 .rc-tooltip-inner {
-  @apply rounded-md border border-metal-200 bg-white px-2 py-[6px] text-body-6 font-medium text-metal-600 shadow-small;
+  @apply rounded-md border border-metal-200 bg-white px-2 py-[6px] text-body-5 font-medium text-metal-600 shadow-small;
 }
 .rc-tooltip-arrow {
   position: absolute;
@@ -1012,88 +1013,46 @@ input[type='number'] {
 
 /* ================ TYPOGRAPHY CSS START =========== */
 
-.display-1 {
-  font-size: 11rem;
-  line-height: 13.125rem;
-  letter-spacing: -3.5px;
-}
-
-.display-2 {
-  font-size: 9rem;
-  line-height: 10.62rem;
-  letter-spacing: -3.5px;
-}
-
-.display-3 {
-  font-size: 7.5rem;
-  line-height: 8.375rem;
-  letter-spacing: -3.5px;
-}
-
-.display-4 {
+.display {
   font-size: 6rem;
   line-height: 6.875rem;
   letter-spacing: -2.5px;
 }
 
 .heading-1 {
-  font-size: 4.5rem;
-  line-height: 5.5rem;
-  letter-spacing: -2.3px;
-}
-
-.heading-2 {
   font-size: 4rem;
   line-height: 4.875rem;
   letter-spacing: -2.3px;
 }
 
-.heading-3 {
+.heading-2 {
   font-size: 3.5rem;
   line-height: 4.125rem;
   letter-spacing: -1.75px;
 }
 
-.heading-4 {
+.heading-3 {
   font-size: 3rem;
   line-height: 3.75rem;
   letter-spacing: -1.75px;
 }
 
-.heading-5 {
-  font-size: 2.25rem;
+.heading-4 {
+  font-size: 2.5rem;
   line-height: 3rem;
-  letter-spacing: -1px;
+  letter-spacing: -1.5px;
 }
 
-.heading-6 {
+.heading-5 {
   font-size: 2rem;
   line-height: 2.625rem;
-  letter-spacing: -0.5px;
-}
-
-.description-1 {
-  font-size: 1.875rem;
-  line-height: 2.625rem;
-  letter-spacing: -0.5px;
+  letter-spacing: -0.75px;
 }
 
-.description-2 {
-  font-size: 1.75rem;
-  line-height: 2.625rem;
-  letter-spacing: -0.5px;
-}
-
-.description-3 {
-  font-size: 1.625rem;
-  line-height: 2.5rem;
-  letter-spacing: -0.5px;
-}
-
-.description-4 {
+.heading-6 {
   font-size: 1.5rem;
-  line-height: 2.25rem;
-  letter-spacing: -0.5px;
+  line-height: 2.125rem;
+  letter-spacing: -0.4px;
 }
 
 .body-1 {
@@ -1125,9 +1084,3 @@ input[type='number'] {
   line-height: 1.375rem;
   letter-spacing: -0.2px;
 }
-
-.body-6 {
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  letter-spacing: -0.2px;
-}
diff --git a/app/new/page.tsx b/app/new/page.tsx
index 2efb659b..2a8af622 100644
--- a/app/new/page.tsx
+++ b/app/new/page.tsx
@@ -63,7 +63,7 @@ const Page = () => {
               </div>
               <div>
                 <p className="text-body-5 font-medium text-metal-800">Khairul Islam Ridoy</p>
-                <p className="text-body-6 font-normal text-metal-400">UI/UX Designer</p>
+                <p className="text-body-5 font-normal text-metal-400">UI/UX Designer</p>
               </div>
             </Dropdown.Item>
             <Dropdown.Item>
@@ -72,7 +72,7 @@ const Page = () => {
               </div>
               <div>
                 <p className="text-body-5 font-medium text-metal-800">Zakir Hossain</p>
-                <p className="text-body-6 font-normal text-metal-400">Web Designer</p>
+                <p className="text-body-5 font-normal text-metal-400">Web Designer</p>
               </div>
             </Dropdown.Item>
             <Dropdown.Item>
@@ -81,7 +81,7 @@ const Page = () => {
               </div>
               <div>
                 <p className="text-body-5 font-medium text-metal-800">Atique Hasan</p>
-                <p className="text-body-6 font-normal text-metal-400">CEO of StaticMania</p>
+                <p className="text-body-5 font-normal text-metal-400">CEO of StaticMania</p>
               </div>
             </Dropdown.Item>
             <Dropdown.Item>
@@ -90,7 +90,7 @@ const Page = () => {
               </div>
               <div>
                 <p className="text-body-5 font-medium text-metal-800">Kausar Ahamed Pial</p>
-                <p className="text-body-6 font-normal text-metal-400">CTO of StaticMania</p>
+                <p className="text-body-5 font-normal text-metal-400">CTO of StaticMania</p>
               </div>
             </Dropdown.Item>
             <Dropdown.Item>
@@ -99,7 +99,7 @@ const Page = () => {
               </div>
               <div>
                 <p className="text-body-5 font-medium text-metal-800">Md Ariful Islam</p>
-                <p className="text-body-6 font-normal text-metal-400">Web Developer</p>
+                <p className="text-body-5 font-normal text-metal-400">Web Developer</p>
               </div>
             </Dropdown.Item>
           </Dropdown.List>
diff --git a/app/page.tsx b/app/page.tsx
index da42af0a..a49a9215 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -28,22 +28,22 @@ const Hero = () => {
   return (
     <div className="hero-area">
       <div className="relative z-10 mx-auto max-w-2xl text-center">
-        <h1 className="mb-3 text-description-3 font-semibold leading-8 tracking-[-1.75px] text-black/100 md:text-heading-5 lg:text-[56px] lg:leading-[66px]">
+        <h1 className="mb-3 text-heading-6 font-semibold text-black/100 md:text-heading-5 lg:text-heading-2">
           Supercharge Your Web Development with <span className="hero-text block">Keep React</span>
         </h1>
-        <p className="mx-auto max-w-xs text-body-5 text-metal-600 md:max-w-lg md:text-body-3">
+        <p className="mx-auto max-w-xs text-body-4 text-metal-600 md:max-w-lg md:text-body-3">
           Unlocking the Power of Code to Transform Your Ideas into Stunning Web Realities.
         </p>
         <div className="mt-8 flex flex-col items-center justify-center gap-5 md:flex-row">
           <div className="flex items-center justify-between gap-5 divide-x-2 divide-metal-100 rounded-md bg-white px-4 py-3">
-            <p className="text-body-5 font-normal text-metal-500">npm install keep-react</p>
+            <p className="text-body-4 font-normal text-metal-500">npm install keep-react</p>
             <button className="pl-2" onClick={() => copyToClipboard('npm install keep-react')}>
               {copy ? <Check size={18} color="#8897AE" /> : <Clipboard size={18} color="#8897AE" />}
             </button>
           </div>
           <Link
             href="/docs/getting-started/Introduction"
-            className="group h-min w-fit justify-center rounded-md border border-metal-900  bg-metal-900 px-4 py-2.5 text-center text-body-5 font-medium capitalize text-white transition-all duration-75 ease-in hover:bg-metal-800 focus:ring-4 focus:ring-metal-800 active:bg-metal-900">
+            className="group h-min w-fit justify-center rounded-md border border-metal-900  bg-metal-900 px-4 py-2.5 text-center text-body-4 font-medium capitalize text-white transition-all duration-75 ease-in hover:bg-metal-800 focus:ring-4 focus:ring-metal-800 active:bg-metal-900">
             Get Started
           </Link>
         </div>
@@ -68,7 +68,7 @@ const ComponentUI = () => {
       </div>
       <div className="container">
         <div className="mx-auto mb-4 px-5 text-center md:max-w-[500px] md:px-0">
-          <h2 className="mb-3 text-description-3 font-semibold leading-8 tracking-[-1px] text-black lg:text-heading-5 lg:!leading-[44px]">
+          <h2 className="mb-3 text-heading-6 font-semibold leading-8 text-black lg:text-heading-5">
             Design Excellence with Our React Component Library
           </h2>
           <p className="text-center text-body-5 font-normal leading-6 text-metal-600 md:text-body-4">
@@ -135,7 +135,7 @@ const Community = () => {
               {contributors?.map((user) => <Avatar key={user?.id} shape="circle" size="lg" img={user?.avatar_url} />)}
             </Avatar.Group>
           ) : null}
-          <h3 className="mt-2 text-description-3 font-semibold leading-[50px] tracking-[-1px] text-white md:text-description-2 lg:text-heading-5">
+          <h3 className="mt-2 text-heading-6 font-semibold leading-[50px] tracking-[-1px] text-white md:text-heading-6 lg:text-heading-5">
             Join the community
           </h3>
           <p className="max-w-sm text-body-5 font-normal text-white md:text-body-4">
@@ -198,7 +198,7 @@ const Faq = () => {
   return (
     <div className="container">
       <div className="mx-auto mb-4 px-5 text-center md:max-w-[500px] md:px-0">
-        <h2 className="mb-3 text-description-3 font-semibold leading-8 tracking-[-1px] text-black lg:text-heading-5 lg:!leading-[44px]">
+        <h2 className="mb-3 text-heading-6 font-semibold leading-8 tracking-[-1px] text-black lg:text-heading-5 lg:!leading-[44px]">
           Frequently Asked Questions
         </h2>
       </div>
diff --git a/app/src/Keep/KeepTheme.ts b/app/src/Keep/KeepTheme.ts
index 8cf4d120..a28774d7 100644
--- a/app/src/Keep/KeepTheme.ts
+++ b/app/src/Keep/KeepTheme.ts
@@ -94,10 +94,6 @@ export interface KeepGradientDuoToneColors {
   tealToLime: string
 }
 
-export type KeepTypography =
-  | `heading-${1 | 2 | 3 | 4 | 5 | 6}`
-  | `body-${1 | 2 | 3 | 4 | 5 | 6}`
-  | `display-${1 | 2 | 3 | 4}`
-  | `description-${1 | 2 | 3 | 4}`
+export type KeepTypography = `heading-${1 | 2 | 3 | 4 | 5 | 6}` | `body-${1 | 2 | 3 | 4 | 5}` | `display`
 
 export type KeepHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
diff --git a/app/src/components/Badge/theme.ts b/app/src/components/Badge/theme.ts
index d4d23420..d10c19f4 100644
--- a/app/src/components/Badge/theme.ts
+++ b/app/src/components/Badge/theme.ts
@@ -45,7 +45,7 @@ interface BadgeTheme {
 }
 
 export const badgeTheme: BadgeTheme = {
-  base: 'inline-flex w-fit items-center font-inherit rounded-full text-body-6 font-medium cursor-pointer',
+  base: 'inline-flex w-fit items-center font-inherit rounded-full text-body-5 font-medium cursor-pointer',
   size: {
     sm: 'px-1 h-4',
     md: 'px-2 h-5',
diff --git a/app/src/components/Card/Card.stories.tsx b/app/src/components/Card/Card.stories.tsx
index 484266b4..68589642 100644
--- a/app/src/components/Card/Card.stories.tsx
+++ b/app/src/components/Card/Card.stories.tsx
@@ -195,7 +195,7 @@ export const CardWithAvatar: Story = {
           <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">
             Khairul Islam Ridoy
           </Card.Title>
-          <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+          <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
         </Card.Container>
         <Card.Container className="circled mx-auto flex max-w-[220px] items-center justify-center divide-x divide-metal-200 rounded-md border border-metal-200 p-1 md:p-2">
           <Card.Link
@@ -235,7 +235,7 @@ export const CardWithProfileDetails: Story = {
           </Card.Container>
           <Card.Container className="mb-3 mt-10 text-center">
             <Card.Title className="text-body-5 font-semibold text-metal-800 md:text-body-4">Khairul Islam</Card.Title>
-            <Card.Title className="!text-body-6 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
+            <Card.Title className="!text-body-5 font-normal text-metal-400 md:text-body-5">UI/UX Designer</Card.Title>
           </Card.Container>
           <Card.Container className="flex w-full justify-between border-t border-t-metal-50 px-5 py-3">
             <Card.Container className="text-center">
@@ -441,8 +441,8 @@ export const PodcastCard: Story = {
           <Card.Description className="text-body-5 font-medium text-metal-500">By Static Mania</Card.Description>
         </Card.Container>
         <Card.Container className="flex items-center justify-between">
-          <Card.Title className="text-body-6 font-medium text-metal-500">4:05</Card.Title>
-          <Card.Title className="text-body-6 font-medium text-metal-500">10:05</Card.Title>
+          <Card.Title className="text-body-5 font-medium text-metal-500">4:05</Card.Title>
+          <Card.Title className="text-body-5 font-medium text-metal-500">10:05</Card.Title>
         </Card.Container>
         <LineProgress progress={45} />
         <Card.Container className="flex items-center justify-between">
@@ -486,7 +486,7 @@ export const PricingCard: Story = {
         <Card.Container>
           <Card.Title className="text-body-4 font-medium text-primary-500 md:text-body-2">Business</Card.Title>
           <Card.Title className="my-3 flex items-center">
-            <span className="text-description-2 font-bold text-metal-800 md:text-heading-4">$79</span>
+            <span className="text-heading-6 font-bold text-metal-800 md:text-heading-3">$79</span>
             <span className="ml-1 text-body-4 font-medium text-metal-400">/ mth</span>
           </Card.Title>
           <Card.Description className="text-body-5 text-metal-700 md:text-body-4">
diff --git a/app/src/components/Card/CardLink.tsx b/app/src/components/Card/CardLink.tsx
index 6ea8595f..e4e0d4b8 100644
--- a/app/src/components/Card/CardLink.tsx
+++ b/app/src/components/Card/CardLink.tsx
@@ -46,7 +46,7 @@ export const CardLink: FC<CardLinkProps> = ({ children, className, href = '/', i
   return (
     <a
       href={href}
-      className={cn('flex items-center gap-1 text-body-6 font-medium text-primary-500 md:text-body-4', className)}>
+      className={cn('flex items-center gap-1 text-body-5 font-medium text-primary-500 md:text-body-4', className)}>
       {icon && iconPosition === 'right' && icon}
       <span>{children}</span>
       {icon && iconPosition === 'left' && icon}
diff --git a/app/src/components/Card/theme.ts b/app/src/components/Card/theme.ts
index 72f03714..ffb88bd7 100644
--- a/app/src/components/Card/theme.ts
+++ b/app/src/components/Card/theme.ts
@@ -67,5 +67,5 @@ export const cardTheme: KeepCardTheme = {
       },
     },
   },
-  description: 'text-metal-500 text-body-6 font-normal md:text-body-4',
+  description: 'text-metal-500 text-body-5 font-normal md:text-body-4',
 }
diff --git a/app/src/components/Chart/CustomLegend.tsx b/app/src/components/Chart/CustomLegend.tsx
index 563912bb..bafe26e8 100644
--- a/app/src/components/Chart/CustomLegend.tsx
+++ b/app/src/components/Chart/CustomLegend.tsx
@@ -17,7 +17,7 @@ const CustomLegend = (props: propsType) => {
   return (
     <ul className="!ml-5 mb-5 flex items-start gap-3">
       {props.payload.map(({ value }, index) => (
-        <li key={index + 1} className="flex items-center gap-1 text-body-6 font-normal text-metal-500 ">
+        <li key={index + 1} className="flex items-center gap-1 text-body-5 font-normal text-metal-500 ">
           <span className={`block h-2 w-2 rounded-full ${index < 1 ? 'bg-success-400' : 'bg-primary-500'}`}></span>
           <span className="first-letter:uppercase">{value}</span>
         </li>
diff --git a/app/src/components/CheckboxGroup/theme.ts b/app/src/components/CheckboxGroup/theme.ts
index fbd21297..a06400c2 100644
--- a/app/src/components/CheckboxGroup/theme.ts
+++ b/app/src/components/CheckboxGroup/theme.ts
@@ -107,7 +107,7 @@ export const checkboxGroupTheme: keepCheckboxGroupTheme = {
       },
     },
     description: {
-      base: 'mt-1 text-body-6 md:text-body-4 font-normal',
+      base: 'mt-1 text-body-5 md:text-body-4 font-normal',
       selected: {
         on: 'text-primary-400',
         off: 'text-metal-400',
diff --git a/app/src/components/FormControls/theme.ts b/app/src/components/FormControls/theme.ts
index 41e253f2..90f89473 100644
--- a/app/src/components/FormControls/theme.ts
+++ b/app/src/components/FormControls/theme.ts
@@ -239,7 +239,7 @@ export const formControlsTheme: keepFormControlTheme = {
         base: 'block text-center border border-metal-200 rounded-md text-metal-600 focus:outline-none focus:ring-0 focus:border-metal-500',
         disabled: 'cursor-not-allowed opacity-50',
         sizes: {
-          sm: 'max-w-[120px] py-2 px-8 sm:text-body-6',
+          sm: 'max-w-[120px] py-2 px-8 sm:text-body-5',
           md: 'max-w-[134px] py-2.5 px-10 text-body-5',
           lg: 'max-w-[140px] py-3 px-12 sm:',
         },
@@ -290,7 +290,7 @@ export const formControlsTheme: keepFormControlTheme = {
         base: 'block w-full focus:outline-none focus:ring-0',
         disabled: 'cursor-not-allowed opacity-50',
         sizes: {
-          sm: 'p-2 sm:text-body-6',
+          sm: 'p-2 sm:text-body-5',
           md: 'p-2.5 text-body-5',
           lg: 'sm: p-4',
         },
@@ -348,7 +348,7 @@ export const formControlsTheme: keepFormControlTheme = {
       input: {
         base: 'rounded-lg block w-full border disabled:cursor-not-allowed disabled:opacity-50',
         sizes: {
-          sm: 'sm:text-body-6',
+          sm: 'sm:text-body-5',
           md: 'text-body-5',
           lg: 'sm:',
         },
diff --git a/app/src/components/Modal/Modal.stories.tsx b/app/src/components/Modal/Modal.stories.tsx
index 05a796ce..5efd3a95 100644
--- a/app/src/components/Modal/Modal.stories.tsx
+++ b/app/src/components/Modal/Modal.stories.tsx
@@ -196,7 +196,7 @@ const HistoryModalComponent = () => {
 
               <div>
                 <p className="text-body-5 font-semibold text-gray-500">Albert Flores</p>
-                <p className="text-body-6 text-gray-500">keep@designsystem.com</p>
+                <p className="text-body-5 text-gray-500">keep@designsystem.com</p>
               </div>
             </div>
           </div>
diff --git a/app/src/components/Modal/theme.ts b/app/src/components/Modal/theme.ts
index cb17178d..bac7cda7 100644
--- a/app/src/components/Modal/theme.ts
+++ b/app/src/components/Modal/theme.ts
@@ -54,7 +54,7 @@ export const modalTheme: keepModalTheme = {
   header: {
     base: 'rounded-t pb-2',
     iconSection: 'flex items-start  justify-between',
-    title: 'pt-2 text-body-3 md:text-description-4 font-semibold text-metal-800',
+    title: 'pt-2 text-body-3 md:text-heading-6 font-semibold text-metal-800',
     headerIcon: {
       base: 'w-10 h-10 flex items-center justify-center rounded-md bg-primary-25',
       icon: '',
diff --git a/app/src/components/Progress/theme.ts b/app/src/components/Progress/theme.ts
index c1c85c3c..c6bc48ed 100644
--- a/app/src/components/Progress/theme.ts
+++ b/app/src/components/Progress/theme.ts
@@ -63,11 +63,11 @@ export const progressTheme: ProgressThemeInterface = {
     text: {
       base: 'absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform',
       content: {
-        sm: 'text-body-6 font-normal text-primary-500',
+        sm: 'text-body-5 font-normal text-primary-500',
         md: 'text-body-4 font-normal text-primary-500',
         lg: 'text-body-3 font-medium text-primary-500',
         xl: 'text-body-2 font-semibold text-primary-500',
-        '2xl': 'text-description-2 font-semibold text-primary-500',
+        '2xl': 'text-heading-6 font-semibold text-primary-500',
       },
     },
     size: {
@@ -87,11 +87,11 @@ export const progressTheme: ProgressThemeInterface = {
     text: {
       base: 'w-10 text-end',
       content: {
-        sm: 'text-body-6 font-normal text-primary-500',
+        sm: 'text-body-5 font-normal text-primary-500',
         md: 'text-body-4 font-normal text-primary-500',
         lg: 'text-body-3 font-medium text-primary-500',
         xl: 'text-body-2 font-semibold text-primary-500',
-        '2xl': 'text-description-2 font-semibold text-primary-500',
+        '2xl': 'text-heading-6 font-semibold text-primary-500',
       },
     },
     size: {
diff --git a/app/src/components/Table/Table.stories.tsx b/app/src/components/Table/Table.stories.tsx
index 0336d916..518636b7 100644
--- a/app/src/components/Table/Table.stories.tsx
+++ b/app/src/components/Table/Table.stories.tsx
@@ -116,7 +116,7 @@ export const DefaultTable: Story = {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell>Status</Table.HeadCell>
           <Table.HeadCell className="min-w-[152px]">Role</Table.HeadCell>
@@ -428,7 +428,7 @@ export const CashOutTransitionTable: Story = {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[290px]">
-            <p className="text-body-6 font-medium text-metal-400">Type</p>
+            <p className="text-body-5 font-medium text-metal-400">Type</p>
           </Table.HeadCell>
           <Table.HeadCell className="min-w-[183px]" icon={<ArrowsDownUp size={14} color="#8897AE" />}>
             Date
@@ -454,7 +454,7 @@ export const CashOutTransitionTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Paypal</p>
-                      <span className="text-body-6 font-normal text-metal-500">Withdraw</span>
+                      <span className="text-body-5 font-normal text-metal-500">Withdraw</span>
                     </div>
                   </div>
                 </div>
@@ -462,7 +462,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">$652.00</p>
@@ -476,7 +476,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <Button variant="outline" size="xs" circle>
@@ -495,7 +495,7 @@ export const CashOutTransitionTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Visa</p>
-                      <span className="text-body-6 font-normal text-metal-500">Withdraw</span>
+                      <span className="text-body-5 font-normal text-metal-500">Withdraw</span>
                     </div>
                   </div>
                 </div>
@@ -503,7 +503,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 10, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">4:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">4:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">$534.00</p>
@@ -518,7 +518,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <Button variant="outline" size="xs" circle>
@@ -537,7 +537,7 @@ export const CashOutTransitionTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Stripe</p>
-                      <span className="text-body-6 font-normal text-metal-500">Withdraw</span>
+                      <span className="text-body-5 font-normal text-metal-500">Withdraw</span>
                     </div>
                   </div>
                 </div>
@@ -545,7 +545,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Mar 12, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">4:00 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">4:00 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">$123.00</p>
@@ -559,7 +559,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <Button variant="outline" size="xs" circle>
@@ -578,7 +578,7 @@ export const CashOutTransitionTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Western Union</p>
-                      <span className="text-body-6 font-normal text-metal-500">Withdraw</span>
+                      <span className="text-body-5 font-normal text-metal-500">Withdraw</span>
                     </div>
                   </div>
                 </div>
@@ -586,7 +586,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Nov 23, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">5:30 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">5:30 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">$434.00</p>
@@ -600,7 +600,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <Button variant="outline" size="xs" circle>
@@ -619,7 +619,7 @@ export const CashOutTransitionTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Mastercard</p>
-                      <span className="text-body-6 font-normal text-metal-500">Withdraw</span>
+                      <span className="text-body-5 font-normal text-metal-500">Withdraw</span>
                     </div>
                   </div>
                 </div>
@@ -627,7 +627,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Apr 23, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">7:30 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">7:30 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">$786.00</p>
@@ -641,7 +641,7 @@ export const CashOutTransitionTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <Button variant="outline" size="xs" circle>
@@ -685,7 +685,7 @@ export const OrdersTable: Story = {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[302px]">
-            <p className="text-body-6 font-medium text-metal-400">Order no.</p>
+            <p className="text-body-5 font-medium text-metal-400">Order no.</p>
           </Table.HeadCell>
           <Table.HeadCell
             className="min-w-[165px]"
@@ -721,7 +721,7 @@ export const OrdersTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <img src="/images/icon/country-0.svg" alt="country" />
@@ -756,7 +756,7 @@ export const OrdersTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 23, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">4:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">4:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <img src="/images/icon/country-1.svg" alt="country" />
@@ -791,7 +791,7 @@ export const OrdersTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 31, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">5:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">5:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <img src="/images/icon/country-2.svg" alt="country" />
@@ -826,7 +826,7 @@ export const OrdersTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <img src="/images/icon/country-5.svg" alt="country" />
@@ -861,7 +861,7 @@ export const OrdersTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 07, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">02:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">02:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <img src="/images/icon/country-4.svg" alt="country" />
@@ -896,7 +896,7 @@ export const OrdersTable: Story = {
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 19, 2022</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <img src="/images/icon/country-5.svg" alt="country" />
@@ -958,7 +958,7 @@ export const FileUploadedTable: Story = {
         </Table.Caption>
         <Table.Head>
           <Table.HeadCell className="min-w-[344px]">
-            <p className="text-body-6 font-medium text-metal-400">File no.</p>
+            <p className="text-body-5 font-medium text-metal-400">File no.</p>
           </Table.HeadCell>
           <Table.HeadCell className="min-w-[160px]">File size</Table.HeadCell>
           <Table.HeadCell className="min-w-[171px]">Date uploaded</Table.HeadCell>
@@ -976,7 +976,7 @@ export const FileUploadedTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Static Next Plan.pdf</p>
-                      <p className="text-body-6 font-normal text-metal-500">200 KB</p>
+                      <p className="text-body-5 font-normal text-metal-500">200 KB</p>
                     </div>
                   </div>
                 </div>
@@ -985,11 +985,11 @@ export const FileUploadedTable: Story = {
 
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Total 0.2 MB</p>
-              <p className="text-body-6 font-normal text-metal-500">200 KB</p>
+              <p className="text-body-5 font-normal text-metal-500">200 KB</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 10, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">4:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">4:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 10, 2023</p>
@@ -1023,7 +1023,7 @@ export const FileUploadedTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Static Next Plan.pdf</p>
-                      <p className="text-body-6 font-normal text-metal-500">700 KB</p>
+                      <p className="text-body-5 font-normal text-metal-500">700 KB</p>
                     </div>
                   </div>
                 </div>
@@ -1032,11 +1032,11 @@ export const FileUploadedTable: Story = {
 
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Total 0.7 MB</p>
-              <p className="text-body-6 font-normal text-metal-500">700 KB</p>
+              <p className="text-body-5 font-normal text-metal-500">700 KB</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 12, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">4:12 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">4:12 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 15, 2023</p>
@@ -1070,7 +1070,7 @@ export const FileUploadedTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Static Next Plan.pdf</p>
-                      <p className="text-body-6 font-normal text-metal-500">500 KB</p>
+                      <p className="text-body-5 font-normal text-metal-500">500 KB</p>
                     </div>
                   </div>
                 </div>
@@ -1079,11 +1079,11 @@ export const FileUploadedTable: Story = {
 
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Total 0.5 MB</p>
-              <p className="text-body-6 font-normal text-metal-500">500 KB</p>
+              <p className="text-body-5 font-normal text-metal-500">500 KB</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Nov 23, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">02:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">02:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Nov 10, 2023</p>
@@ -1117,7 +1117,7 @@ export const FileUploadedTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Static Next Plan.pdf</p>
-                      <p className="text-body-6 font-normal text-metal-500">900 KB</p>
+                      <p className="text-body-5 font-normal text-metal-500">900 KB</p>
                     </div>
                   </div>
                 </div>
@@ -1126,11 +1126,11 @@ export const FileUploadedTable: Story = {
 
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Total 0.9 MB</p>
-              <p className="text-body-6 font-normal text-metal-500">900 KB</p>
+              <p className="text-body-5 font-normal text-metal-500">900 KB</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Feb 21, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">3:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">3:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Jan 10, 2023</p>
@@ -1164,7 +1164,7 @@ export const FileUploadedTable: Story = {
 
                     <div>
                       <p className="-mb-0.5 text-body-4 font-medium text-metal-600">Static Next Plan.pdf</p>
-                      <p className="text-body-6 font-normal text-metal-500">200 KB</p>
+                      <p className="text-body-5 font-normal text-metal-500">200 KB</p>
                     </div>
                   </div>
                 </div>
@@ -1173,11 +1173,11 @@ export const FileUploadedTable: Story = {
 
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Total 0.1 MB</p>
-              <p className="text-body-6 font-normal text-metal-500">100 KB</p>
+              <p className="text-body-5 font-normal text-metal-500">100 KB</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Mar 25, 2023</p>
-              <p className="text-body-6 font-normal text-metal-500">8:45 pm</p>
+              <p className="text-body-5 font-normal text-metal-500">8:45 pm</p>
             </Table.Cell>
             <Table.Cell>
               <p className="text-body-5 font-medium text-metal-500">Apr 10, 2023</p>
diff --git a/app/src/components/Table/theme.ts b/app/src/components/Table/theme.ts
index 24eaffcb..5ef2262f 100644
--- a/app/src/components/Table/theme.ts
+++ b/app/src/components/Table/theme.ts
@@ -71,7 +71,7 @@ export const tableTheme: keepTableTheme = {
   head: {
     base: 'text-metal-400 bg-metal-25 text-body-5 overflow-x-auto',
     cell: {
-      base: 'py-5 pl-4 text-body-6 font-medium text-metal-400',
+      base: 'py-5 pl-4 text-body-5 font-medium text-metal-400',
       icon: {
         base: 'flex items-center',
         on: {
diff --git a/app/src/components/Timeline/theme.ts b/app/src/components/Timeline/theme.ts
index ab5bf3cd..87e271be 100644
--- a/app/src/components/Timeline/theme.ts
+++ b/app/src/components/Timeline/theme.ts
@@ -67,7 +67,7 @@ export const timelineTheme: keepTimelineTheme = {
     },
   },
   body: {
-    base: '!mb-4 text-body-6 md:text-body-3 font-normal text-metal-500',
+    base: '!mb-4 text-body-5 md:text-body-3 font-normal text-metal-500',
   },
   content: {
     horizontal: {
@@ -107,6 +107,6 @@ export const timelineTheme: keepTimelineTheme = {
     },
   },
   title: {
-    base: 'mb-6 text-body-5 md:text-description-4 font-semibold text-metal-700',
+    base: 'mb-6 text-body-5 md:text-heading-6 font-semibold text-metal-700',
   },
 }
diff --git a/app/src/components/Tree/theme.ts b/app/src/components/Tree/theme.ts
index 9755fdd9..21b27cfa 100644
--- a/app/src/components/Tree/theme.ts
+++ b/app/src/components/Tree/theme.ts
@@ -36,9 +36,9 @@ export interface keepTreeTheme {
 }
 
 export const treeTheme: keepTreeTheme = {
-  base: 'list-none space-y-2  text-body-6 md:text-body-4 font-medium text-metal-700',
+  base: 'list-none space-y-2  text-body-5 md:text-body-4 font-medium text-metal-700',
   list: {
-    base: 'text-body-6 md:text-body-4 font-medium text-metal-700 select-none',
+    base: 'text-body-5 md:text-body-4 font-medium text-metal-700 select-none',
     hasChild: {
       on: 'relative space-y-2',
       off: {
@@ -55,7 +55,7 @@ export const treeTheme: keepTreeTheme = {
   },
 
   showChildren: {
-    base: 'text-body-6 md:text-body-4 font-medium text-metal-400 select-none',
+    base: 'text-body-5 md:text-body-4 font-medium text-metal-400 select-none',
     on: '',
     off: 'hidden',
   },
diff --git a/app/src/components/Typography/Typography.stories.tsx b/app/src/components/Typography/Typography.stories.tsx
index 8b2c6693..8c36f245 100644
--- a/app/src/components/Typography/Typography.stories.tsx
+++ b/app/src/components/Typography/Typography.stories.tsx
@@ -30,25 +30,11 @@ export const DefaultTypography: Story = {
         <Typography variant="body-3">Body Text 3</Typography>
         <Typography variant="body-4">Body Text 4</Typography>
         <Typography variant="body-5">Body Text 5</Typography>
-        <Typography variant="body-6">Body Text 6</Typography>
-      </>,
-    ),
-  },
-}
-export const DescriptionTypography: Story = {
-  args: {
-    className: 'space-y-4',
-    variant: 'div',
-    children: removeFragment(
-      <>
-        <Typography variant="description-1">Description 1</Typography>
-        <Typography variant="description-2">Description 2</Typography>
-        <Typography variant="description-3">Description 3</Typography>
-        <Typography variant="description-4">Description 4</Typography>
       </>,
     ),
   },
 }
+
 export const HeadingTypography: Story = {
   args: {
     className: 'space-y-4',
@@ -71,10 +57,7 @@ export const DisplayTypography: Story = {
     variant: 'div',
     children: removeFragment(
       <>
-        <Typography variant="display-1">Display 1</Typography>
-        <Typography variant="display-2">Display 2</Typography>
-        <Typography variant="display-3">Display 3</Typography>
-        <Typography variant="display-4">Display 4</Typography>
+        <Typography variant="display">Display</Typography>
       </>,
     ),
   },
diff --git a/app/src/components/Typography/Typography.tsx b/app/src/components/Typography/Typography.tsx
index 7eb756b6..3ecc27fe 100644
--- a/app/src/components/Typography/Typography.tsx
+++ b/app/src/components/Typography/Typography.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 'use client'
-import { ReactNode, HTMLProps, createElement, FC } from 'react'
+import { createElement, FC, HTMLProps, ReactNode } from 'react'
 
 import { cn } from '../../helpers/cn'
 import { KeepTypography } from '../../Keep/KeepTheme'
@@ -45,7 +45,7 @@ const mapStringToElement = (variant: string): keyof JSX.IntrinsicElements | unde
     return 'h1'
   }
 
-  if (variant.startsWith('body') || variant.startsWith('description')) {
+  if (variant.startsWith('body')) {
     return 'p'
   }
 
@@ -70,11 +70,10 @@ export const Typography: FC<TypographyProps> = ({ variant = 'div', children, cla
       )
     }
     case variant?.startsWith('display'): {
-      const display = +variant?.split('-')[1]
       return createElement(
         FinalElement,
         {
-          className: cn(display > 4 ? `display-4` : variant, className),
+          className: cn(`display`, className),
           ...otherProps,
         },
         children,
@@ -85,23 +84,13 @@ export const Typography: FC<TypographyProps> = ({ variant = 'div', children, cla
       return createElement(
         FinalElement,
         {
-          className: cn(body > 6 ? `body-6` : variant, className),
-          ...otherProps,
-        },
-        children,
-      )
-    }
-    case variant?.startsWith('description'): {
-      const description = +variant?.split('-')[1]
-      return createElement(
-        FinalElement,
-        {
-          className: cn(description > 4 ? `description-4` : variant, className),
+          className: cn(body > 5 ? `body-5` : variant, className),
           ...otherProps,
         },
         children,
       )
     }
+
     default:
       return createElement(
         FinalElement,
diff --git a/app/src/components/Upload/File.tsx b/app/src/components/Upload/File.tsx
index 3153c885..ef304e46 100644
--- a/app/src/components/Upload/File.tsx
+++ b/app/src/components/Upload/File.tsx
@@ -14,7 +14,7 @@ export const File: FC<FileProps> = ({ children, className, onClick, icon = <Tras
   return (
     <li
       className={cn(
-        'flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-6 font-normal capitalize text-metal-600',
+        'flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-5 font-normal capitalize text-metal-600',
         className,
       )}>
       {children}
diff --git a/app/src/theme/keep-preset.ts b/app/src/theme/keep-preset.ts
index d7fbc90e..657fca93 100644
--- a/app/src/theme/keep-preset.ts
+++ b/app/src/theme/keep-preset.ts
@@ -69,28 +69,7 @@ module.exports = {
         },
       },
       fontSize: {
-        'display-1': [
-          '11rem',
-          {
-            lineHeight: '13.125rem',
-            letterSpacing: '-3.5px',
-          },
-        ],
-        'display-2': [
-          '9rem',
-          {
-            lineHeight: '10.62rem',
-            letterSpacing: '-3.5px',
-          },
-        ],
-        'display-3': [
-          '7.5rem',
-          {
-            lineHeight: '8.375rem',
-            letterSpacing: '-3.5px',
-          },
-        ],
-        'display-4': [
+        display: [
           '6rem',
           {
             lineHeight: '6.875rem',
@@ -98,114 +77,79 @@ module.exports = {
           },
         ],
         'heading-1': [
-          '4.5rem',
-          {
-            lineHeight: '5.5rem',
-            letterSpacing: '-2.3px',
-          },
-        ],
-        'heading-2': [
           '4rem',
           {
-            lineHeight: '4.875rem ',
+            lineHeight: '4.875rem',
             letterSpacing: '-2.3px',
           },
         ],
-        'heading-3': [
+        'heading-2': [
           '3.5rem',
           {
-            lineHeight: '4.125rem',
+            lineHeight: '4.125rem ',
             letterSpacing: '-1.75px',
           },
         ],
-        'heading-4': [
+        'heading-3': [
           '3rem',
           {
             lineHeight: '3.75rem',
             letterSpacing: '-1.75px',
           },
         ],
-        'heading-5': [
-          '2.25rem',
+        'heading-4': [
+          '2.5rem',
           {
             lineHeight: '3rem',
-            letterSpacing: '-1px',
+            letterSpacing: '-1.5px',
           },
         ],
-        'heading-6': [
+        'heading-5': [
           '2rem',
           {
             lineHeight: '2.625rem',
-            letterSpacing: '-0.5px',
+            letterSpacing: '-0.75px',
           },
         ],
-        'description-1': [
-          '1.875rem',
-          {
-            lineHeight: '2.625rem',
-            letterSpacing: '-0.5px',
-          },
-        ],
-        'description-2': [
-          '1.75rem',
-          {
-            lineHeight: '2.625rem',
-            letterSpacing: '-0.5px',
-          },
-        ],
-        'description-3': [
-          '1.625rem',
-          {
-            lineHeight: '2.5rem',
-            letterSpacing: '-0.5px',
-          },
-        ],
-        'description-4': [
+        'heading-6': [
           '1.5rem',
           {
-            lineHeight: '2.25rem',
-            letterSpacing: '-0.5px',
+            lineHeight: '2.125rem',
+            letterSpacing: '-0.4px',
           },
         ],
         'body-1': [
-          '1.375rem',
-          {
-            lineHeight: '1.875rem',
-            letterSpacing: '-0.3px',
-          },
-        ],
-        'body-2': [
           '1.25rem',
           {
             lineHeight: '1.75rem',
-            letterSpacing: '-0.3px',
+            letterSpacing: '-0.4px',
           },
         ],
-        'body-3': [
+        'body-2': [
           '1.125rem',
           {
             lineHeight: '1.5rem',
-            letterSpacing: '-0.3px',
+            letterSpacing: '-0.4px',
           },
         ],
-        'body-4': [
+        'body-3': [
           '1rem',
           {
             lineHeight: '1.5rem',
             letterSpacing: '-0.3px',
           },
         ],
-        'body-5': [
+        'body-4': [
           '0.875rem',
           {
             lineHeight: '1.375rem',
             letterSpacing: '-0.2px',
           },
         ],
-        'body-6': [
+        'body-5': [
           '0.75rem',
           {
-            lineHeight: '1.125rem',
+            lineHeight: '1.375rem',
             letterSpacing: '-0.2px',
           },
         ],