diff --git a/README.md b/README.md
index c9e5eb0..2cf6a0e 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# React Simple Headless Carousel
+# React Micro Carousel
 
 ![example workflow](https://github.com/pstachula-dev/simple-headless-carousel/actions/workflows/main.yml/badge.svg)
 
diff --git a/package-lock.json b/package-lock.json
index 7396e8f..d06d1fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10465,6 +10465,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.447.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.447.0.tgz",
+      "integrity": "sha512-SZ//hQmvi+kDKrNepArVkYK7/jfeZ5uFNEnYmd45RKZcbGD78KLnrcNXmgeg6m+xNHFvTG+CblszXCy4n6DN4w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "dev": true,
@@ -17999,6 +18008,7 @@
         "@docusaurus/preset-classic": "3.4.0",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
+        "lucide-react": "^0.447.0",
         "prism-react-renderer": "^2.3.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
diff --git a/packages/docs/docusaurus.config.ts b/packages/docs/docusaurus.config.ts
index a5af1cf..06beec6 100644
--- a/packages/docs/docusaurus.config.ts
+++ b/packages/docs/docusaurus.config.ts
@@ -3,7 +3,7 @@ import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'React Simple Headless Carousel',
+  title: 'React Micro Carousel',
   tagline: 'Documentation and examples',
   favicon: 'img/favicon.ico',
 
@@ -49,7 +49,7 @@ const config: Config = {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'React Simple Headless Carousel',
+      title: 'React Micro Carousel',
       logo: {
         alt: 'My Site Logo',
         src: 'img/logo.svg',
@@ -80,7 +80,7 @@ const config: Config = {
           items: [
             {
               label: 'Tutorial',
-              to: '/docs/intro',
+              to: '/docs/tutorial/basic',
             },
           ],
         },
@@ -89,11 +89,11 @@ const config: Config = {
           items: [
             {
               label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://github.com/pstachula-dev/simple-headless-carousel',
             },
             {
               label: 'NPM',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://www.npmjs.com/package/react-simple-headless-carousel',
             },
           ],
         },
@@ -102,7 +102,7 @@ const config: Config = {
           items: [],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} React Micro Carousel, Inc. Built with Docusaurus.`,
     },
     prism: {
       theme: prismThemes.dracula,
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 0bf1cde..75fa6c4 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -18,10 +18,11 @@
     "@docusaurus/preset-classic": "3.4.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.447.0",
     "prism-react-renderer": "^2.3.0",
-    "react-simple-headless-carousel": "^0.0.18",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-simple-headless-carousel": "^0.0.18"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",
diff --git a/packages/docs/src/components/HomepageFeatures/index.tsx b/packages/docs/src/components/HomepageFeatures/index.tsx
index b95470d..db80725 100644
--- a/packages/docs/src/components/HomepageFeatures/index.tsx
+++ b/packages/docs/src/components/HomepageFeatures/index.tsx
@@ -1,39 +1,59 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable global-require */
 import clsx from 'clsx';
+import { ReactNode } from 'react';
+import { Weight, Rocket, PaintBucket } from 'lucide-react';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  Svg: ReactNode;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: <>TODO...</>,
+    title: 'Core Features',
+    Svg: <Weight style={{ marginTop: 100 }} size={60} />,
+    description: (
+      <div className={styles.featureItem}>
+        The Carousel is a <strong>lightweight</strong>,{' '}
+        <strong>dependency-free</strong> component with{' '}
+        <strong>TypeScript</strong> support. It&apos;s{' '}
+        <strong>Tailwind CSS</strong> compatible and offers{' '}
+        <strong>responsive</strong> design for various devices.
+      </div>
+    ),
   },
   {
-    title: 'Focus on minimalism',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: <>TODO...</>,
+    title: 'User Interaction',
+    Svg: <Rocket style={{ marginTop: 100 }} size={60} />,
+    description: (
+      <div className={styles.featureItem}>
+        This carousel handles touch and mouse events smoothly and implements{' '}
+        <strong>lazy image loading</strong> for optimized performance across
+        different devices.
+      </div>
+    ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: <>TODO...</>,
+    title: 'Customization',
+    Svg: <PaintBucket style={{ marginTop: 100 }} size={60} />,
+    description: (
+      <div className={styles.featureItem}>
+        Easy to integrate with Tailwind or non-Tailwind projects, this{' '}
+        <strong>headless styles</strong> allows for custom styling while
+        maintaining core functionality.
+      </div>
+    ),
   },
 ];
 
 function Feature({ title, Svg, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
+      <div className="text--center">{Svg}</div>
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>
         <p>{description}</p>
diff --git a/packages/docs/src/components/HomepageFeatures/styles.module.css b/packages/docs/src/components/HomepageFeatures/styles.module.css
index b248eb2..f73615c 100644
--- a/packages/docs/src/components/HomepageFeatures/styles.module.css
+++ b/packages/docs/src/components/HomepageFeatures/styles.module.css
@@ -9,3 +9,13 @@
   height: 200px;
   width: 200px;
 }
+
+svg {
+  display: inline-block;
+}
+
+h3 {
+  font-weight: bold;
+  font-size: 1.4rem;
+  margin: 16px 0;
+}
diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css
index ad1896a..f78f6d1 100644
--- a/packages/docs/src/css/custom.css
+++ b/packages/docs/src/css/custom.css
@@ -6,7 +6,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
+  --ifm-color-primary: #1a212d;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
@@ -19,7 +19,7 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #487dda;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;
@@ -40,3 +40,7 @@ button {
 .bg-default {
   background-color: #ccc;
 }
+
+.hero__title {
+  font-weight: bold;
+}
diff --git a/packages/docs/src/pages/index.module.css b/packages/docs/src/pages/index.module.css
index 9f71a5d..d25f61b 100644
--- a/packages/docs/src/pages/index.module.css
+++ b/packages/docs/src/pages/index.module.css
@@ -20,4 +20,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 32px 0;
 }
diff --git a/packages/react-simple-headless-carousel/package.json b/packages/react-simple-headless-carousel/package.json
index 399fb31..b7ab332 100644
--- a/packages/react-simple-headless-carousel/package.json
+++ b/packages/react-simple-headless-carousel/package.json
@@ -10,7 +10,7 @@
   "homepage": "https://simple-react-carousel.onrender.com/",
   "version": "0.0.19",
   "sideEffects": false,
-  "description": "React simple headless carousel",
+  "description": "React Micro Carousel",
   "keywords": [
     "react",
     "reactjs",
diff --git a/packages/react-simple-headless-carousel/src/App.tsx b/packages/react-simple-headless-carousel/src/App.tsx
index ea561e8..33f5983 100644
--- a/packages/react-simple-headless-carousel/src/App.tsx
+++ b/packages/react-simple-headless-carousel/src/App.tsx
@@ -4,7 +4,7 @@ function App() {
   return (
     <div className="h-lvh w-full bg-gray-800  font-bold text-white">
       <div className="mx-auto flex max-w-3xl flex-col gap-6 pt-10 text-center">
-        <h1 className="my-6 text-3xl">React Simple Headless Carousel Demo</h1>
+        <h1 className="my-6 text-3xl">React Micro Carousel Demo</h1>
 
         {/* example start */}
         <div className="my-4">