diff --git a/apps/docs/app/(home)/page.tsx b/apps/docs/app/(home)/page.tsx
index 3ff45ba..a592e9b 100644
--- a/apps/docs/app/(home)/page.tsx
+++ b/apps/docs/app/(home)/page.tsx
@@ -1,10 +1,11 @@
 import Link from 'next/link';
 import InstallPage from './components/InstallPage';
 import Access from './components/Access';
+import Image from 'next/image';
 
 export default function HomePage() {
   return (
-    <main className='flex h-[calc(100vh-56px)] flex-col justify-center text-center'>
+    <main className='flex h-[calc(100vh-56px)] flex-col justify-center items-center text-center relative'>
       <div
         style={{
           display: 'flex',
@@ -23,7 +24,7 @@ export default function HomePage() {
             style={{
               display: 'flex',
               flexDirection: 'column',
-              gap: '30px',
+              gap: '25px',
               justifyContent: 'center',
               alignItems: 'center',
             }}
@@ -33,15 +34,14 @@ export default function HomePage() {
               application.
             </p>
             <h3
-              className='font-medium text-xl text-appTextSecondaryColor'
+              className='font-medium text-xl text-gray-400'
               style={{
                 width: '50vw',
                 textAlign: 'center',
               }}
             >
-              The official React UI library built on top of Radix UI.
+              Open source components built on top of Radix UI.
             </h3>
-
             <div
               className='meta-container'
               style={{
@@ -49,8 +49,8 @@ export default function HomePage() {
                 flexDirection: 'column',
                 justifyContent: 'center',
                 alignItems: 'center',
-                marginTop: '50px',
-                gap: '2rem',
+                marginTop: '30px',
+                gap: '3rem',
               }}
             >
               <div style={{ position: 'relative' }}>
@@ -61,9 +61,50 @@ export default function HomePage() {
                 <Access />
               </div>
             </div>
+            <div className='stack flex flex-row gap-10 justify-center items-center'>
+              <div className='flex flex-row gap-2 w-full justify-center items-center'>
+                <Image src='/react.svg' alt='react' width={30} height={30} />
+                <p>React.js</p>
+              </div>
+
+              <div className='flex flex-row gap-2 w-full justify-center items-center'>
+                <Image src='/next.svg' alt='next' width={30} height={30} />
+                <p>Next.js</p>
+              </div>
+
+              <div className='flex flex-row gap-2 w-full justify-center items-center'>
+                <Image
+                  src='/tailwind.svg'
+                  alt='tailwind'
+                  width={30}
+                  height={30}
+                />
+                <p className='text-nowrap'>Tailwind css</p>
+              </div>
+
+              <div className='flex flex-row gap-2 w-full pl-2 justify-center items-center'>
+                <Image
+                  src='/framer.png'
+                  alt='framer motion'
+                  width={25}
+                  height={25}
+                />
+                <p className='text-nowrap'>Framer Motion</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+      <div className='absolute bottom-4 '>
+        Reach out to me via{' '}
+        <a
+          target='_blank'
+          className='underline text-cyan-600'
+          href='https://x.com/SySagar2'
+        >
+          Twitter
+        </a>
+      </div>
     </main>
   );
 }
diff --git a/apps/docs/package.json b/apps/docs/package.json
index d21b073..eecbc6c 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@groovy-box/ui": "*",
+    "@groovy-box/tokens": "*",
+    "framer-motion": "^11.5.6",
     "fumadocs-core": "13.4.10",
     "fumadocs-mdx": "10.0.2",
     "fumadocs-ui": "13.4.10",
diff --git a/apps/docs/public/framer.png b/apps/docs/public/framer.png
new file mode 100644
index 0000000..a5ba3e2
Binary files /dev/null and b/apps/docs/public/framer.png differ
diff --git a/apps/docs/public/logo.png:Zone.Identifier b/apps/docs/public/logo.png:Zone.Identifier
deleted file mode 100644
index 896bb80..0000000
--- a/apps/docs/public/logo.png:Zone.Identifier
+++ /dev/null
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=C:\Users\hp\Downloads\favicon-1,favicon-2,favicon-3.zip
diff --git a/apps/docs/public/next.svg b/apps/docs/public/next.svg
new file mode 100644
index 0000000..04015d9
--- /dev/null
+++ b/apps/docs/public/next.svg
@@ -0,0 +1,4 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" fill="black"/>
+<path d="M239.234 0.137781C238.133 0.237864 234.629 0.588155 231.476 0.838362C158.755 7.3938 90.6385 46.6264 47.4964 106.926C23.4729 140.454 8.10792 178.486 2.30225 218.769C0.250244 232.831 0 236.984 0 256.05C0 275.116 0.250244 279.269 2.30225 293.331C16.2158 389.461 84.6326 470.228 177.423 500.153C194.039 505.507 211.557 509.16 231.476 511.362C239.234 512.213 272.766 512.213 280.524 511.362C314.908 507.559 344.036 499.052 372.764 484.39C377.168 482.138 378.019 481.537 377.419 481.037C377.018 480.737 358.25 455.566 335.728 425.14L294.788 369.845L243.488 293.932C215.26 252.197 192.038 218.069 191.837 218.069C191.637 218.019 191.437 251.747 191.337 292.931C191.187 365.041 191.137 367.943 190.236 369.644C188.935 372.096 187.934 373.097 185.831 374.198C184.23 374.999 182.829 375.149 175.271 375.149H166.613L164.31 373.698C162.809 372.747 161.708 371.496 160.957 370.045L159.906 367.793L160.006 267.46L160.156 167.076L161.708 165.125C162.509 164.074 164.21 162.723 165.412 162.072C167.464 161.071 168.264 160.971 176.923 160.971C187.133 160.971 188.834 161.372 191.487 164.274C192.238 165.075 220.015 206.909 253.247 257.301C286.48 307.693 331.924 376.5 354.246 410.278L394.786 471.679L396.838 470.328C415.005 458.518 434.224 441.704 449.439 424.19C481.821 387.009 502.691 341.671 509.698 293.331C511.75 279.269 512 275.116 512 256.05C512 236.984 511.75 232.831 509.698 218.769C495.784 122.639 427.367 41.8724 334.577 11.9476C318.211 6.64318 300.794 2.99015 281.275 0.788321C276.47 0.287906 243.388 -0.262551 239.234 0.137781ZM344.036 154.966C346.438 156.167 348.39 158.469 349.091 160.871C349.491 162.172 349.591 189.995 349.491 252.697L349.341 342.672L333.476 318.352L317.56 294.032V228.627C317.56 186.342 317.76 162.573 318.061 161.422C318.861 158.619 320.613 156.417 323.015 155.116C325.067 154.066 325.818 153.965 333.676 153.965C341.083 153.965 342.384 154.066 344.036 154.966Z" fill="white"/>
+</svg>
diff --git a/apps/docs/public/react.svg b/apps/docs/public/react.svg
new file mode 100644
index 0000000..72107f8
--- /dev/null
+++ b/apps/docs/public/react.svg
@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M420.967 175.647C415.655 173.819 410.152 172.089 404.485 170.453C405.416 166.652 406.271 162.9 407.031 159.212C419.508 98.6498 411.35 49.8605 383.495 33.797C356.785 18.3942 313.103 34.4541 268.986 72.8476C264.744 76.5394 260.489 80.4482 256.237 84.5448C253.404 81.8344 250.575 79.2152 247.753 76.7099C201.517 35.6571 155.173 18.3568 127.345 34.4668C100.661 49.9143 92.7584 95.7808 103.989 153.176C105.074 158.72 106.341 164.381 107.775 170.137C101.216 171.999 94.8837 173.984 88.825 176.096C34.6187 194.994 0 224.613 0 255.336C0 287.067 37.1632 318.893 93.6233 338.191C98.0789 339.714 102.702 341.154 107.467 342.521C105.92 348.746 104.575 354.847 103.446 360.797C92.7375 417.196 101.1 461.979 127.713 477.329C155.203 493.181 201.337 476.887 246.26 437.618C249.811 434.514 253.374 431.223 256.944 427.772C261.571 432.228 266.191 436.445 270.786 440.4C314.299 477.845 357.276 492.965 383.865 477.572C411.326 461.675 420.251 413.567 408.664 355.036C407.779 350.566 406.75 345.999 405.593 341.351C408.833 340.393 412.014 339.405 415.115 338.377C473.811 318.929 512 287.49 512 255.336C512 224.502 476.265 194.684 420.967 175.647ZM408.236 317.615C405.436 318.542 402.564 319.438 399.637 320.306C393.157 299.793 384.411 277.979 373.709 255.443C383.922 233.443 392.329 211.908 398.628 191.528C403.865 193.043 408.949 194.642 413.847 196.329C461.227 212.639 490.128 236.754 490.128 255.336C490.128 275.129 458.916 300.823 408.236 317.615ZM387.208 359.284C392.331 385.166 393.063 408.565 389.669 426.858C386.62 443.295 380.487 454.254 372.905 458.643C356.769 467.983 322.264 455.843 285.05 423.82C280.784 420.149 276.487 416.229 272.177 412.081C286.603 396.302 301.022 377.959 315.094 357.588C339.845 355.392 363.23 351.801 384.436 346.899C385.481 351.112 386.408 355.244 387.208 359.284ZM174.552 457.029C158.788 462.597 146.232 462.756 138.642 458.38C122.492 449.065 115.778 413.109 124.936 364.876C125.985 359.352 127.234 353.678 128.673 347.878C149.647 352.516 172.86 355.854 197.671 357.865C211.838 377.799 226.673 396.122 241.622 412.165C238.356 415.319 235.103 418.321 231.867 421.149C212.003 438.513 192.096 450.833 174.552 457.029ZM100.697 317.494C75.7316 308.961 55.1141 297.871 40.9817 285.769C28.2829 274.894 21.8716 264.097 21.8716 255.336C21.8716 236.692 49.6669 212.912 96.0247 196.75C101.65 194.788 107.538 192.94 113.648 191.204C120.055 212.045 128.46 233.834 138.602 255.868C128.329 278.229 119.805 300.366 113.335 321.451C108.979 320.199 104.758 318.881 100.697 317.494ZM125.454 148.976C115.832 99.8008 122.222 62.7051 138.303 53.3965C155.432 43.4801 193.309 57.6188 233.23 93.0659C235.782 95.3315 238.343 97.7029 240.913 100.156C226.037 116.13 211.337 134.315 197.296 154.131C173.216 156.363 150.166 159.948 128.974 164.749C127.641 159.39 126.461 154.124 125.454 148.976ZM346.308 203.51C341.242 194.759 336.041 186.215 330.738 177.905C347.074 179.97 362.726 182.711 377.424 186.066C373.011 200.208 367.511 214.995 361.037 230.153C356.393 221.336 351.481 212.446 346.308 203.51ZM256.244 115.788C266.333 126.718 276.436 138.921 286.374 152.161C276.36 151.688 266.222 151.442 256 151.442C245.875 151.442 235.812 151.682 225.86 152.147C235.807 139.03 245.998 126.843 256.244 115.788ZM165.604 203.661C160.543 212.437 155.722 221.279 151.151 230.137C144.781 215.031 139.332 200.177 134.881 185.834C149.489 182.565 165.067 179.892 181.299 177.866C175.922 186.254 170.678 194.86 165.604 203.66V203.661ZM181.767 334.366C164.996 332.495 149.184 329.959 134.58 326.781C139.102 312.182 144.671 297.01 151.175 281.579C155.758 290.431 160.599 299.277 165.69 308.071H165.691C170.878 317.031 176.251 325.807 181.767 334.366ZM256.849 396.426C246.483 385.241 236.143 372.869 226.044 359.56C235.847 359.945 245.842 360.142 256 360.142C266.436 360.142 276.752 359.906 286.907 359.454C276.937 373.003 266.87 385.394 256.849 396.426ZM361.246 280.793C368.089 296.391 373.858 311.483 378.438 325.833C363.593 329.219 347.565 331.947 330.678 333.974C335.993 325.551 341.24 316.861 346.395 307.921C351.611 298.877 356.563 289.819 361.246 280.793ZM327.449 296.994C319.446 310.871 311.229 324.119 302.887 336.623C287.694 337.71 271.998 338.269 256 338.269C240.067 338.269 224.568 337.774 209.644 336.805C200.966 324.137 192.571 310.85 184.618 297.113H184.62C176.689 283.414 169.389 269.599 162.774 255.861C169.387 242.091 176.668 228.261 184.554 214.586L184.552 214.588C192.459 200.877 200.78 187.655 209.378 175.066C224.605 173.915 240.219 173.314 255.999 173.314H256C271.851 173.314 287.485 173.919 302.708 175.08C311.174 187.578 319.439 200.757 327.377 214.47C335.405 228.337 342.78 242.076 349.449 255.55C342.8 269.256 335.442 283.133 327.449 296.994ZM372.569 52.7458C389.715 62.6331 396.382 102.508 385.61 154.797C384.923 158.134 384.149 161.532 383.309 164.976C362.067 160.075 339.001 156.428 314.851 154.162C300.782 134.128 286.203 115.914 271.57 100.146C275.504 96.3614 279.433 92.7524 283.345 89.3467C321.144 56.4514 356.473 43.4637 372.569 52.7458ZM256 209.616C281.25 209.616 301.72 230.085 301.72 255.336C301.72 280.586 281.25 301.056 256 301.056C230.75 301.056 210.28 280.586 210.28 255.336C210.28 230.085 230.75 209.616 256 209.616Z" fill="white"/>
+</svg>
diff --git a/apps/docs/public/tailwind.svg b/apps/docs/public/tailwind.svg
new file mode 100644
index 0000000..5161bcf
--- /dev/null
+++ b/apps/docs/public/tailwind.svg
@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M256 102C187.733 102 145.067 136.133 128 204.4C153.6 170.267 183.467 157.467 217.6 166C237.075 170.869 250.995 184.997 266.402 200.637C291.502 226.114 320.551 255.6 384 255.6C452.267 255.6 494.933 221.467 512 153.2C486.4 187.333 456.533 200.133 422.4 191.6C402.925 186.731 389.005 172.603 373.598 156.963C348.498 131.486 319.449 102 256 102ZM128 255.6C59.7333 255.6 17.0667 289.733 0 358C25.6 323.867 55.4667 311.067 89.6 319.6C109.075 324.469 122.995 338.597 138.402 354.237C163.502 379.714 192.551 409.2 256 409.2C324.267 409.2 366.933 375.067 384 306.8C358.4 340.933 328.533 353.733 294.4 345.2C274.925 340.331 261.005 326.203 245.598 310.563C220.498 285.086 191.449 255.6 128 255.6Z" fill="white"/>
+</svg>
diff --git a/apps/docs/public/ts.svg b/apps/docs/public/ts.svg
new file mode 100644
index 0000000..7e621db
--- /dev/null
+++ b/apps/docs/public/ts.svg
@@ -0,0 +1,11 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_502_546)">
+<path d="M40 0H472C494.091 0 512 17.9086 512 40V472C512 494.091 494.091 512 472 512H40C17.9086 512 0 494.091 0 472V40C0 17.9086 17.9086 0 40 0Z" fill="black"/>
+<path d="M301.036 400.95V456.19C310.02 460.794 320.646 464.246 332.912 466.548C345.178 468.85 358.106 470 371.698 470C384.942 470 397.526 468.734 409.446 466.202C421.366 463.67 431.82 459.498 440.802 453.688C449.786 447.876 456.898 440.28 462.14 430.9C467.38 421.522 470 409.928 470 396.118C470 386.106 468.502 377.33 465.508 369.792C462.514 362.254 458.194 355.55 452.55 349.682C446.908 343.812 440.14 338.548 432.252 333.886C424.362 329.226 415.464 324.824 405.558 320.682C398.302 317.688 391.796 314.784 386.036 311.964C380.278 309.144 375.382 306.268 371.352 303.332C367.32 300.398 364.21 297.29 362.022 294.01C359.834 290.73 358.74 287.02 358.74 282.876C358.74 279.078 359.718 275.656 361.676 272.606C363.634 269.556 366.4 266.938 369.97 264.752C373.54 262.564 377.916 260.868 383.1 259.658C388.282 258.45 394.042 257.846 400.376 257.846C404.984 257.846 409.85 258.192 414.974 258.882C420.1 259.572 425.254 260.636 430.438 262.076C435.62 263.514 440.658 265.326 445.554 267.514C450.448 269.7 454.97 272.232 459.116 275.108V223.494C450.708 220.272 441.522 217.884 431.56 216.33C421.598 214.776 410.166 214 397.266 214C384.136 214 371.698 215.41 359.95 218.23C348.202 221.048 337.864 225.45 328.938 231.434C320.012 237.42 312.958 245.044 307.774 254.308C302.592 263.572 300 274.648 300 287.538C300 303.994 304.75 318.034 314.254 329.658C323.756 341.28 338.18 351.12 357.53 359.176C365.132 362.284 372.216 365.332 378.78 368.326C385.346 371.318 391.018 374.424 395.798 377.646C400.578 380.868 404.35 384.378 407.114 388.176C409.878 391.974 411.26 396.29 411.26 401.124C411.26 404.69 410.396 408 408.668 411.05C406.942 414.098 404.32 416.746 400.808 418.99C397.296 421.234 392.918 422.988 387.678 424.254C382.438 425.52 376.304 426.154 369.278 426.154C357.3 426.154 345.438 424.054 333.69 419.852C321.94 415.652 311.056 409.352 301.036 400.95ZM208.964 263.484H280V218H82V263.484H152.689V466H208.964V263.484Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_502_546">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>