diff --git a/.changeset/sixty-ties-knock.md b/.changeset/sixty-ties-knock.md
new file mode 100644
index 0000000000..e8046181a1
--- /dev/null
+++ b/.changeset/sixty-ties-knock.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/alert": patch
+"@nextui-org/theme": patch
+---
+
+Alert compoentn styles improved
diff --git a/apps/docs/content/components/alert/custom-styles.ts b/apps/docs/content/components/alert/custom-styles.ts
index 5a9aeb1af0..437c8f35ee 100644
--- a/apps/docs/content/components/alert/custom-styles.ts
+++ b/apps/docs/content/components/alert/custom-styles.ts
@@ -1,60 +1,190 @@
-const App = `import {Alert, Button} from "@nextui-org/react";
+const AppTs = `import {Alert, Button} from "@nextui-org/react";
+
+const CustomAlert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return "before:bg-default-200";
+      }
+    }, []);
+
+    return (
+      <Alert
+        ref={ref}
+        classNames={{
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames?.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames?.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
+        }}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
 
 export default function App() {
-  const [isVisible, setIsVisible] = React.useState(true);
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
 
   return (
-    <div className="flex items-center justify-center w-full">
-      {!isVisible && (
-        <Button
-          className="bg-background text-default-700 font-medium border-1 shadow-small"
-          size="sm"
-          variant="bordered"
-          onPress={() => setIsVisible(true)}
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
         >
-          Show Alert
-        </Button>
-      )}
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+}`;
+
+const App = `import {Alert, Button} from "@nextui-org/react";
+
+const CustomAlert = React.forwardRef(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return "before:bg-default-200";
+      }
+    }, []);
+
+    return (
       <Alert
+        ref={ref}
         classNames={{
-          base: [
-            "bg-default-50 dark:bg-background",
-            "relative before:content-[''] before:absolute before:z-10",
-            "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1 before:bg-secondary",
-            "rounded-l-none border-l-0",
-          ],
-          mainWrapper: "pt-1",
-          iconWrapper: "border-1 border-secondary-200 dark:bg-transparent",
-          alertIcon: "text-secondary",
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames.iconWrapper),
         }}
-        isVisible={isVisible}
-        title="The documents you requested are ready to be viewed"
-        variant="faded"
-        onClose={() => setIsVisible(false)}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
       >
-        <div className="flex items-center gap-1 mt-3">
-          <Button
-            className="bg-background text-default-700 font-medium border-1 shadow-small"
-            size="sm"
-            variant="bordered"
-          >
-            View documents
-          </Button>
-          <Button
-            className="text-default-500 font-medium underline underline-offset-4"
-            size="sm"
-            variant="light"
-          >
-            Maybe later
-          </Button>
-        </div>
+        {children}
       </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
     </div>
   );
 }`;
 
 const react = {
   "/App.jsx": App,
+  "/App.tsx": AppTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/alert/variants.ts b/apps/docs/content/components/alert/variants.ts
index 48f57385c7..07238ee96f 100644
--- a/apps/docs/content/components/alert/variants.ts
+++ b/apps/docs/content/components/alert/variants.ts
@@ -4,7 +4,7 @@ export default function App() {
   return (
     <div className="flex flex-col gap-4 w-full">
       {["solid", "bordered", "flat", "faded"].map((variant) => (
-        <Alert key={variant} variant={variant} color="danger" title={\`This is a \${variant} variant alert\`}/>
+        <Alert key={variant} variant={variant} color="secondary" title={\`This is a \${variant} variant alert\`}/>
       ))}
     </div>
   );
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 384ed1d0fb..cc8c9a691d 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -24,9 +24,7 @@ const iconMap = {
 
 export type AlertColor = keyof typeof iconMap;
 
-export interface AlertProps extends Omit<UseAlertProps, "hasDescription"> {
-  color: AlertColor;
-}
+export interface AlertProps extends Omit<UseAlertProps, "hasDescription"> {}
 
 const Alert = forwardRef<"div", AlertProps>((props, ref) => {
   const {
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 581a1cf236..cbdac9aa6b 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import {Meta} from "@storybook/react";
-import {alert} from "@nextui-org/theme";
+import {alert, cn} from "@nextui-org/theme";
 import {Button} from "@nextui-org/button";
 
-import {Alert} from "../src";
+import {Alert, AlertProps} from "../src";
 
 export default {
   title: "Components/Alert",
@@ -120,57 +120,94 @@ const WithEndContentTemplate = (args) => {
   );
 };
 
-export const CustomStylesTemplate = (args) => {
-  const [isVisible, setIsVisible] = React.useState(true);
+const CustomAlert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return `before:bg-default-200`;
+      }
+    }, []);
 
-  return (
-    <>
-      {!isVisible && (
-        <Button
-          className="bg-background text-default-700 font-medium border-1 shadow-small"
-          size="sm"
-          variant="bordered"
-          onPress={() => setIsVisible(true)}
-        >
-          Show Alert
-        </Button>
-      )}
+    return (
       <Alert
-        {...args}
+        ref={ref}
         classNames={{
-          base: [
-            "bg-default-50 dark:bg-background",
-            "relative before:content-[''] before:absolute before:z-10",
-            "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1 before:bg-secondary",
-            "rounded-l-none border-l-0",
-          ],
-          mainWrapper: "pt-1",
-          iconWrapper: "border-1 border-secondary-200 dark:bg-transparent",
-          alertIcon: "text-secondary",
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames?.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames?.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
         }}
-        isVisible={isVisible}
-        title="The documents you requested are ready to be viewed"
-        variant="faded"
-        onClose={() => setIsVisible(false)}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
       >
-        <div className="flex items-center gap-1 mt-3">
-          <Button
-            className="bg-background text-default-700 font-medium border-1 shadow-small"
-            size="sm"
-            variant="bordered"
-          >
-            View documents
-          </Button>
-          <Button
-            className="text-default-500 font-medium underline underline-offset-4"
-            size="sm"
-            variant="light"
-          >
-            Maybe later
-          </Button>
-        </div>
+        <div className="flex items-center gap-1 mt-3">{children}</div>
       </Alert>
-    </>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
+
+const CustomStylesTemplate = (args) => {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          {...args}
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
   );
 };
 
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index bc76f4dd23..6ec5039767 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -146,7 +146,7 @@ const alert = tv({
       class: {
         base: [
           colorVariants.flat.default,
-          "bg-default-100 dark:bg-default-50",
+          "bg-default-100 dark:bg-default-50/50",
           "text-default-foreground",
         ],
         description: "text-default-600",
@@ -158,7 +158,7 @@ const alert = tv({
       variant: ["flat", "faded"],
       color: "primary",
       class: {
-        base: [colorVariants.flat.primary, "bg-primary-50"],
+        base: [colorVariants.flat.primary, "bg-primary-50 dark:bg-primary-50/50"],
         closeButton: "text-primary-500 data-[hover]:bg-primary-200",
         iconWrapper: "bg-primary-50 dark:bg-primary-100 border-primary-100",
       },
@@ -167,7 +167,7 @@ const alert = tv({
       variant: ["flat", "faded"],
       color: "secondary",
       class: {
-        base: [colorVariants.flat.secondary, "bg-secondary-50"],
+        base: [colorVariants.flat.secondary, "bg-secondary-50 dark:bg-secondary-50/50"],
         closeButton: "text-secondary-500 data-[hover]:bg-secondary-200",
         iconWrapper: "bg-secondary-50 dark:bg-secondary-100 border-secondary-100",
       },
@@ -176,7 +176,7 @@ const alert = tv({
       variant: ["flat", "faded"],
       color: "success",
       class: {
-        base: [colorVariants.flat.success, "bg-success-50"],
+        base: [colorVariants.flat.success, "bg-success-50 dark:bg-success-50/50"],
         closeButton: "text-success-500 data-[hover]:bg-success-200",
         iconWrapper: "bg-success-50 dark:bg-success-100 border-success-100",
       },
@@ -185,7 +185,7 @@ const alert = tv({
       variant: ["flat", "faded"],
       color: "warning",
       class: {
-        base: [colorVariants.flat.warning, "bg-warning-50"],
+        base: [colorVariants.flat.warning, "bg-warning-50 dark:bg-warning-50/50"],
         closeButton: "text-warning-500 data-[hover]:bg-warning-200",
         iconWrapper: "bg-warning-50 dark:bg-warning-100 border-warning-100",
       },
@@ -194,7 +194,7 @@ const alert = tv({
       variant: ["flat", "faded"],
       color: "danger",
       class: {
-        base: [colorVariants.flat.danger, "bg-danger-50"],
+        base: [colorVariants.flat.danger, "bg-danger-50 dark:bg-danger-50/50"],
         closeButton: "text-danger-500 data-[hover]:bg-danger-200",
         iconWrapper: "bg-danger-50 dark:bg-danger-100 border-danger-100",
       },
@@ -211,7 +211,7 @@ const alert = tv({
       variant: "faded",
       color: "primary",
       class: {
-        base: "border-primary-200",
+        base: "border-primary-200 dark:border-primary-100",
       },
     },
     {
@@ -225,14 +225,14 @@ const alert = tv({
       variant: "faded",
       color: "success",
       class: {
-        base: "border-success-200 dark:border-success-100",
+        base: "border-success-300 dark:border-success-100",
       },
     },
     {
       variant: "faded",
       color: "warning",
       class: {
-        base: "border-warning-200 dark:border-warning-100",
+        base: "border-warning-300 dark:border-warning-100",
       },
     },
     {