diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 0a9b785..29a5954 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -24,8 +24,8 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.0.7 ./
-          docker push devarifhossain/retroui:1.0.7
+          docker build -t devarifhossain/retroui:1.0.8 ./
+          docker push devarifhossain/retroui:1.0.8
     
       - name: Set up SSH
         uses: webfactory/ssh-agent@v0.9.0
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index 1d44b31..66a510d 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -8,6 +8,7 @@ import {
   Textarea,
 } from "@/packages/ui";
 import AccordionStyleDefault from "@/preview/components/accordion-style-default";
+import AvatarStyleCircleSizes from "@/preview/components/avatar-style-circle-sizes";
 import BadgeStyleVariants from "@/preview/components/badge-style-variants";
 import { GithubIcon, MessageCircle } from "lucide-react";
 import Image from "next/image";
@@ -64,10 +65,13 @@ export default function Home() {
           Our components look both old school and modern! ✨
         </Text>
 
-        <div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
+        <div className="grid gap-8 grid-cols-1 lg:grid-cols-2 mb-8">
           <div className="space-y-4">
             <Text as="h4">Button</Text>
-            <Button>Click Me</Button>
+            <div className="flex space-x-4">
+              <Button>Click Me</Button>
+              <Button variant="outline">Click Me</Button>
+            </div>
           </div>
           <div className="space-y-4">
             <Text as="h4">Badge</Text>
@@ -77,22 +81,20 @@ export default function Home() {
           </div>
           <div className="space-y-4">
             <Text as="h4">Avatar</Text>
-            <Avatar />
+            <AvatarStyleCircleSizes />
+          </div>
+          <div className="space-y-4">
+            <Text as="h4">Basic Card</Text>
+            <BasicCard />
           </div>
           <div className="space-y-4">
             <Text as="h4">Input</Text>
             <Input />
           </div>
-        </div>
-        <div className="grid gap-8 grid-cols-1 lg:grid-cols-3">
           <div className="space-y-4">
             <Text as="h4">Textarea</Text>
             <Textarea />
           </div>
-          <div className="space-y-4">
-            <Text as="h4">Basic Card</Text>
-            <BasicCard />
-          </div>
           <div className="space-y-4">
             <Text as="h4">Accordion</Text>
             <AccordionStyleDefault />
diff --git a/app/(sink)/demo/components/page.tsx b/app/(sink)/demo/components/page.tsx
index dbaaa0a..9166907 100644
--- a/app/(sink)/demo/components/page.tsx
+++ b/app/(sink)/demo/components/page.tsx
@@ -6,6 +6,7 @@ import {
   Avatar,
   Badge,
   Button,
+  Menu,
   Tabs,
   TabsContent,
   TabsPanels,
@@ -99,6 +100,21 @@ export default function page() {
           </div>
         </Alert>
       </div>
+
+      <div>
+        <Menu>
+          <Menu.Trigger asChild>
+            <Button>Menu</Button>
+          </Menu.Trigger>
+          <Menu.Content className="min-w-36">
+            <Menu.Item>Menu Item 1</Menu.Item>
+            <Menu.Item>Menu Item 2</Menu.Item>
+            <Menu.Item>Menu Item 3</Menu.Item>
+          </Menu.Content>
+        </Menu>
+      </div>
+
+      <div className="h-36"></div>
     </div>
   );
 }
diff --git a/config/components.ts b/config/components.ts
index 475c616..f55a60d 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -26,14 +26,19 @@ export const componentConfig = {
       name: "card",
       filePath: "packages/ui/Cards/Card.tsx",
     },
-    text: {
-      name: "text",
-      filePath: "packages/ui/Text/Text.tsx",
-    },
+
     dialog: {
       name: "dialog",
       filePath: "packages/ui/Dialog/Dialog.tsx",
     },
+    menu: {
+      name: "menu",
+      filePath: "packages/ui/Menu/Menu.tsx",
+    },
+    text: {
+      name: "text",
+      filePath: "packages/ui/Text/Text.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -134,6 +139,11 @@ export const componentConfig = {
       filePath: "preview/components/input-style-default.tsx",
       preview: lazy(() => import("@/preview/components/input-style-default")),
     },
+    "menu-style-default": {
+      name: "menu-style-default",
+      filePath: "preview/components/menu-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/menu-style-default")),
+    },
     "textarea-style-default": {
       name: "textarea-style-default",
       filePath: "preview/components/textarea-style-default.tsx",
diff --git a/config/navigation.ts b/config/navigation.ts
index 8591864..c3e9425 100644
--- a/config/navigation.ts
+++ b/config/navigation.ts
@@ -22,11 +22,12 @@ export const navConfig: INavigationConfig = {
         { title: "Badge", href: `${componentsRoute}/badge` },
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
+        { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
+        { title: "Menu", href: `${componentsRoute}/menu` },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },
-        { title: "Dialog", href: `${componentsRoute}/dialog` },
       ],
     },
     {
diff --git a/content/docs/components/menu.mdx b/content/docs/components/menu.mdx
new file mode 100644
index 0000000..71e3e2b
--- /dev/null
+++ b/content/docs/components/menu.mdx
@@ -0,0 +1,35 @@
+---
+title: Menu
+description: Show your users a list of actions they can take. 📋
+lastUpdated: 19 Oct, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Menu/Menu.tsx
+---
+
+<ComponentShowcase name="menu-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-dropdown-menu
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="menu" />
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="menu-style-default" />
diff --git a/infra/docker-compose.prod.yml b/infra/docker-compose.prod.yml
index 0bbaa8f..068aaca 100644
--- a/infra/docker-compose.prod.yml
+++ b/infra/docker-compose.prod.yml
@@ -1,6 +1,6 @@
 services:
   web:
-    image: devarifhossain/retroui:1.0.7
+    image: devarifhossain/retroui:1.0.8
     container_name: retroui
     expose:
       - "3000"
diff --git a/package.json b/package.json
index ec926f7..a64cc8c 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/packages/ui/Buttons/Button.tsx b/packages/ui/Buttons/Button.tsx
index 924b767..2ac1fe1 100644
--- a/packages/ui/Buttons/Button.tsx
+++ b/packages/ui/Buttons/Button.tsx
@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import React, { ButtonHTMLAttributes } from "react";
 
-const buttonVariants = cva("font-head transition-all", {
+const buttonVariants = cva("font-head transition-all outline-none", {
   variants: {
     variant: {
       default:
@@ -39,6 +39,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
     forwardedRef
   ) => (
     <button
+      ref={forwardedRef}
       className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     >
diff --git a/packages/ui/Cards/Card.tsx b/packages/ui/Cards/Card.tsx
index 19fa9f1..a2f9f33 100644
--- a/packages/ui/Cards/Card.tsx
+++ b/packages/ui/Cards/Card.tsx
@@ -1,7 +1,6 @@
 import { cn } from "@/lib/utils";
 import { HTMLAttributes } from "react";
 import { Text } from "../Text";
-import { Content } from "next/font/google";
 
 interface ICardProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
diff --git a/packages/ui/Menu/Menu.tsx b/packages/ui/Menu/Menu.tsx
new file mode 100644
index 0000000..8240a0c
--- /dev/null
+++ b/packages/ui/Menu/Menu.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import React, { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+
+const Menu = DropdownMenu.Root;
+const Trigger = DropdownMenu.Trigger;
+
+interface IMenuContent
+  extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {}
+
+const Content = ({ className, ...props }: IMenuContent) => (
+  <DropdownMenu.Portal>
+    <DropdownMenu.Content
+      side="bottom"
+      align="start"
+      className={cn(
+        "bg-white border-2 border-black shadow-md absolute top-2 min-w-20",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenu.Portal>
+);
+
+const MenuItem = React.forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof DropdownMenu.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenu.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary-400 hover:text-white focus:bg-primary-400 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+MenuItem.displayName = "MenuItem";
+
+const MenuComponent = Object.assign(Menu, {
+  Trigger,
+  Content,
+  Item: MenuItem,
+});
+
+export { MenuComponent as Menu };
diff --git a/packages/ui/Menu/index.ts b/packages/ui/Menu/index.ts
new file mode 100644
index 0000000..d56d2d6
--- /dev/null
+++ b/packages/ui/Menu/index.ts
@@ -0,0 +1 @@
+export * from "./Menu";
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index af6798d..4ff726e 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -8,3 +8,4 @@ export * from "./Avatars";
 export * from "./Badges";
 export * from "./Tabs";
 export * from "./Dialog";
+export * from "./Menu";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 450f6e4..ec056b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@radix-ui/react-dialog':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.2
+        version: 2.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-visually-hidden':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -651,6 +654,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-arrow@1.1.0':
+    resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-avatar@1.1.1':
     resolution: {integrity: sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==}
     peerDependencies:
@@ -752,6 +768,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dropdown-menu@2.1.2':
+    resolution: {integrity: sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.1':
     resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
     peerDependencies:
@@ -783,6 +812,32 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-menu@2.1.2':
+    resolution: {integrity: sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.0':
+    resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.2':
     resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
     peerDependencies:
@@ -822,6 +877,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.0':
+    resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.1.0':
     resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
     peerDependencies:
@@ -867,6 +935,24 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-visually-hidden@1.1.0':
     resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
     peerDependencies:
@@ -880,6 +966,9 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
   '@react-aria/focus@3.18.4':
     resolution: {integrity: sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==}
     peerDependencies:
@@ -3667,6 +3756,15 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-avatar@1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0)
@@ -3766,6 +3864,21 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-dropdown-menu@2.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-menu': 2.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-focus-guards@1.1.1(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       react: 18.0.0
@@ -3790,6 +3903,50 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-menu@2.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      aria-hidden: 1.2.4
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      react-remove-scroll: 2.6.0(@types/react@18.0.0)(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-popper@1.2.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-arrow': 1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/rect': 1.1.0
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-portal@1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -3819,6 +3976,23 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-slot@1.1.0(@types/react@18.0.0)(react@18.0.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0)
@@ -3852,6 +4026,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.0
 
+  '@radix-ui/react-use-rect@1.1.0(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
   '@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -3861,6 +4049,8 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/rect@1.1.0': {}
+
   '@react-aria/focus@3.18.4(react@18.0.0)':
     dependencies:
       '@react-aria/interactions': 3.22.4(react@18.0.0)
diff --git a/preview/components/avatar-style-circle-sizes.tsx b/preview/components/avatar-style-circle-sizes.tsx
index 920efb3..9b4001f 100644
--- a/preview/components/avatar-style-circle-sizes.tsx
+++ b/preview/components/avatar-style-circle-sizes.tsx
@@ -1,6 +1,6 @@
 import { Avatar } from "@/packages/ui";
 
-export default function AvatarStyleCircle() {
+export default function AvatarStyleCircleSizes() {
   return (
     <div className="flex items-center space-x-4">
       <Avatar>
diff --git a/preview/components/menu-style-default.tsx b/preview/components/menu-style-default.tsx
new file mode 100644
index 0000000..97f63f1
--- /dev/null
+++ b/preview/components/menu-style-default.tsx
@@ -0,0 +1,16 @@
+import { Button, Menu } from "@/packages/ui";
+
+export default function MenuDefault() {
+  return (
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button>Menu</Button>
+      </Menu.Trigger>
+      <Menu.Content className="min-w-36">
+        <Menu.Item>Menu Item 1</Menu.Item>
+        <Menu.Item>Menu Item 2</Menu.Item>
+        <Menu.Item>Menu Item 3</Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}