diff --git a/app/(docs)/docs/layout.tsx b/app/(docs)/docs/layout.tsx
index 7a1e651..6a4b4bd 100644
--- a/app/(docs)/docs/layout.tsx
+++ b/app/(docs)/docs/layout.tsx
@@ -15,7 +15,7 @@ export default function ComponentLayout({
       <div className="hidden lg:block">
         <SideNav />
       </div>
-      <div className="lg:ml-72 mt-16">{children}</div>
+      <div className="lg:ml-72 mt-16 px-4 lg:px-0">{children}</div>
     </div>
   );
 }
diff --git a/app/(sink)/demo/components/page.tsx b/app/(sink)/demo/components/page.tsx
index 3781e6e..c0d11e9 100644
--- a/app/(sink)/demo/components/page.tsx
+++ b/app/(sink)/demo/components/page.tsx
@@ -2,6 +2,7 @@
 
 import {
   Accordion,
+  Alert,
   Avatar,
   Badge,
   Button,
@@ -12,6 +13,7 @@ import {
   TabsTriggerList,
 } from "@/packages/ui";
 import { Card } from "@/packages/ui/Cards/Card";
+import { Check, CheckCircle, CheckCircle2 } from "lucide-react";
 import React from "react";
 
 export default function page() {
@@ -76,12 +78,28 @@ export default function page() {
             <Card.Description>Card Description</Card.Description>
           </Card.Header>
         </Card>
-        <Accordion type="single" collapsible>
-          <Accordion.Item value="item-1">
-            <Accordion.Header>Head...</Accordion.Header>
-            <Accordion.Content>Content...</Accordion.Content>
-          </Accordion.Item>
-        </Accordion>
+      </div>
+
+      <div className="space-y-6">
+        <Alert>
+          <Alert.Title>Heads up!</Alert.Title>
+          <Alert.Description>
+            You can add components to your app using the cli.
+          </Alert.Description>
+        </Alert>
+
+        <Alert variant="solid">
+          <Alert.Title>Heads up!</Alert.Title>
+          <Alert.Description>
+            You can add components to your app using the cli.
+          </Alert.Description>
+        </Alert>
+        <Alert variant="solid" className="flex items-center">
+          <CheckCircle className="h-4 w-4 mr-4" />
+          <div>
+            <Alert.Title>Heads up!</Alert.Title>
+          </div>
+        </Alert>
       </div>
     </div>
   );
diff --git a/components/HamburgerMenu.tsx b/components/HamburgerMenu.tsx
index 910299c..7616d38 100644
--- a/components/HamburgerMenu.tsx
+++ b/components/HamburgerMenu.tsx
@@ -7,22 +7,29 @@ import { Button } from "@/packages/ui";
 
 export default function HamburgerMenu() {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div>
       <Button
         size="sm"
         variant="outline"
+        className="p-2"
         onClick={() => setIsOpen((prev) => !prev)}
-        className="z-50 absolute top-3 left-2 mb-3"
       >
-        {isOpen ? <X /> : <AlignJustify />}
+        {isOpen ? (
+          <X className="h-4 w-4" />
+        ) : (
+          <AlignJustify className="h-4 w-4" />
+        )}
       </Button>
-      
+
       {isOpen && (
-        <div className="absolute top-0 z-30 w-full h-screen bg-black opacity-50" onClick={() => setIsOpen(false)} />
+        <div
+          className="absolute top-0 left-0 right-0 w-full h-screen bg-black opacity-50"
+          onClick={() => setIsOpen(false)}
+        />
       )}
-      
+
       {isOpen && (
         <div className="absolute top-0 left-0 z-40">
           <SideNav />
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
index dafc2e9..3a44db0 100644
--- a/components/TopNav.tsx
+++ b/components/TopNav.tsx
@@ -11,13 +11,7 @@ export default function TopNav() {
     <nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
       <div className="container max-w-6xl px-4 lg:px-0 mx-auto">
         <div className="flex justify-between items-center h-16">
-          
           {/* Logo Section */}
-
-          
-          <div className="flex items-center  lg:hidden"> 
-            <HamburgerMenu />
-          </div>
           <div className="flex-shrink-0">
             <a
               href="/"
@@ -54,8 +48,10 @@ export default function TopNav() {
               rel="noopener noreferrer"
             >
               <GithubIcon />
-            </Link> 
+            </Link>
+            <HamburgerMenu />
           </div>
+
           <div className="hidden lg:flex items-center">
             <Link
               href="https://github.com/Logging-Stuff/retroui"
diff --git a/config/components.ts b/config/components.ts
index 2cd10eb..031c108 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -6,6 +6,10 @@ export const componentConfig = {
       name: "accordion",
       filePath: "packages/ui/Accordions/Accordion.tsx",
     },
+    alert: {
+      name: "alert",
+      filePath: "packages/ui/Alerts/Alert.tsx",
+    },
     avatar: {
       name: "avatar",
       filePath: "packages/ui/Avatars/Avatar.tsx",
@@ -31,6 +35,28 @@ export const componentConfig = {
         () => import("@/preview/components/accordion-style-default")
       ),
     },
+    "alert-style-default": {
+      name: "alert-style-default",
+      filePath: "preview/components/alert-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/alert-style-default")),
+    },
+    "alert-style-solid": {
+      name: "alert-style-solid",
+      filePath: "preview/components/alert-style-solid.tsx",
+      preview: lazy(() => import("@/preview/components/alert-style-solid")),
+    },
+    "alert-style-with-icon": {
+      name: "alert-style-with-icon",
+      filePath: "preview/components/alert-style-with-icon.tsx",
+      preview: lazy(() => import("@/preview/components/alert-style-with-icon")),
+    },
+    "alert-style-all-status": {
+      name: "alert-style-all-status",
+      filePath: "preview/components/alert-style-all-status.tsx",
+      preview: lazy(
+        () => import("@/preview/components/alert-style-all-status")
+      ),
+    },
     "avatar-style-circle": {
       name: "avatar-style-circle",
       filePath: "preview/components/avatar-style-circle.tsx",
diff --git a/config/navigation.ts b/config/navigation.ts
index e8cd3ac..d40ede8 100644
--- a/config/navigation.ts
+++ b/config/navigation.ts
@@ -17,6 +17,7 @@ export const navConfig: INavigationConfig = {
       title: "Components",
       children: [
         { title: "Accordion", href: `${componentsRoute}/accordion` },
+        { title: "Alert", href: `${componentsRoute}/alert` },
         { title: "Avatar", href: `${componentsRoute}/avatar` },
         { title: "Badge", href: `${componentsRoute}/badge` },
         { title: "Button", href: `${componentsRoute}/button` },
diff --git a/content/docs/components/alert.mdx b/content/docs/components/alert.mdx
new file mode 100644
index 0000000..bd6b3f3
--- /dev/null
+++ b/content/docs/components/alert.mdx
@@ -0,0 +1,50 @@
+---
+title: Alert
+description: Notify your users about important events and updates. 📣
+lastUpdated: 24 Oct, 2024
+---
+
+<ComponentShowcase name="alert-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install class-variance-authority
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="alert" />
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="alert-style-default" />
+<br />
+<br />
+
+### Solid
+
+<ComponentShowcase name="alert-style-solid" />
+<br />
+<br />
+
+### With Icon
+
+<ComponentShowcase name="alert-style-with-icon" />
+<br />
+<br />
+
+### Status
+
+<ComponentShowcase name="alert-style-all-status" />
diff --git a/packages/ui/Alerts/Alert.tsx b/packages/ui/Alerts/Alert.tsx
new file mode 100644
index 0000000..1c4c1d6
--- /dev/null
+++ b/packages/ui/Alerts/Alert.tsx
@@ -0,0 +1,59 @@
+import { HtmlHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Text } from "../Text";
+
+const alertVariants = cva("relative w-full border-2 border-black p-4", {
+  variants: {
+    variant: {
+      default: "bg-primary-300 text-foreground",
+      solid: "bg-black text-white",
+      destructive:
+        "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+    },
+    status: {
+      error: "bg-red-300 text-red-800 border-red-800",
+      success: "bg-green-300 text-green-800 border-green-800",
+      warning: "bg-yellow-300 text-yellow-800 border-yellow-800",
+      info: "bg-blue-300 text-blue-800 border-blue-800",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+interface IAlertProps
+  extends HtmlHTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {}
+
+const Alert = ({ className, variant, status, ...props }: IAlertProps) => (
+  <div
+    role="alert"
+    className={cn(alertVariants({ variant, status }), className)}
+    {...props}
+  />
+);
+Alert.displayName = "Alert";
+
+interface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}
+const AlertTitle = ({ className, ...props }: IAlertTitleProps) => (
+  <Text as="h5" className={cn(className)} {...props} />
+);
+AlertTitle.displayName = "AlertTitle";
+
+interface IAlertDescriptionProps
+  extends HtmlHTMLAttributes<HTMLParagraphElement> {}
+const AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (
+  <div className={cn("text-muted", className)} {...props} />
+);
+
+AlertDescription.displayName = "AlertDescription";
+
+const AlertComponent = Object.assign(Alert, {
+  Title: AlertTitle,
+  Description: AlertDescription,
+});
+
+export { AlertComponent as Alert };
diff --git a/packages/ui/Alerts/index.ts b/packages/ui/Alerts/index.ts
new file mode 100644
index 0000000..b8e17a0
--- /dev/null
+++ b/packages/ui/Alerts/index.ts
@@ -0,0 +1 @@
+export * from "./Alert";
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 47bbd77..ad7e609 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -2,6 +2,7 @@ export * from "./Buttons";
 export * from "./Form";
 export * from "./Text";
 export * from "./Accordions";
+export * from "./Alerts";
 export * from "./Cards";
 export * from "./Avatars";
 export * from "./Badges";
diff --git a/preview/components/alert-style-all-status.tsx b/preview/components/alert-style-all-status.tsx
new file mode 100644
index 0000000..fe25394
--- /dev/null
+++ b/preview/components/alert-style-all-status.tsx
@@ -0,0 +1,25 @@
+import { Alert } from "@/packages/ui";
+import { CheckCircle, InfoIcon, XIcon } from "lucide-react";
+
+export default function AlertAllStatus() {
+  return (
+    <div className="space-y-4">
+      <Alert status="success" className="flex items-center">
+        <CheckCircle className="h-4 w-4 mr-4" />
+        <Alert.Title>This is a success alert!</Alert.Title>
+      </Alert>
+      <Alert status="info" className="flex items-center">
+        <InfoIcon className="h-4 w-4 mr-4" />
+        <Alert.Title>This is an info alert!</Alert.Title>
+      </Alert>
+      <Alert status="error" className="flex items-center">
+        <XIcon className="h-4 w-4 mr-4" />
+        <Alert.Title>This is an error alert!</Alert.Title>
+      </Alert>
+      <Alert status="warning" className="flex items-center">
+        <InfoIcon className="h-4 w-4 mr-4" />
+        <Alert.Title>This is an error alert!</Alert.Title>
+      </Alert>
+    </div>
+  );
+}
diff --git a/preview/components/alert-style-default.tsx b/preview/components/alert-style-default.tsx
new file mode 100644
index 0000000..5cb12b5
--- /dev/null
+++ b/preview/components/alert-style-default.tsx
@@ -0,0 +1,12 @@
+import { Alert } from "@/packages/ui";
+
+export default function AlertStyleDefault() {
+  return (
+    <Alert>
+      <Alert.Title>Heads up!</Alert.Title>
+      <Alert.Description>
+        This is where you can write description that no one reads...
+      </Alert.Description>
+    </Alert>
+  );
+}
diff --git a/preview/components/alert-style-solid.tsx b/preview/components/alert-style-solid.tsx
new file mode 100644
index 0000000..fd4239a
--- /dev/null
+++ b/preview/components/alert-style-solid.tsx
@@ -0,0 +1,12 @@
+import { Alert } from "@/packages/ui";
+
+export default function AlertStyleDefault() {
+  return (
+    <Alert variant="solid">
+      <Alert.Title>Heads up!</Alert.Title>
+      <Alert.Description>
+        This is where you can write description that no one reads...
+      </Alert.Description>
+    </Alert>
+  );
+}
diff --git a/preview/components/alert-style-with-icon.tsx b/preview/components/alert-style-with-icon.tsx
new file mode 100644
index 0000000..7172a93
--- /dev/null
+++ b/preview/components/alert-style-with-icon.tsx
@@ -0,0 +1,16 @@
+import { Alert } from "@/packages/ui";
+import { CheckCircle } from "lucide-react";
+
+export default function AlertStyleDefault() {
+  return (
+    <Alert className="flex">
+      <CheckCircle className="h-5 w-5 mr-4 mt-2" />
+      <div>
+        <Alert.Title>Heads up!</Alert.Title>
+        <Alert.Description>
+          This is where you can write description that no one reads...
+        </Alert.Description>
+      </div>
+    </Alert>
+  );
+}