diff --git a/src/lib/components/alert/Alert.svelte b/src/lib/components/alert/Alert.svelte
index 0e3caa8c..51be0c49 100644
--- a/src/lib/components/alert/Alert.svelte
+++ b/src/lib/components/alert/Alert.svelte
@@ -12,8 +12,8 @@
 	const currentType = writable(type);
 	$: currentType.set(type);
 
-	const defaultClass = 'rounded-md p-4';
-	const defaultLeadingClass = 'flex-grow flex flex-col w-6 flex items-center';
+	const defaultClass = 'rounded-md p-4 flex relative stwui-alert';
+	const defaultLeadingClass = 'flex-grow flex flex-col w-6 flex items-center stwui-alert-leading';
 
 	$: finalClass = twMerge(
 		defaultClass,
@@ -47,24 +47,22 @@
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}
 >
-	<div class="flex relative">
-		{#if $$slots.leading}
-			<div class={finalLeadingClass}>
-				<slot name="leading" />
-			</div>
-		{/if}
+	{#if $$slots.leading}
+		<div class={finalLeadingClass}>
+			<slot name="leading" />
+		</div>
+	{/if}
 
-		{#if $$slots.title || $$slots.description}
-			<div
-				class="flex items-start flex-col w-full"
-				class:ml-3={$$slots.leading}
-				class:justify-start={$$slots.description}
-				class:justify-center={!$$slots.description}
-			>
-				<slot name="title" />
-				<slot name="description" />
-			</div>
-		{/if}
-		<slot name="extra" />
-	</div>
+	{#if $$slots.title || $$slots.description}
+		<div
+			class="flex items-start flex-col w-full stwui-alert-title-description-wrapper"
+			class:ml-3={$$slots.leading}
+			class:justify-start={$$slots.description}
+			class:justify-center={!$$slots.description}
+		>
+			<slot name="title" />
+			<slot name="description" />
+		</div>
+	{/if}
+	<slot name="extra" />
 </div>
diff --git a/src/lib/components/alert/Description.svelte b/src/lib/components/alert/Description.svelte
index 8a42a500..aa28d3bf 100644
--- a/src/lib/components/alert/Description.svelte
+++ b/src/lib/components/alert/Description.svelte
@@ -10,7 +10,7 @@
 
 	const type: Writable<'info' | 'warn' | 'success' | 'error'> = getContext('alert-type');
 
-	const defaultClass = 'text-sm';
+	const defaultClass = 'text-sm stwui-alert-description';
 	const infoClass = 'text-info-secondary-content';
 	const warnClass = 'text-warn-secondary-content';
 	const successClass = 'text-success-secondary-content';
diff --git a/src/lib/components/alert/Extra.svelte b/src/lib/components/alert/Extra.svelte
index 501e2afa..8c323f5a 100644
--- a/src/lib/components/alert/Extra.svelte
+++ b/src/lib/components/alert/Extra.svelte
@@ -11,7 +11,7 @@
 	const type: Writable<'info' | 'warn' | 'success' | 'error'> = getContext('alert-type');
 	const alertDescription: boolean = getContext('alert-description');
 
-	const defaultClass = 'flex-shrink-0 flex items-center justify-center';
+	const defaultClass = 'flex-shrink-0 flex items-center justify-center stwui-alert-extra';
 	const infoClass = 'text-info-icon ';
 	const warnClass = 'text-warn-icon';
 	const successClass = 'text-success-icon';
@@ -24,7 +24,7 @@
 		$type === 'success' ? successClass : false,
 		$type === 'error' ? errorClass : false,
 
-		alertDescription ? 'absolute -top-2 -right-2' : false,
+		alertDescription ? 'absolute top-2.5 right-2.5' : false,
 
 		$$props.class
 	);
diff --git a/src/lib/components/alert/Title.svelte b/src/lib/components/alert/Title.svelte
index 1fd9ee6c..b0f714d0 100644
--- a/src/lib/components/alert/Title.svelte
+++ b/src/lib/components/alert/Title.svelte
@@ -10,7 +10,8 @@
 
 	const type: Writable<'info' | 'warn' | 'success' | 'error'> = getContext('alert-type');
 
-	const defaultClass = 'mb-0 flex flex-row items-start justify-between w-full relative';
+	const defaultClass =
+		'mb-0 flex flex-row items-start justify-between w-full relative stwui-alert-title';
 	const infoClass = 'text-info-content';
 	const warnClass = 'text-warn-content';
 	const successClass = 'text-success-content';