diff --git a/sites/docs/src/lib/components/callout.svelte b/sites/docs/src/lib/components/callout.svelte
index c1deba82a..e8fc9ed56 100644
--- a/sites/docs/src/lib/components/callout.svelte
+++ b/sites/docs/src/lib/components/callout.svelte
@@ -1,8 +1,4 @@
 <script lang="ts">
-	import Info from "phosphor-svelte/lib/Info";
-	import RocketLaunch from "phosphor-svelte/lib/RocketLaunch";
-	import Warning from "phosphor-svelte/lib/Warning";
-	import WarningOctagon from "phosphor-svelte/lib/WarningOctagon";
 	import type { BitsPrimitiveElementAttributes, WithChildren } from "bits-ui";
 	import * as Alert from "$lib/components/ui/alert/index.js";
 	import { cn } from "$lib/utils/styles.js";
@@ -18,26 +14,18 @@
 	}: WithChildren<BitsPrimitiveElementAttributes> & {
 		type?: "note" | "warning" | "danger" | "tip";
 	} = $props();
-
-	const iconMap = {
-		note: Info,
-		tip: RocketLaunch,
-		warning: Warning,
-		danger: WarningOctagon,
-	} as const;
 </script>
 
 <Alert.Root class={cn("mt-6", className)} variant={type}>
-	{@const Icon = iconMap[type]}
-	<Icon class="size-6" weight="bold" />
+	<span class="dot absolute left-5 top-[25px] inline-block h-[10px] w-[10px] rounded-full" />
 
 	{#if title}
-		<Alert.Title class="mb-2 text-lg">
+		<Alert.Title class="mb-2 ml-5 text-[15px] font-semibold">
 			{title}
 		</Alert.Title>
 	{/if}
 
-	<Alert.Description class="leading-relaxed">
+	<Alert.Description class="leading-relaxed [&>p]:text-[15px] [&>p]:!leading-[140%]">
 		{@render children?.()}
 	</Alert.Description>
 </Alert.Root>
diff --git a/sites/docs/src/lib/components/ui/alert/index.ts b/sites/docs/src/lib/components/ui/alert/index.ts
index f38972274..89c3d88b8 100644
--- a/sites/docs/src/lib/components/ui/alert/index.ts
+++ b/sites/docs/src/lib/components/ui/alert/index.ts
@@ -5,15 +5,15 @@ import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
 
 export const alertVariants = tv({
-	base: "relative w-full rounded-br-lg rounded-tr-lg border-l-4 px-4 pb-4 pt-[22px] [&>h5]:tracking-normal [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-6 [&>svg]:text-foreground",
+	base: "relative w-full rounded-[16px] p-5 [&>h5]:tracking-normal ",
 
 	variants: {
 		variant: {
-			note: "border-sky-200 bg-sky-50 text-foreground dark:border-sky-600 dark:bg-sky-500/15 [&>h5]:text-sky-600 dark:[&>h5]:text-sky-400 [&>svg]:text-sky-600 dark:[&>svg]:text-sky-400",
+			note: "dark:[&>h5]:[#363661] bg-[#E0F2FE] text-[#363661] dark:bg-[#E0F2FE] [&>.dot]:bg-[#363661] [&>h5]:text-[#363661] [&>svg]:text-sky-600 dark:[&>svg]:text-sky-400",
 			danger: "border-rose-200 bg-rose-50 text-foreground dark:border-rose-600 dark:bg-rose-500/20 [&>h5]:text-red-600 dark:[&>h5]:text-red-300 [&>svg]:text-red-800 dark:[&>svg]:text-red-300",
-			tip: "border-fuchsia-200 bg-fuchsia-50 text-foreground dark:border-fuchsia-700 dark:bg-fuchsia-500/15 [&>h5]:text-fuchsia-500 dark:[&>h5]:text-fuchsia-500 [&>svg]:text-fuchsia-500 dark:[&>svg]:text-fuchsia-500",
+			tip: "dark:[&>h5]:[#0040A7] bg-[#FFDFDA] text-[#0040A7] dark:bg-[#FFDFDA] [&>.dot]:bg-[#0040A7] [&>h5]:text-[#0040A7]",
 			warning:
-				"border-amber-200 bg-amber-50 text-foreground dark:border-amber-600 dark:bg-amber-500/15 [&>h5]:text-amber-500 dark:[&>h5]:text-amber-400 [&>svg]:text-amber-500 dark:[&>svg]:text-amber-400",
+				"bg-[#FEFCE8] text-[#525252] dark:bg-[#FEFCE8] [&>.dot]:bg-[#525252] [&>h5]:text-[#525252] dark:[&>h5]:text-[#525252]",
 		},
 	},
 	defaultVariants: {