diff --git a/docs/components/banners/hero.tsx b/docs/components/banners/hero.tsx
index d073385..f6238f9 100644
--- a/docs/components/banners/hero.tsx
+++ b/docs/components/banners/hero.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@openlite/ui'
 import Link from 'next/link'
 import InstallCommand from '../install-command'
+import { Arrow } from '../icons/arrow'
 
 export function Hero() {
   return (
@@ -23,6 +24,7 @@ export function Hero() {
             <Button asChild>
               <Link href="/docs">
                 Getting started
+                <Arrow />
               </Link>
             </Button>
             <InstallCommand />
diff --git a/docs/components/demo.tsx b/docs/components/demo.tsx
new file mode 100644
index 0000000..b71552d
--- /dev/null
+++ b/docs/components/demo.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@openlite/ui'
+import { AlertDemo } from './examples/alert'
+import { MultipleComponentDemo } from './examples/multiple-components'
+import { TableDemo } from './examples/table'
+
+export default function Component() {
+  const [activeTab, setActiveTab] = useState('account')
+
+  return (
+    <div className="w-full max-w-6xl mx-auto p-4 space-y-4">
+
+      <AlertDemo />
+      <div className="flex flex-col md:flex-row gap-5">
+        <Card>
+          <CardContent>
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="w-full justify-start rounded-none border-b">
+                <TabsTrigger value="account" className="rounded-none">Account</TabsTrigger>
+                <TabsTrigger value="password" className="rounded-none">Password</TabsTrigger>
+              </TabsList>
+              <TabsContent value="account" className="p-4">
+                <h2 className="text-2xl font-bold mb-4">Login</h2>
+                <p className="text-gray-500 mb-4">Make changes to your account here. Click save when you're done.</p>
+                <div className="space-y-4">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+                    <Input id="name" defaultValue="Benjamin" />
+                  </div>
+                  <div>
+                    <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
+                    <Input type="password" id="username" defaultValue="*******" />
+                  </div>
+                  <Button>Login</Button>
+                </div>
+              </TabsContent>
+              <TabsContent value="password" className="p-4">
+                <h2 className="text-2xl font-bold mb-4">Create Account</h2>
+                <p className="text-gray-500 mb-4">Make changes to your account here. Click save when you're done.</p>
+                <div className="space-y-4">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+                    <Input id="name" defaultValue="Benjamin" />
+                  </div>
+                  <div>
+                    <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
+                    <Input type="password" id="username" defaultValue="*******" />
+                  </div>
+                  <Button>Save account</Button>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+        <MultipleComponentDemo />
+      </div>
+      <TableDemo />
+    </div>
+  )
+}
diff --git a/docs/components/examples.tsx b/docs/components/examples.tsx
deleted file mode 100644
index d1ff5e8..0000000
--- a/docs/components/examples.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Badge,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Checkbox,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Slider,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@openlite/ui'
-
-export default function Component() {
-  const [activeTab, setActiveTab] = useState('account')
-
-  return (
-    <div className="w-full max-w-6xl mx-auto p-4 space-y-4">
-      <header className="space-y-4">
-        <Slider value={70} />
-        <div className="flex justify-between items-center">
-          <div className="flex items-center space-x-2">
-            <Select>
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Options" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="option1">Option 1</SelectItem>
-                <SelectItem value="option2">Option 2</SelectItem>
-              </SelectContent>
-            </Select>
-            <div className="flex -space-x-2">
-              <Avatar>
-                <AvatarImage src="/example-sebastian.jpeg" />
-                <AvatarFallback>AC</AvatarFallback>
-              </Avatar>
-              <Avatar>
-                <AvatarImage src="/example-sebastian.jpeg" />
-                <AvatarFallback>BC</AvatarFallback>
-              </Avatar>
-              <Badge variant="secondary">+1</Badge>
-            </div>
-            <Button>Button</Button>
-            <Badge>Badge</Badge>
-          </div>
-
-        </div>
-      </header>
-
-      <div className="grid grid-cols-3 gap-4">
-        <Card className="col-span-1">
-          <CardHeader>
-            <CardTitle>Notification</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p>This is a notification!</p>
-          </CardContent>
-        </Card>
-
-        <Card className="col-span-2">
-          <CardContent className="p-0">
-            <div className="p-4">
-              <Input type="search" placeholder="Search..." className="w-full" />
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="col-span-3">
-          <CardContent className="p-0">
-            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-              <TabsList className="w-full justify-start rounded-none border-b">
-                <TabsTrigger value="account" className="rounded-none">Account</TabsTrigger>
-                <TabsTrigger value="password" className="rounded-none">Password</TabsTrigger>
-              </TabsList>
-              <TabsContent value="account" className="p-4">
-                <h2 className="text-2xl font-bold mb-4">Account</h2>
-                <p className="text-gray-500 mb-4">Make changes to your account here. Click save when you're done.</p>
-                <div className="space-y-4">
-                  <div>
-                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
-                    <Input id="name" defaultValue="Benjamin" />
-                  </div>
-                  <div>
-                    <label htmlFor="username" className="block text-sm font-medium text-gray-700">Username</label>
-                    <Input id="username" defaultValue="benjamincanac" />
-                  </div>
-                  <Button>Save account</Button>
-                </div>
-              </TabsContent>
-              <TabsContent value="password" className="p-4">
-                <h2 className="text-2xl font-bold mb-4">Password</h2>
-                <p className="text-gray-500 mb-4">Change your password here.</p>
-              </TabsContent>
-            </Tabs>
-          </CardContent>
-        </Card>
-
-        <Card className="col-span-3">
-          <CardContent>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[50px]"></TableHead>
-                  <TableHead>Id</TableHead>
-                  <TableHead>Name</TableHead>
-                  <TableHead>Title</TableHead>
-                  <TableHead>Email</TableHead>
-                  <TableHead>Role</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {[
-                  { id: 1, name: 'Lindsay Walton', title: 'Front-end Developer', email: 'lindsay.walton@example.com', role: 'Member' },
-                  { id: 2, name: 'Courtney Henry', title: 'Designer', email: 'courtney.henry@example.com', role: 'Admin' },
-                  { id: 3, name: 'Tom Cook', title: 'Director of Product', email: 'tom.cook@example.com', role: 'Member' },
-                  { id: 4, name: 'Whitney Francis', title: 'Copywriter', email: 'whitney.francis@example.com', role: 'Admin' },
-                  { id: 5, name: 'Leonard Krasner', title: 'Senior Designer', email: 'leonard.krasner@example.com', role: 'Owner' },
-                ].map(person => (
-                  <TableRow key={person.id}>
-                    <TableCell><Checkbox checked={person.id === 2} /></TableCell>
-                    <TableCell>{person.id}</TableCell>
-                    <TableCell>{person.name}</TableCell>
-                    <TableCell>{person.title}</TableCell>
-                    <TableCell>{person.email}</TableCell>
-                    <TableCell>{person.role}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/docs/components/examples/alert.tsx b/docs/components/examples/alert.tsx
new file mode 100644
index 0000000..5bb8367
--- /dev/null
+++ b/docs/components/examples/alert.tsx
@@ -0,0 +1,13 @@
+import { Alert, AlertDescription, AlertTitle } from '@openlite/ui'
+import { Chat } from '../icons/chat'
+
+export function AlertDemo() {
+  return (
+
+    <Alert>
+      <Chat />
+      <AlertTitle>You have a notification</AlertTitle>
+      <AlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, asperiores. </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/docs/components/examples/dialog.tsx b/docs/components/examples/dialog.tsx
new file mode 100644
index 0000000..3e4fb35
--- /dev/null
+++ b/docs/components/examples/dialog.tsx
@@ -0,0 +1,47 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Label,
+} from '@openlite/ui'
+import { Copy } from '../icons/copy'
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button outline="default">Open Music</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share link music</DialogTitle>
+          <DialogDescription>
+            Anyone who has this link will be able to view this.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="link" className="sr-only">
+              Link
+            </Label>
+            <Input
+              id="link"
+              defaultValue="https://music.youtube.com/watch?v=5G0fa470jW4&si=IdyDJVKrnCx6GARc"
+              readOnly
+            />
+          </div>
+          <Button type="submit" size="sm" className="px-3">
+            <span className="sr-only">Copy</span>
+            <Copy />
+          </Button>
+        </div>
+
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/docs/components/examples/multiple-components.tsx b/docs/components/examples/multiple-components.tsx
new file mode 100644
index 0000000..4b92464
--- /dev/null
+++ b/docs/components/examples/multiple-components.tsx
@@ -0,0 +1,126 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Input,
+
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+  Slider,
+
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@openlite/ui'
+import Image from 'next/image'
+import { ArrowLeft } from '../icons/arrow-left'
+import { ArrowRight } from '../icons/arrow-right'
+
+import { Search } from '../icons/search'
+import { DialogDemo } from './dialog'
+import { ProgressDemo } from './progress'
+
+const items = [
+  'https://picsum.photos/100/100?random=1',
+  'https://picsum.photos/100/100?random=2',
+  'https://picsum.photos/100/100?random=3',
+  'https://picsum.photos/100/100?random=4',
+  'https://picsum.photos/100/100?random=5',
+  'https://picsum.photos/100/100?random=6',
+]
+
+export function MultipleComponentDemo() {
+  return (
+    <Card>
+      <CardContent>
+        <div className="flex flex-col md:flex-row gap-5 items-center py-5 flex-wrap lg:flex-nowrap">
+          <Select>
+            <SelectTrigger className="w-max">
+              <SelectValue placeholder="Select a value" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="option1">Option 1</SelectItem>
+              <SelectItem value="option2">Option 2</SelectItem>
+            </SelectContent>
+          </Select>
+          <div className="flex -space-x-2">
+            <Avatar>
+              <AvatarImage src="/example-sebastian.jpeg" />
+              <AvatarFallback>AC</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage src="/example-gerzon.jpeg" />
+              <AvatarFallback>BC</AvatarFallback>
+            </Avatar>
+          </div>
+
+          <Badge>Badge</Badge>
+          <div className="w-full relative border rounded-medium">
+            <Input type="search" placeholder="Search..." border="none" />
+            <Search className="absolute top-2.5 right-4" />
+          </div>
+        </div>
+        <div className="flex flex-col md:flex-row items-center justify-center gap-5 space-y-3 py-5 flex-wrap lg:flex-nowrap">
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+          </div>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button outline="default">What is the music?</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Like a prayer - Maddona</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <DialogDemo />
+          <Button className="">Read more</Button>
+        </div>
+        <header className="py-5 flex flex-col gap-4">
+          <Slider defaultValue={[50]} max={100} step={1} />
+          <ProgressDemo />
+        </header>
+        <div className="pt-5 md:flex items-center justify-center hidden">
+          <Carousel
+            opts={{
+              align: 'start',
+            }}
+            className="w-full max-w-sm"
+          >
+            <CarouselContent>
+              {items.map((_, index) => (
+                <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+                  <div className="p-1">
+                    <Image src={_} width={100} height={100} alt="Isla bonitas" className="rounded-full" />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious>
+              <ArrowLeft />
+            </CarouselPrevious>
+            <CarouselNext>
+              <ArrowRight />
+            </CarouselNext>
+          </Carousel>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/docs/components/examples/progress.tsx b/docs/components/examples/progress.tsx
new file mode 100644
index 0000000..006c8a4
--- /dev/null
+++ b/docs/components/examples/progress.tsx
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+import { Progress } from '@openlite/ui'
+
+export function ProgressDemo() {
+  const [progress, setProgress] = useState(13)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/docs/components/examples/table.tsx b/docs/components/examples/table.tsx
new file mode 100644
index 0000000..0329fdb
--- /dev/null
+++ b/docs/components/examples/table.tsx
@@ -0,0 +1,50 @@
+import {
+  Card,
+  CardContent,
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@openlite/ui'
+
+export function TableDemo() {
+  return (
+    <Card>
+      <CardContent className="w-full">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead></TableHead>
+              <TableHead>Id</TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Title</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Role</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {[
+              { id: 1, name: 'Lindsay Walton', title: 'Front-end Developer', email: 'lindsay.walton@example.com', role: 'Member' },
+              { id: 2, name: 'Courtney Henry', title: 'Designer', email: 'courtney.henry@example.com', role: 'Admin' },
+              { id: 3, name: 'Tom Cook', title: 'Director of Product', email: 'tom.cook@example.com', role: 'Member' },
+              { id: 4, name: 'Whitney Francis', title: 'Copywriter', email: 'whitney.francis@example.com', role: 'Admin' },
+              { id: 5, name: 'Leonard Krasner', title: 'Senior Designer', email: 'leonard.krasner@example.com', role: 'Owner' },
+            ].map(person => (
+              <TableRow key={person.id}>
+                <TableCell><Checkbox checked={person.id === 2} /></TableCell>
+                <TableCell>{person.id}</TableCell>
+                <TableCell>{person.name}</TableCell>
+                <TableCell>{person.title}</TableCell>
+                <TableCell>{person.email}</TableCell>
+                <TableCell>{person.role}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/docs/components/header.tsx b/docs/components/header.tsx
index 72d71b5..9593d82 100644
--- a/docs/components/header.tsx
+++ b/docs/components/header.tsx
@@ -25,7 +25,7 @@ function LinkRepo({ classes }: { classes: string }) {
   return (
     <div className={classes}>
 
-      <Button asChild size="icon" outline="default">
+      <Button asChild size="icon" outline="default" className="hover:bg-default hover:text-default-foreground">
         <Link href="https://github.com/openlitedotdev/ui">
           <svg viewBox="0 0 438.549 438.549" className="size-4"><path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>
         </Link>
diff --git a/docs/components/icons/arrow-left.tsx b/docs/components/icons/arrow-left.tsx
new file mode 100644
index 0000000..19a3038
--- /dev/null
+++ b/docs/components/icons/arrow-left.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react'
+
+export function ArrowLeft(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.3rem" height="1.3rem" viewBox="0 0 24 24" {...props}><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15 6s-6 4.419-6 6s6 6 6 6" color="currentColor"></path></svg>
+  )
+}
diff --git a/docs/components/icons/arrow-right.tsx b/docs/components/icons/arrow-right.tsx
new file mode 100644
index 0000000..91ebcba
--- /dev/null
+++ b/docs/components/icons/arrow-right.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react'
+
+export function ArrowRight(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.3rem" height="1.3rem" viewBox="0 0 24 24" {...props}><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 6s6 4.419 6 6s-6 6-6 6" color="currentColor"></path></svg>
+  )
+}
diff --git a/docs/components/icons/arrow.tsx b/docs/components/icons/arrow.tsx
new file mode 100644
index 0000000..e640c77
--- /dev/null
+++ b/docs/components/icons/arrow.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react'
+
+export function Arrow(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24" {...props}><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M20 12H4m11 5s5-3.682 5-5s-5-5-5-5" color="currentColor"></path></svg>
+  )
+}
diff --git a/docs/components/icons/chat.tsx b/docs/components/icons/chat.tsx
new file mode 100644
index 0000000..10c1da9
--- /dev/null
+++ b/docs/components/icons/chat.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function Chat(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor">
+        <path d="M22 11.567c0 5.283-4.478 9.566-10 9.566q-.977.001-1.935-.178c-.459-.087-.688-.13-.848-.105c-.16.024-.388.145-.842.386a6.5 6.5 0 0 1-4.224.657a5.3 5.3 0 0 0 1.087-2.348c.1-.53-.148-1.045-.52-1.422C3.034 16.411 2 14.105 2 11.567C2 6.284 6.478 2 12 2q1.03.002 2 .191"></path>
+        <path d="M23 5.5a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0M11.996 12h.008m3.987 0H16m-8 0h.009"></path>
+      </g>
+    </svg>
+  )
+}
diff --git a/docs/components/icons/check.tsx b/docs/components/icons/check.tsx
new file mode 100644
index 0000000..d044e58
--- /dev/null
+++ b/docs/components/icons/check.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function Check(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24" {...props}>
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor">
+        <path d="M18.99 19H19m-.01 0c-.622.617-1.75.464-2.542.464c-.972 0-1.44.19-2.133.883C13.725 20.937 12.934 22 12 22s-1.725-1.063-2.315-1.653c-.694-.693-1.162-.883-2.133-.883c-.791 0-1.92.154-2.543-.464c-.627-.622-.473-1.756-.473-2.552c0-1.007-.22-1.47-.937-2.186C2.533 13.196 2 12.662 2 12s.533-1.196 1.6-2.262c.64-.64.936-1.274.936-2.186c0-.791-.154-1.92.464-2.543c.622-.627 1.756-.473 2.552-.473c.912 0 1.546-.297 2.186-.937C10.804 2.533 11.338 2 12 2s1.196.533 2.262 1.6c.64.64 1.274.936 2.186.936c.791 0 1.92-.154 2.543.464c.627.622.473 1.756.473 2.552c0 1.007.22 1.47.937 2.186C21.467 10.804 22 11.338 22 12s-.533 1.196-1.6 2.262c-.716.717-.936 1.18-.936 2.186c0 .796.154 1.93-.473 2.552"></path>
+        <path d="M9 12.893s1.2.652 1.8 1.607c0 0 1.8-3.75 4.2-5"></path>
+      </g>
+    </svg>
+  )
+}
diff --git a/docs/components/icons/copy.tsx b/docs/components/icons/copy.tsx
new file mode 100644
index 0000000..756a63e
--- /dev/null
+++ b/docs/components/icons/copy.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function Copy(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24" {...props}>
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor">
+        <path d="M9 15c0-2.828 0-4.243.879-5.121C10.757 9 12.172 9 15 9h1c2.828 0 4.243 0 5.121.879C22 10.757 22 12.172 22 15v1c0 2.828 0 4.243-.879 5.121C20.243 22 18.828 22 16 22h-1c-2.828 0-4.243 0-5.121-.879C9 20.243 9 18.828 9 16z"></path>
+        <path d="M17 9c-.003-2.957-.047-4.489-.908-5.538a4 4 0 0 0-.554-.554C14.43 2 12.788 2 9.5 2c-3.287 0-4.931 0-6.038.908a4 4 0 0 0-.554.554C2 4.57 2 6.212 2 9.5c0 3.287 0 4.931.908 6.038a4 4 0 0 0 .554.554c1.05.86 2.58.906 5.538.908"></path>
+      </g>
+    </svg>
+  )
+}
diff --git a/docs/components/icons/search.tsx b/docs/components/icons/search.tsx
new file mode 100644
index 0000000..0132d63
--- /dev/null
+++ b/docs/components/icons/search.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react'
+
+export function Search(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24" {...props}><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M17.5 17.5L22 22m-2-11a9 9 0 1 0-18 0a9 9 0 0 0 18 0" color="currentColor"></path></svg>
+  )
+}
diff --git a/docs/components/icons/terminal.tsx b/docs/components/icons/terminal.tsx
new file mode 100644
index 0000000..037a949
--- /dev/null
+++ b/docs/components/icons/terminal.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function Terminal(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24" {...props}>
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor">
+        <path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12m0-3h19M7 6h.009M11 6h.009"></path>
+        <path d="m16 13l1.227 1.057c.515.445.773.667.773.943s-.258.498-.773.943L16 17m-8-4l-1.227 1.057C6.258 14.502 6 14.724 6 15s.258.498.773.943L8 17m5-5l-2 6"></path>
+      </g>
+    </svg>
+  )
+}
diff --git a/docs/components/install-command.tsx b/docs/components/install-command.tsx
index 2866e74..3106ee4 100644
--- a/docs/components/install-command.tsx
+++ b/docs/components/install-command.tsx
@@ -1,8 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { Check, Copy, Terminal } from 'lucide-react'
 import { Button } from '@openlite/ui'
+import { Terminal } from './icons/terminal'
+import { Copy } from './icons/copy'
+import { Check } from './icons/check'
 
 export default function InstallCommand() {
   const [copied, setCopied] = useState(false)
@@ -17,7 +19,7 @@ export default function InstallCommand() {
   return (
     <div className="flex items-center space-x-2 border rounded-medium p-1 max-w-md">
       <pre className="flex items-center gap-2 flex-grow px-3 py-2">
-        <Terminal className="size-4 text-neutral-500" />
+        <Terminal className="text-neutral-500" />
         <code className="text-xs sm:text-sm text-neutral-500 dark:text-white">
           {installCommand}
         </code>
@@ -30,10 +32,10 @@ export default function InstallCommand() {
       >
         {copied
           ? (
-              <Check className="size-4 text-green-500" />
+              <Check className="text-green-500" />
             )
           : (
-              <Copy className="size-4" />
+              <Copy />
             )}
       </Button>
     </div>
diff --git a/docs/components/main.tsx b/docs/components/main.tsx
index cf16559..1aada97 100644
--- a/docs/components/main.tsx
+++ b/docs/components/main.tsx
@@ -1,11 +1,11 @@
 import { Hero } from './banners/hero'
-import Examples from './examples'
+import Demos from './demo'
 
 export default function Main() {
   return (
     <main className="min-h-screen">
       <Hero />
-      <Examples />
+      <Demos />
     </main>
   )
 }
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 74e58aa..4f3b0fd 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -6,6 +6,7 @@ const withMDX = createMDX()
 const config = {
   reactStrictMode: true,
   eslint: { ignoreDuringBuilds: true },
+  images: { remotePatterns: [{ protocol: 'https', hostname: 'picsum.photos' }] },
 }
 
 export default withMDX(config)
diff --git a/docs/public/example-gerzon.jpeg b/docs/public/example-gerzon.jpeg
new file mode 100644
index 0000000..d09307b
Binary files /dev/null and b/docs/public/example-gerzon.jpeg differ
diff --git a/src/components/forms/input/input.tsx b/src/components/forms/input/input.tsx
index bbc1996..15e1ed4 100644
--- a/src/components/forms/input/input.tsx
+++ b/src/components/forms/input/input.tsx
@@ -3,21 +3,17 @@ import { cn, input } from '@/tailwind'
 import type { VariantProps } from '@/tailwind'
 
 export interface Comp extends HTMLInputElement {}
-export interface Props extends React.InputHTMLAttributes<HTMLInputElement>,
-  VariantProps <typeof input> {
-  labelText?: string
-}
+export interface Props extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps <typeof input> {}
 
-const Input = React.forwardRef<Comp, Props>(({ className, rounded, icons, variant, labelText, type, ...props }, ref) => {
+const Input = React.forwardRef<Comp, Props>(({ className, rounded, border, type, ...props }, ref) => {
   return (
     <div className="relative flex flex-col-reverse">
       <input
         type={type}
-        className={cn(input({ variant, icons, rounded }), className)}
+        className={cn(input({ rounded, border }), className)}
         ref={ref}
         {...props}
       />
-      <label className="absolute top-0 -translate-y-1/2 left-4 pointer-events-none text-small backdrop-blur-sm px-1">{ labelText }</label>
     </div>
 
   )
diff --git a/src/components/forms/select/select-trigger.tsx b/src/components/forms/select/select-trigger.tsx
index c4eead7..c026f5b 100644
--- a/src/components/forms/select/select-trigger.tsx
+++ b/src/components/forms/select/select-trigger.tsx
@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<Comp, Props>(({ className, variant, child
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="foreground" fill="none">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.2rem" height="1.2rem" color="foreground" fill="none">
           <path d="M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
       </SelectPrimitive.Icon>
diff --git a/src/plugins/animations.ts b/src/plugins/animations.ts
index 061a22d..902a64e 100644
--- a/src/plugins/animations.ts
+++ b/src/plugins/animations.ts
@@ -1,7 +1,7 @@
 export const animations = {
   animation: {
     'pulse': 'pulse 1s ease-in-out',
-    'pop': 'pop 0.6s ease-out',
+    'pop-in': 'pop 0.6s ease-out',
     'pulse-fade-in': 'pulse-fade-in 0.3s ease-out',
     'dialog-in': 'dialog-in 0.3s ease-out',
     'dialog-out': 'dialog-out 0.3s ease-out',
diff --git a/src/plugins/components/button.ts b/src/plugins/components/button.ts
index 622d10d..68efa5b 100644
--- a/src/plugins/components/button.ts
+++ b/src/plugins/components/button.ts
@@ -25,7 +25,7 @@ export const button = cva(
       },
       outline: {
         none: 'border-0',
-        default: 'border boder-default bg-transparent text-foreground hover:text-default-foreground hover:bg-default',
+        default: 'border border-default-300 bg-transparent text-foreground hover:bg-default-200',
         primary: 'border border-primary bg-transparent text-foreground hover:text-primary-foreground hover:bg-primary',
         error: 'border border-error bg-transparent text-foreground hover:text-error-foreground hover:bg-error',
         success: 'border border-success bg-transparent text-foreground hover:text-success-foreground hover:bg-success',
diff --git a/src/plugins/components/dialog.ts b/src/plugins/components/dialog.ts
index 8cea6e4..775dedd 100644
--- a/src/plugins/components/dialog.ts
+++ b/src/plugins/components/dialog.ts
@@ -34,7 +34,7 @@ export const dialogPortal = cva('')
  *   // button elements
  * </DialogOverlay>
  */
-export const dialogOverlay = cva('fixed inset-0 z-50 bg-black/80  data-[state=open]:dialog-in data-[state=closed]:dialog-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0')
+export const dialogOverlay = cva('fixed inset-0 z-50 bg-default-200/50 data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out')
 
 /**
  * DialogClose wrapper **Class Variants** component
@@ -70,7 +70,7 @@ export const dialogTrigger = cva('')
  *   // button elements
  * </DialogContent>
  */
-export const dialogContent = cva('fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%] w-full max-w-lg p-6 shadow-medium rounded-medium bg-default duration-200')
+export const dialogContent = cva('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out sm:rounded-lg')
 
 /**
  * DialogHeader wrapper **Class Variants** component
@@ -106,7 +106,7 @@ export const dialogFooter = cva('flex flex-col-reverse sm:flex-row sm:justify-en
  *   // button elements
  * </DialogTitle>
  */
-export const dialogTitle = cva('text-large font-medium leading-none tracking-tight')
+export const dialogTitle = cva('text-large font-medium leading-none tracking-tight text-foreground')
 
 /**
  * DialogDescription wrapper **Class Variants** component
diff --git a/src/plugins/components/input.ts b/src/plugins/components/input.ts
index 4f5ad69..d9405c3 100644
--- a/src/plugins/components/input.ts
+++ b/src/plugins/components/input.ts
@@ -8,31 +8,24 @@ import { cva } from 'class-variance-authority'
  * @example
  * <Input className={styles())} />
  */
-export const input = cva('h-10 w-full transition-colors rounded-medium border-2 bg-transparent px-4 py-2 text-medium ring-offset-background file:border-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0', {
+export const input = cva('h-10 w-full transition-colors bg-transparent px-4 py-2 text-medium ring-offset-background file:border-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0', {
   variants: {
-    variant: {
-      default: 'border-default/30 focus-visible:border-default transition-border durations-500',
-      primary: 'border-primary/30 focus-visible:border-primary transition-border durations-500',
-      success: 'border-success/30 focus-visible:border-success transition-border durations-500',
-      warn: 'border-warn/30 focus-visible:border-warn transition-border durations-500',
-      error: 'border-error/30 focus-visible:border-error transition-border durations-500',
-    },
-    icons: {
-      none: '',
-      left: 'pl-10',
-      right: 'pr-10',
-      both: 'px-10',
-    },
     rounded: {
       none: 'rounded-none',
-      small: 'rounded-small',
-      medium: 'rounded-medium',
-      large: 'rounded-large',
+      sm: 'rounded-small',
+      md: 'rounded-medium',
+      lg: 'rounded-large',
+    },
+
+    border: {
+      none: 'border-none',
+      sm: 'border',
+      md: 'border-2',
+      lg: 'border-4',
     },
   },
   defaultVariants: {
-    variant: 'default',
-    icons: 'none',
-    rounded: 'none',
+    rounded: 'md',
+    border: 'sm',
   },
 })
diff --git a/src/plugins/components/progress.ts b/src/plugins/components/progress.ts
index 148b87d..1a7f0b3 100644
--- a/src/plugins/components/progress.ts
+++ b/src/plugins/components/progress.ts
@@ -11,7 +11,7 @@ import { cva } from 'class-variance-authority'
  * </Progress>
  */
 
-export const progress = cva('relative bg-default w-96 overflow-hidden rounded-full', {
+export const progress = cva('relative bg-default-300 md:min-w-96 overflow-hidden rounded-full', {
   variants: {
     size: {
       sm: 'h-2',
@@ -37,6 +37,7 @@ export const progress = cva('relative bg-default w-96 overflow-hidden rounded-fu
 export const progressIndicator = cva('h-full relative w-full flex-1 transition-all rounded-full', {
   variants: {
     variant: {
+      default: 'bg-default',
       primary: 'bg-primary',
       success: 'bg-success',
       warn: 'bg-warn',
@@ -44,6 +45,6 @@ export const progressIndicator = cva('h-full relative w-full flex-1 transition-a
     },
   },
   defaultVariants: {
-    variant: 'primary',
+    variant: 'default',
   },
 })
diff --git a/src/plugins/components/select.ts b/src/plugins/components/select.ts
index 6a7026a..c7e6202 100644
--- a/src/plugins/components/select.ts
+++ b/src/plugins/components/select.ts
@@ -46,7 +46,7 @@ export const selectValue = cva('')
  *   // SelectTrigger elements
  * </SelectTrigger>
  */
-export const selectTrigger = cva('flex relative h-10 w-64 items-center justify-between rounded-medium px-3 py-2 text-small ring-offset-transparent focus:outline-none focus:ring-2 focus:ring-transparent focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', {
+export const selectTrigger = cva('flex relative w-96 items-center justify-between rounded-medium px-3 py-2 text-small ring-offset-transparent focus:outline-none focus:ring-2 focus:ring-transparent focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', {
   variants: {
     variant: {
       none: 'border-none',
diff --git a/src/plugins/components/skeleton.ts b/src/plugins/components/skeleton.ts
index a9c9287..fc02a62 100644
--- a/src/plugins/components/skeleton.ts
+++ b/src/plugins/components/skeleton.ts
@@ -10,7 +10,7 @@ import { cva } from 'class-variance-authority'
  *   // Skeleton elements
  * </Skeleton>
  */
-export const skeleton = cva('animate-pulse-infinite bg-default', {
+export const skeleton = cva('animate-pulse bg-default-300', {
   variants: {
     rounded: {
       none: 'rounded-none',
diff --git a/src/plugins/components/table.ts b/src/plugins/components/table.ts
index ea89b21..89fbe15 100644
--- a/src/plugins/components/table.ts
+++ b/src/plugins/components/table.ts
@@ -22,7 +22,7 @@ export const table = cva('w-full caption-bottom text-small rounded-lg overflow-h
  *   // TableHeader elements
  * </tableHeader>
  */
-export const tableHeader = cva('[&_tr]:border-b [&_tr]:border-default')
+export const tableHeader = cva('[&_tr]:border-b')
 
 /**
  * Table wrapper **Class Variants** component
@@ -46,7 +46,7 @@ export const tableBody = cva('&_tr:last-child]:border-0')
  *   // TableFooter elements
  * </TableFooter>
  */
-export const tableFooter = cva('border-t bg-default/50 font-medium [&>tr]:last:border-b-0')
+export const tableFooter = cva('border-t font-medium [&>tr]:last:border-b-0')
 
 /**
  * Table wrapper **Class Variants** component
@@ -58,7 +58,7 @@ export const tableFooter = cva('border-t bg-default/50 font-medium [&>tr]:last:b
  *   // TableRow elements
  * </TableRow>
  */
-export const tableRow = cva('border-b transition-colors hover:bg-default/30 border-b-default')
+export const tableRow = cva('border-b transition-colors hover:bg-default-100')
 
 /**
  * Table wrapper **Class Variants** component
@@ -70,7 +70,7 @@ export const tableRow = cva('border-b transition-colors hover:bg-default/30 bord
  *   // TableHead elements
  * </TableHead>
  */
-export const tableHead = cva('h-12 px-4 text-left align-middle font-medium text-default-foreground [&:has([role=checkbox])]:pr-0')
+export const tableHead = cva('h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0')
 
 /**
  * Table wrapper **Class Variants** component
@@ -94,4 +94,4 @@ export const tableCell = cva('p-4 align-middle [&:has([role=checkbox])]:pr-0')
  *   // TableCaption elements
  * </TableCaption>
  */
-export const tableCaption = cva('mt-4 text-sm text-default-foreground')
+export const tableCaption = cva('mt-4 text-small text-default-foreground')
diff --git a/src/plugins/components/tooltip.ts b/src/plugins/components/tooltip.ts
index 362fd53..33c651a 100644
--- a/src/plugins/components/tooltip.ts
+++ b/src/plugins/components/tooltip.ts
@@ -22,7 +22,7 @@ export const tooltip = cva('')
  *   // Tooltip elements
  * </TooltipTrigger>
  */
-export const tooltipTrigger = cva('px-2 py-1 text-white hover:animate-pop')
+export const tooltipTrigger = cva('px-2 py-1 hover:animate-pop-in text-foreground')
 
 /**
  * Tooltip wrapper **Class Variants** component
@@ -45,4 +45,4 @@ export const tooltipProvider = cva('')
  *   // Tooltip elements
  * </TooltipContent>
  */
-export const tooltipContent = cva('z-50 w-fit max-w-72 px-2 py-1 !text-foreground bg-background border border-default rounded-medium text-small shadow-small animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2')
+export const tooltipContent = cva('z-50 w-fit max-w-72 px-2 py-1 bg-background border rounded-medium text-small')