diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41ece5d2..ca929f76 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,7 @@ We are thrilled to announce the initial release of Keep React, our open-source c
 - Notification Animation changed
 - Popover component package changed
 - Select component added
+- Steps component updated
 - Slider component color updated
 - Spinner component remove extra color variant
 - Tabs component package changed
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 30c458ce..ec753a00 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -1,33 +1,34 @@
-import Markdown from 'react-markdown'
-import getMarkDownContent from '~/utils/GetMarkDownContent'
-import getMarkDownData from '~/utils/GetMarkDownData'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+import { Suspense } from 'react'
+import rehypePrettyCode from 'rehype-pretty-code'
+import BlogHeader from '~/app/components/BlogHeader'
+import { getBlogs } from '~/utils/getMdxContent'
 
 export async function generateStaticParams() {
-  const posts = getMarkDownData('data/blogs')
-
+  const posts = getBlogs()
   return posts.map((post) => ({
     slug: post.slug,
   }))
 }
 
 const page = async ({ params }: { params: { slug: string } }) => {
-  const folder = 'data/blogs/'
-  const slug = params.slug
-  const post: { [key: string]: any } = getMarkDownContent(folder, slug)
-
-  const { title, date } = post.data
+  const posts = getBlogs()
+  const post = posts.find((post) => post.slug === params.slug)
 
   return (
     <section>
-      <div className="mx-auto my-12 max-w-7xl px-6 text-center 2xl:px-0">
-        <div className="py-12 text-left">
-          <p className="mb-1 text-body-3 font-medium text-primary-500">{date}</p>
-          <p className="text-heading-5 font-medium text-metal-900 dark:text-white">{title}</p>
-          <hr className="my-5 block border-b border-b-metal-100 dark:border-b-metal-800" />
-          <div className="mt-10">
-            <Markdown className="post">{post.content}</Markdown>
-          </div>
-        </div>
+      <div id="blog-content" className="mx-auto max-w-5xl overflow-hidden px-6 py-12 2xl:px-0">
+        <Suspense fallback={<>Loading...</>}>
+          <MDXRemote
+            components={{ BlogHeader }}
+            source={post?.content ? post.content : ''}
+            options={{
+              mdxOptions: {
+                rehypePlugins: [[rehypePrettyCode, { theme: 'poimandres' }]],
+              },
+            }}
+          />
+        </Suspense>
       </div>
     </section>
   )
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 4bb0842c..e743a69e 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -1,9 +1,8 @@
-import getMarkDownData from '~/utils/GetMarkDownData'
+import { getBlogs } from '~/utils/getMdxContent'
 import Blog from '../components/Blog'
 
 const page = () => {
-  const blogs: { slug: string; content: string; [key: string]: any }[] = getMarkDownData('data/blogs')
-
+  const blogs = getBlogs()
   return (
     <section>
       <div className="-mt-2 py-20 ">
@@ -16,7 +15,7 @@ const page = () => {
               Keep React library continues to evolve with new features, bug fixes, and performance improvements.
             </p>
           </div>
-          <div className="mt-12 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 ">
             {blogs?.map((blog) => <Blog key={blog.slug} {...blog} />)}
           </div>
         </div>
diff --git a/app/components/Blog.tsx b/app/components/Blog.tsx
index 530006e6..d9488bbd 100644
--- a/app/components/Blog.tsx
+++ b/app/components/Blog.tsx
@@ -1,29 +1,34 @@
 'use client'
+import Image from 'next/image'
 import Link from 'next/link'
 import { FC } from 'react'
-import { Card, CardContent, CardTitle } from '../src'
+import KeepDarkLogo from '../../public/images/keep-dark.svg'
 
 export interface BlogProps {
   [key: string]: any
 }
 
-const Blog: FC<BlogProps> = ({ title, date, keyFeatures, slug }) => {
+const Blog: FC<BlogProps> = ({ title, date, tag, slug, version }) => {
   return (
-    <Card className="max-w-full lg:col-span-1">
-      <CardContent className="flex flex-col justify-between gap-y-3 text-left">
-        <p className="text-body-4 text-metal-600 dark:text-white">{date}</p>
-        <CardTitle>{title}</CardTitle>
-        <ul className="!mt-4 ml-5 list-disc space-y-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
-          {keyFeatures?.map((item: string) => <li key={item}>{item}</li>)}
-        </ul>
-
-        <Link
-          href={`/blog/${slug}`}
-          className="flex w-full items-center justify-center rounded-lg bg-metal-900 px-5 py-2.5 text-body-4 font-medium text-white transition-all duration-150 hover:bg-metal-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-200 focus-visible:ring-offset-2 active:focus:scale-95 disabled:cursor-not-allowed disabled:bg-metal-200 dark:bg-metal-800">
-          Read More
-        </Link>
-      </CardContent>
-    </Card>
+    <div className="space-y-2.5">
+      <Link
+        href={`/blog/${slug}`}
+        className="blog-post relative flex h-[200px] w-full flex-col items-center justify-center gap-2 rounded-xl border border-metal-800 bg-[#0D1015]">
+        <Image src={KeepDarkLogo} alt="Keep React" width="100" height="40" />
+        <p className="text-body-2 font-semibold text-white">{version}</p>
+      </Link>
+      <div className="space-y-2.5">
+        <p className="text-body-5 text-primary-500">{tag}</p>
+        <div className="flex items-center justify-between">
+          <Link
+            href={`/blog/${slug}`}
+            className="cursor-pointer text-body-3 text-metal-900 dark:text-white dark:hover:text-primary-500">
+            {title}
+          </Link>
+          <p className="text-body-4 text-metal-600 dark:text-metal-300">{date}</p>
+        </div>
+      </div>
+    </div>
   )
 }
 
diff --git a/app/components/BlogHeader.tsx b/app/components/BlogHeader.tsx
new file mode 100644
index 00000000..0c23bf62
--- /dev/null
+++ b/app/components/BlogHeader.tsx
@@ -0,0 +1,13 @@
+import Image from 'next/image'
+import KeepDarkLogo from '../../public/images/keep-dark.svg'
+
+const BlogHeader = ({ title }: { title: string }) => {
+  return (
+    <div className="blog-post relative mb-6 flex h-[200px] w-full flex-col items-center justify-center gap-2 rounded-xl border border-metal-800 bg-[#0D1015] lg:h-[300px]">
+      <Image src={KeepDarkLogo} alt="Keep React" width="130" height="55" />
+      <h1 className="text-heading-6 font-semibold text-white lg:text-heading-4">{title}</h1>
+    </div>
+  )
+}
+
+export default BlogHeader
diff --git a/app/docs.css b/app/docs.css
index f540e076..47c93610 100644
--- a/app/docs.css
+++ b/app/docs.css
@@ -125,3 +125,74 @@ body::-webkit-scrollbar-thumb {
 .theme-switch {
   @apply flex w-full items-center gap-3 rounded-lg px-3 py-2 text-body-4 font-medium text-metal-900 hover:bg-metal-25 dark:text-white dark:hover:bg-metal-800;
 }
+
+#blog-content {
+  h2 {
+    @apply my-4 border-b pb-2.5 text-body-1 font-medium dark:border-b-metal-800;
+  }
+
+  p {
+    @apply text-body-3 font-normal;
+  }
+
+  ul {
+    li {
+      @apply text-body-4 font-normal;
+    }
+    @apply my-3 space-y-2 *:ml-4 *:list-inside *:list-disc;
+  }
+
+  pre {
+    @apply overflow-auto;
+  }
+
+  a {
+    @apply text-primary-500 hover:underline;
+  }
+
+  [data-rehype-pretty-code-figure] {
+    @apply my-4 border border-metal-800 font-serif;
+  }
+
+  [data-rehype-pretty-code-figure] code {
+    @apply py-6;
+  }
+
+  [data-line] {
+    @apply my-0.5 px-5;
+  }
+
+  code[data-line-numbers] {
+    counter-reset: line;
+  }
+
+  code[data-line-numbers] > [data-line]::before {
+    display: inline-block;
+    counter-increment: line;
+    margin-right: 2rem;
+    width: 0.75rem;
+    content: counter(line);
+    text-align: right;
+  }
+
+  [data-rehype-pretty-code-figure] [data-highlighted-chars] {
+    @apply rounded bg-metal-800 px-1;
+  }
+
+  [data-rehype-pretty-code-figure] [data-highlighted-line] {
+    background: rgba(200, 200, 255, 0.1);
+    @apply border-l-blue-400;
+  }
+
+  code[data-line-numbers-max-digits='2'] > [data-line]::before {
+    width: 1.25rem;
+  }
+
+  code[data-line-numbers-max-digits='3'] > [data-line]::before {
+    width: 1.75rem;
+  }
+
+  code[data-line-numbers-max-digits='4'] > [data-line]::before {
+    width: 2.25rem;
+  }
+}
diff --git a/app/globals.css b/app/globals.css
index acb24e7a..4c332ae7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -95,7 +95,8 @@ pre::-webkit-scrollbar-thumb {
 /* ============community================ */
 
 .community,
-.hero-area {
+.hero-area,
+.blog-post {
   @apply relative z-40;
 }
 
@@ -114,6 +115,21 @@ pre::-webkit-scrollbar-thumb {
   content: '';
 }
 
+.blog-post::before {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: -1;
+  background: url('/images/home/community.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  content: '';
+}
+
 .hero-area::before {
   display: block;
   position: absolute;
diff --git a/data/blogs/keep-react-v1.3.0.md b/data/blogs/keep-react-v1.3.0.mdx
similarity index 82%
rename from data/blogs/keep-react-v1.3.0.md
rename to data/blogs/keep-react-v1.3.0.mdx
index 847758a2..a83ea37b 100644
--- a/data/blogs/keep-react-v1.3.0.md
+++ b/data/blogs/keep-react-v1.3.0.mdx
@@ -1,22 +1,14 @@
 ---
 title: 'Keep React V1.3.0'
 date: 'April 22, 2024'
-description: 'Experience smoother navigation with an updated Carousel Component, say goodbye to pesky scrollbar with the Modal Scrollbar Issue fix...'
 author: Md Ariful Islam
-slug: keep-react-v1.3.0
-keyFeatures:
-  [
-    'Update Carousel Component',
-    'Modal Scrollbar Issue fixed',
-    'Remove Typography component',
-    'Color page added',
-    'Toast component with sooner',
-    'Layout style added',
-    'And more...',
-  ]
+tag: Releases
+version: V1.3.0
 ---
 
-## Keep React V1.3.0 Release Notes
+<BlogHeader title="Keep React v1.3.0" />
+
+## Release Notes
 
 Welcome to the latest release of Keep React! We're excited to introduce several new features and enhancements to improve your development experience. Let's dive in and explore what's new:
 
diff --git a/data/blogs/keep-react-v1.4.0.md b/data/blogs/keep-react-v1.4.0.md
deleted file mode 100644
index 20834aee..00000000
--- a/data/blogs/keep-react-v1.4.0.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: 'Keep React V1.4.0'
-date: 'June 24, 2024'
-description: 'Most of the component structures are changed but the UI looks the same as before. In v1.3.0, we used components with a (.) syntax, but now we can use components with detailed JSX tags like `AlertContainer`.'
-author: Md Ariful Islam
-slug: keep-react-v1.4.0
-keyFeatures:
-  - 'Update Alert Structure'
-  - 'Carousel Structure update'
-  - 'Update Breadcrumb Structure'
-  - 'Alert Structure update'
-  - 'Update Table Structure'
-  - 'Upload Structure update'
-  - 'And more...'
----
-
-## Release Notes
-
-Welcome to the latest release of Keep React! This version brings several improvements and updates to our components while maintaining the familiar UI look and feel.
-
-## Alert
-
-The Alert component structure has been updated for better consistency. Here are the changes:
-
-- `Alert.Container` is now `AlertContainer`
-- `Alert.Body` is now `AlertBody`
-- `Alert.Dismiss` is now `AlertDismiss`
-- `Alert.Link` is now `AlertLink`
-- `Alert.Icon` is now `AlertIcon`
-- `Alert.Title` is now `AlertTitle`
-- `Alert.Description` is now `AlertDescription`
-
-```jsx
-import { Alert, AlertContainer, AlertDescription, AlertDismiss, AlertIcon, AlertLink, AlertTitle } from 'keep-react'
-
-const AlertComponent = () => {
-  return (
-    <Alert color="primary">
-      <AlertContainer>
-        <AlertIcon />
-        <AlertTitle>Alert here</AlertTitle>
-        <AlertDescription>A short description followed by two actions items.</AlertDescription>
-      </AlertContainer>
-      <AlertLink href="/">Learn More</AlertLink>
-      <AlertDismiss />
-    </Alert>
-  )
-}
-
-export default AlertComponent
-```
-
-## Carousel
-
-We have revamped the Carousel component structure. Here are the changes:
-
-- `Carousel.Control` is now `CarouselControl`
-- `Carousel.Buttons` is now `CarouselButtons`
-- `Carousel.Item` is now `CarouselItem`
-- `Carousel.Slides` is now `CarouselSlides`
-- `Carousel.Indicators` is now `CarouselIndicators`
-- `Carousel.PrevButton` is now `CarouselPrevButton`
-- `Carousel.NextButton` is now `CarouselNextButton`
-
-```jsx
-import {
-  Carousel,
-  CarouselButtons,
-  CarouselControl,
-  CarouselIndicators,
-  CarouselItem,
-  CarouselNextButton,
-  CarouselPrevButton,
-  CarouselSlides,
-} from 'keep-react'
-
-const CarouselComponent = () => (
-  return (
-    <Carousel>
-      <CarouselSlides>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index}>
-            <div className="flex items-center justify-center rounded-xl border border-metal-100 bg-primary-25 p-20 dark:border-metal-900 dark:bg-metal-900">
-              <h1 className="text-heading-1 font-medium text-metal-900 dark:text-white">{index + 1}</h1>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselSlides>
-      <CarouselControl>
-        <CarouselButtons>
-          <CarouselPrevButton />
-          <CarouselNextButton />
-        </CarouselButtons>
-        <CarouselIndicators />
-      </CarouselControl>
-    </Carousel>
-  )
-}
-
-export default CarouselComponent
-```
-
-## Card, Modal, Accordion, and More
-
-Similarly, other components like Card, Modal, Accordion, and many more have undergone structural updates for consistency and clarity.
-
-## Updated Component List
-
-- [`Accordion`](/docs/components/accordion)
-- [`Alert`](/docs/components/alert)
-- [`Avatar`](/docs/components/avatar)
-- [`Breadcrumb`](/docs/components/breadcrumb)
-- [`ButtonGroup`](/docs/components/buttonGroup)
-- [`Card`](/docs/components/card)
-- [`Carousel`](/docs/components/carousel)
-- [`Drawer`](/docs/components/drawer)
-- [`Dropdown`](/docs/components/dropdown)
-- [`Empty`](/docs/components/empty)
-- [`Input`](/docs/components/input)
-- [`Modal`](/docs/components/modal)
-- [`Navbar`](/docs/components/navbar)
-- [`Notification`](/docs/components/notification)
-- [`Number Input`](/docs/components/numberInput)
-- [`Pagination`](/docs/components/pagination)
-- [`Popover`](/docs/components/popover)
-- [`Progress`](/docs/components/progress)
-- [`Rating`](/docs/components/rating)
-- [`Sidebar`](/docs/components/sidebar)
-- [`Skeleton`](/docs/components/skeleton)
-- [`Slider`](/docs/components/slider)
-- [`Steps`](/docs/components/steps)
-- [`Table`](/docs/components/table)
-- [`Tabs`](/docs/components/tabs)
-- [`Timeline`](/docs/components/timeline)
-- [`Upload`](/docs/components/upload)
-
-## Dark Mode
-
-With the release of Keep React v.1.4.0, dark mode is now available for all components. Enhance your user interface with this sleek new feature and provide a better experience for users who prefer darker themes.
-
-## Next Js Server and Client Component
-
-Starting from this version, you can now use Keep components in our Next.js server components without the need for the "use client" directive. Even though our components are still client-side components, they can seamlessly integrate with Next.js server components, offering greater flexibility in your project architecture.
-
-## Contributors
-
-This release was made possible by:
-
-- [Arifulislam5577](https://github.com/Arifulislam5577)
diff --git a/data/blogs/keep-react-v1.4.0.mdx b/data/blogs/keep-react-v1.4.0.mdx
new file mode 100644
index 00000000..ffb38c4d
--- /dev/null
+++ b/data/blogs/keep-react-v1.4.0.mdx
@@ -0,0 +1,114 @@
+---
+title: 'Keep React V1.4.0'
+date: 'June 24, 2024'
+author: Md Ariful Islam
+tag: Releases
+version: V1.4.0
+---
+
+<BlogHeader title="Keep React v1.4.0" />
+
+## Release Notes
+
+Welcome to the latest release of Keep React! This version brings several improvements and updates to our components while maintaining the familiar UI look and feel.
+
+## Alert
+
+The Alert component structure has been updated for better consistency. Here are the changes:
+
+- Alert.Container is now AlertContainer
+- Alert.Body is now AlertBody
+- Alert.Dismiss is now AlertDismiss
+- Alert.Link is now AlertLink
+- Alert.Icon is now AlertIcon
+- Alert.Title is now AlertTitle
+- Alert.Description is now AlertDescription
+
+```jsx showLineNumbers
+<Alert color="primary">
+  <AlertContainer>
+    <AlertIcon />
+    <AlertTitle>...</AlertTitle>
+    <AlertDescription>...</AlertDescription>
+  </AlertContainer>
+  <AlertLink href="/">...</AlertLink>
+  <AlertDismiss />
+</Alert>
+```
+
+## Carousel
+
+We have revamped the Carousel component structure. Here are the changes:
+
+- Carousel.Control is now CarouselControl
+- Carousel.Buttons is now CarouselButtons
+- Carousel.Item is now CarouselItem
+- Carousel.Slides is now CarouselSlides
+- Carousel.Indicators is now CarouselIndicators
+- Carousel.PrevButton is now CarouselPrevButton
+- Carousel.NextButton is now CarouselNextButton
+
+```tsx showLineNumbers
+<Carousel>
+  <CarouselSlides>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselSlides>
+  <CarouselControl>
+    <CarouselButtons>
+      <CarouselPrevButton />
+      <CarouselNextButton />
+    </CarouselButtons>
+    <CarouselIndicators />
+  </CarouselControl>
+</Carousel>
+```
+
+## Card, Modal, Accordion, and More
+
+Similarly, other components like Card, Modal, Accordion, and many more have undergone structural updates for consistency and clarity.
+
+## Updated Component List
+
+- [Accordion](/docs/components/accordion)
+- [Alert](/docs/components/alert)
+- [Avatar](/docs/components/avatar)
+- [Breadcrumb](/docs/components/breadcrumb)
+- [ButtonGroup](/docs/components/buttonGroup)
+- [Card](/docs/components/card)
+- [Carousel](/docs/components/carousel)
+- [Drawer](/docs/components/drawer)
+- [Dropdown](/docs/components/dropdown)
+- [Empty](/docs/components/empty)
+- [Input](/docs/components/input)
+- [Modal](/docs/components/modal)
+- [Navbar](/docs/components/navbar)
+- [Notification](/docs/components/notification)
+- [Number Input](/docs/components/numberInput)
+- [Pagination](/docs/components/pagination)
+- [Popover](/docs/components/popover)
+- [Progress](/docs/components/progress)
+- [Rating](/docs/components/rating)
+- [Sidebar](/docs/components/sidebar)
+- [Skeleton](/docs/components/skeleton)
+- [Slider](/docs/components/slider)
+- [Steps](/docs/components/steps)
+- [Table](/docs/components/table)
+- [Tabs](/docs/components/tabs)
+- [Timeline](/docs/components/timeline)
+- [Upload](/docs/components/upload)
+
+## Dark Mode
+
+With the release of Keep React v.1.4.0, dark mode is now available for all components. Enhance your user interface with this sleek new feature and provide a better experience for users who prefer darker themes.
+
+## Next Js Server and Client Component
+
+Starting from this version, you can now use Keep components in our Next.js server components without the need for the "use client" directive. Even though our components are still client-side components, they can seamlessly integrate with Next.js server components, offering greater flexibility in your project architecture.
+
+## Contributors
+
+This release was made possible by:
+
+- [Arifulislam5577](https://github.com/Arifulislam5577)
diff --git a/data/blogs/keep-react-v1.5.0.md b/data/blogs/keep-react-v1.5.0.mdx
similarity index 75%
rename from data/blogs/keep-react-v1.5.0.md
rename to data/blogs/keep-react-v1.5.0.mdx
index 8f7a2c52..7ee51faf 100644
--- a/data/blogs/keep-react-v1.5.0.md
+++ b/data/blogs/keep-react-v1.5.0.mdx
@@ -1,19 +1,13 @@
 ---
 title: 'Keep React V1.5.0'
 date: 'August 8, 2024'
-description: ''
 author: Md Ariful Islam
-slug: keep-react-v1.5.0
-keyFeatures:
-  - 'Framer Motion Added'
-  - 'Remove keep presets'
-  - 'cn function & asChild'
-  - 'Alert Structure update'
-  - 'Avatar structure update'
-  - 'Introduce Some Radix UI'
-  - 'And more...'
+tag: Releases
+version: V1.5.0
 ---
 
+<BlogHeader title="Keep React v1.5.0" />
+
 ## Release Notes
 
 Welcome to the latest release of Keep React! This version brings numerous improvements and updates to our components while preserving the familiar UI look and feel.
@@ -36,7 +30,7 @@ We are excited to announce that we are now using the highly popular animation fr
 
 We have simplified the integration process. You can now import `keepTheme` from `keep-react/keepTheme` to achieve the same functionality. For more details, please check out the installation docs [`here`](docs/getting-started/introduction).
 
-```js
+```tsx {1,8} showLineNumbers
 import { keepTheme } from 'keep-react/keepTheme'
 
 const config = {
@@ -51,33 +45,33 @@ export default keepTheme(config)
 
 We have integrated several components with Radix UI for enhanced functionality and accessibility. Here is the list of components now using Radix UI:
 
-- [`Checkbox`](/docs/components/checkbox)
-- [`Slider`](/docs/components/slider)
-- [`Switch`](/docs/components/switch)
+- [Checkbox](/docs/components/checkbox)
+- [Slider](/docs/components/slider)
+- [Switch](/docs/components/switch)
 
 ## Updated Component Styles
 
 We have updated the styles for some of our components to improve their appearance and usability:
 
-- [`Alert`](/docs/components/alert)
-- [`Badge`](/docs/components/badge)
+- [Alert](/docs/components/alert)
+- [Badge](/docs/components/badge)
 
 ## Removal of Extra div Elements
 
 To optimize our components, we have removed extra div elements from the following components:
 
-- [`Modal`](/docs/components/modal)
-- [`Notification`](/docs/components/notification)
-- [`Drawer`](/docs/components/drawer)
+- [Modal](/docs/components/modal)
+- [Notification](/docs/components/notification)
+- [Drawer](/docs/components/drawer)
 
 ## Structural Updates to Components
 
 We have made structural updates to several components for better performance and flexibility:
 
-- [`Avatar`](/docs/components/avatar)
-- [`Number Input`](/docs/components/numberInput)
-- [`Steps`](/docs/components/steps)
-- [`Tabs`](/docs/components/tabs)
+- [Avatar](/docs/components/avatar)
+- [Number Input](/docs/components/numberInput)
+- [Steps](/docs/components/steps)
+- [Tabs](/docs/components/tabs)
 
 ## Contributors
 
@@ -85,4 +79,4 @@ This release was made possible by the hard work and dedication of our contributo
 
 - [Arifulislam5577](https://github.com/Arifulislam5577)
 
-These updates aim to improve your development experience and the performance of your applications. For detailed documentation and examples, please visit our official [`documentation`](docs/getting-started/introduction). Thank you for using Keep React!
+These updates aim to improve your development experience and the performance of your applications. For detailed documentation and examples, please visit our official [`documentation`](/docs/getting-started/introduction). Thank you for using Keep React!
diff --git a/data/blogs/keep-react-v1.6.0.mdx b/data/blogs/keep-react-v1.6.0.mdx
new file mode 100644
index 00000000..df0f5e5c
--- /dev/null
+++ b/data/blogs/keep-react-v1.6.0.mdx
@@ -0,0 +1,197 @@
+---
+title: 'Keep React V1.6.0'
+date: 'August 8, 2024'
+author: Md Ariful Islam
+tag: Releases
+version: V1.6.0
+---
+
+<BlogHeader title="Keep React v1.6.0" />
+
+## Release Notes
+
+Welcome to the **Keep React v1.6.0** release! This update focuses on improving accessibility, adding new components, and enhancing customization options for developers. Here’s a quick look at what's new:
+
+## Animation Update
+
+We’ve added the `tailwindcss-animate` library to enhance component interactions with smoother animations.
+
+## Component Update
+
+Several components have been updated to give developers more control and improve the overall user experience.
+
+## Accordion
+
+The Accordion component now supports keyboard accessibility, and its structure has been slightly modified:
+
+- `type` prop (required): Specifies the accordion's behavior. Use `"single"` to allow closing items by clicking the trigger.
+- AccordionPanel ➔ AccordionItem
+- AccordionContainer ➔ AccordionAction
+
+Here’s an example of the updated Accordion anatomy:
+
+```tsx {2,3} showLineNumbers /type/ /collapsible/ /value/
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionAction>
+      <AccordionTitle></AccordionTitle>
+      <AccordionIcon />
+    </AccordionAction>
+    <AccordionContent></AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+Check out the [Accordion documentation](/docs/components/accordion) for more examples.
+
+## Avatar
+
+The Avatar component now displays fallback text when the image fails to load. This change improves user experience.
+
+```tsx {3} showLineNumbers
+<Avatar>
+  <AvatarImage src="..." />
+  <AvatarFallback>...</AvatarFallback>
+</Avatar>
+```
+
+If you are using the `AvatarGroup` component, wrap the `Avatar` component like this:
+
+```tsx {1,2,6,10} showLineNumbers
+<AvatarGroup>
+  <Avatar>
+    <AvatarImage src="..." />
+    <AvatarFallback>...</AvatarFallback>
+  </Avatar>
+  <Avatar>
+    <AvatarImage src="..." />
+    <AvatarFallback>...</AvatarFallback>
+  </Avatar>
+</AvatarGroup>
+```
+
+More examples can be found in the [Avatar documentation](/docs/components/avatar).
+
+## Chart
+
+To use the updated chart components, install the `"recharts"` library. We no longer export recharts components directly—only our custom chart components.
+
+```tsx showLineNumbers
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from 'keep-react'
+```
+
+Find more in the [Chart documentation](/docs/components/barChart)
+
+## Breadcrumb
+
+The Breadcrumb component has been restructured for better flexibility, including new variants:
+
+- BreadcrumbList, BreadcrumbLink
+- BreadcrumbDivider (Separator)
+- BreadcrumbPage, BreadcrumbEllipsis
+
+Updated anatomy:
+
+```tsx {2,4,6,11,13} showLineNumbers
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="...">...</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="...">...</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbPage>...</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+Visit the [Breadcrumb documentation](/docs/components/breadcrumb) for more.
+
+## Steps
+
+The Steps component has also been simplified:
+
+- StepLine component removed
+
+Updated anatomy:
+
+```tsx showLineNumbers
+<Steps>
+  <StepsItem>
+    <StepsPoint />
+    <StepsContent>
+      <StepsTitle>...</StepsTitle>
+      <StepsDescription>...</StepsDescription>
+    </StepsContent>
+  </StepsItem>
+</Steps>
+```
+
+More details in the [Steps documentation](/docs/components/steps).
+
+## Input OTP
+
+A new `InputOTP` component is now available! Use it to create OTP (one-time password) input fields.
+
+Anatomy:
+
+```tsx showLineNumbers
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPItem index={0} />
+    <InputOTPItem index={1} />
+    <InputOTPItem index={2} />
+    <InputOTPItem index={3} />
+    <InputOTPItem index={4} />
+    <InputOTPItem index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+More examples in the [InputOTP documentation](/docs/components/inputOtp)
+
+## Select
+
+The new Select component offers better customization and accessibility.
+
+Anatomy:
+
+```tsx showLineNumbers
+<Select>
+  <SelectAction>
+    <SelectValue placeholder="..." />
+  </SelectAction>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>...</SelectLabel>
+      <SelectItem value="...">...</SelectItem>
+      <SelectItem value="...">...</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+Check the [Select documentation](/docs/components/select) for more examples.
+
+## Contributors
+
+Thanks to all the contributors for making this release possible! Special shout-out to:
+
+- [Arifulislam5577](https://github.com/Arifulislam5577)
+
+These updates aim to improve your development experience and the performance of your applications. For detailed documentation and examples, please visit our official [`documentation`](/docs/getting-started/introduction). Thank you for using Keep React!
diff --git a/next.config.mjs b/next.config.mjs
index 222e2dfe..26602bfd 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,3 @@
-/** @type {import('next').NextConfig} */
 import mdx from '@next/mdx'
 import slug from 'rehype-slug'
 import tableOfContents from 'remark-toc'
diff --git a/package.json b/package.json
index 2791e10d..eb882fdc 100644
--- a/package.json
+++ b/package.json
@@ -121,6 +121,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "next": "^14.2.3",
+    "next-mdx-remote": "^5.0.0",
     "next-nprogress-bar": "^2.1.2",
     "next-themes": "^0.3.0",
     "phosphor-react": "^1.4.1",
@@ -133,8 +134,10 @@
     "prop-types": "^15.8.1",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
     "remark-toc": "^9.0.0",
+    "shiki": "^1.22.0",
     "tailwindcss": "^3.4.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.3.3",
diff --git a/utils/GetMarkDownContent.ts b/utils/GetMarkDownContent.ts
deleted file mode 100644
index f1391c1a..00000000
--- a/utils/GetMarkDownContent.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import fs from 'fs'
-import matter from 'gray-matter'
-
-const getMarkDownContent = (folder: string, slug: string) => {
-  const file = `${folder}${slug}.md`
-  const content = fs.readFileSync(file, 'utf8')
-  const matterResult = matter(content)
-  return matterResult
-}
-
-export default getMarkDownContent
diff --git a/utils/GetMarkDownData.ts b/utils/GetMarkDownData.ts
deleted file mode 100644
index 85eade77..00000000
--- a/utils/GetMarkDownData.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import fs from 'fs'
-import matter from 'gray-matter'
-import path from 'path'
-
-const getMarkDownData = (folder: string) => {
-  const files = fs.readdirSync(folder)
-  const markdownPosts = files.filter((file) => file.endsWith('.md'))
-
-  const postsData = markdownPosts.map((file) => {
-    const filePath = path.join(folder, file)
-    const content = fs.readFileSync(filePath, 'utf8')
-    const data: matter.GrayMatterFile<string> = matter(content)
-
-    return {
-      ...data.data,
-      slug: file.replace('.md', ''),
-      content: data.content,
-    }
-  })
-
-  return postsData
-}
-
-export default getMarkDownData
diff --git a/utils/getMdxContent.ts b/utils/getMdxContent.ts
new file mode 100644
index 00000000..5b1ebb3e
--- /dev/null
+++ b/utils/getMdxContent.ts
@@ -0,0 +1,25 @@
+import fs from 'fs'
+import matter from 'gray-matter'
+import path from 'path'
+
+const blogsDirectory = path.join(process.cwd(), 'data/blogs')
+
+export const getBlogs = () => {
+  const fileNames = fs.readdirSync(blogsDirectory)
+
+  const blogs = fileNames.map((fileName) => {
+    const filePath = path.join(blogsDirectory, fileName)
+
+    const fileContents = fs.readFileSync(filePath, 'utf8')
+
+    const { data, content } = matter(fileContents)
+
+    return {
+      slug: fileName.replace(/\.mdx$/, ''),
+      ...data,
+      content,
+    }
+  })
+
+  return blogs
+}