diff --git a/packages/ui/src/components/shadcn/stories/Alert.stories.tsx b/packages/ui/src/components/shadcn/stories/Alert.stories.tsx
index a694f45a716..aee7b1daa28 100644
--- a/packages/ui/src/components/shadcn/stories/Alert.stories.tsx
+++ b/packages/ui/src/components/shadcn/stories/Alert.stories.tsx
@@ -1,5 +1,5 @@
 import { Alert, AlertDescription, AlertTitle } from '@ui/components/shadcn/ui/alert'
-import { AlertCircle, Terminal, AlertTriangle } from 'lucide-react'
+import { AlertCircle, Terminal, AlertTriangle, Info } from 'lucide-react'
 import { Meta } from '@storybook/react'
 
 const meta: Meta<typeof Alert> = {
@@ -8,27 +8,37 @@ const meta: Meta<typeof Alert> = {
 }
 
 export const Default = () => (
-  <Alert className="flex gap-6">
-    <div className="bg-foreground rounded h-5 w-5 flex items-center justify-center">
-      <AlertTriangle className="h-3 w-3 text-background" strokeWidth={2} />
-    </div>
-    <div>
+  <Alert>
+      <Info strokeWidth={2} />
       <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>You can add components to your app using the cli.</AlertDescription>
-    </div>
+      <AlertDescription>You can add components to your app using the cli.</AlertDescription> 
   </Alert>
 )
 
 Default.storyName = 'Default'
 
 export const Destructive = () => (
-  <Alert variant="destructive">
-    <AlertCircle className="h-4 w-4" />
-    <AlertTitle>Error</AlertTitle>
-    <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-  </Alert>
+ <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
 )
 
 Destructive.storyName = 'Destructive'
 
+export const Warning = () => (
+ <Alert variant="warning">
+    <AlertCircle className="h-4 w-4" />
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      Your session has expired. Please log in again.
+    </AlertDescription>
+  </Alert>
+)
+
+Warning.storyName = 'Warning'
+
 export default meta
diff --git a/packages/ui/src/components/shadcn/ui/alert.tsx b/packages/ui/src/components/shadcn/ui/alert.tsx
index 5d86236b551..43c29dd3411 100644
--- a/packages/ui/src/components/shadcn/ui/alert.tsx
+++ b/packages/ui/src/components/shadcn/ui/alert.tsx
@@ -3,14 +3,33 @@ import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@ui/lib/utils'
 
+
+
 const alertVariants = cva(
-  'relative w-full rounded-lg border p-5 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-8',
+  'relative w-full rounded-lg border p-4 [&:has(svg)]:pl-14 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground'
+  // custom
+  + ' [&>svg]:w-[23px] [&>svg]:h-[23px] [&>svg]:p-1 [&>svg]:flex [&>svg]:rounded',
   {
     variants: {
       variant: {
-        default: 'bg-alternative text-foreground',
+        default:  
+          'text-foreground' + 
+          // removed `bg-background`
+
+          // custom styles
+          ' bg-alternative [&>svg]:text-background [&>svg]:bg-foreground-strong',
         destructive:
-          'text-destructive border-destructive/50 [&>svg]:text-destructive text-destructive',
+          'text-destructive' + 
+          // removed 'border-destructive/50 dark:border-destructive [&>svg]:text-destructive'
+
+          // custom styles
+          ' border-destructive-300 bg-destructive-400 [&>svg]:text-destructive-400 [&>svg]:bg-destructive',
+        
+        /**
+         * custom variant
+         */
+        warning:
+          'text-warning border-warning-300 bg-warning-400 [&>svg]:text-warning-400 [&>svg]:bg-warning',
       },
     },
     defaultVariants: {