diff --git a/packages/stage-ui/src/components/Layouts/Callout.vue b/packages/stage-ui/src/components/Layouts/Callout.vue
index f82328a3c..06fa933d1 100644
--- a/packages/stage-ui/src/components/Layouts/Callout.vue
+++ b/packages/stage-ui/src/components/Layouts/Callout.vue
@@ -15,8 +15,8 @@ const themeClasses: Record<ThemeVariant, {
   primary: {
     container: [
       'text-neutral-700/80 dark:text-neutral-300/80',
-      'bg-primary-50/60 dark:bg-primary-50/10 backdrop-blur-md',
-      `before:bg-primary-200 dark:bg-primary-900/10 before:content-[''] before:dark:bg-primary-900`,
+      'bg-primary-50/60 dark:bg-primary-900/25 backdrop-blur-md',
+      `before:bg-primary-200 before:content-[''] before:dark:bg-primary-900`,
     ],
     label: [
       'text-primary-500 dark:text-primary-400 font-semibold',
@@ -25,8 +25,8 @@ const themeClasses: Record<ThemeVariant, {
   lime: {
     container: [
       'text-neutral-700/80 dark:text-neutral-300/80',
-      'bg-lime-50/60 dark:bg-lime-50/10 backdrop-blur-md',
-      `before:bg-lime-200 dark:bg-lime-900/10 before:content-[''] before:dark:bg-lime-900`,
+      'bg-lime-50/60 dark:bg-lime-900/25 backdrop-blur-md',
+      `before:bg-lime-200 before:content-[''] before:dark:bg-lime-900`,
     ],
     label: [
       'text-lime-500 dark:text-lime-400 font-semibold',
@@ -35,8 +35,8 @@ const themeClasses: Record<ThemeVariant, {
   violet: {
     container: [
       'text-neutral-700/80 dark:text-neutral-300/80',
-      'bg-violet-50/60 dark:bg-violet-50/10 backdrop-blur-md',
-      `before:bg-violet-200 dark:bg-violet-900/10 before:content-[''] before:dark:bg-violet-900`,
+      'bg-violet-50/60 dark:bg-violet-900/25 backdrop-blur-md',
+      `before:bg-violet-200 before:content-[''] before:dark:bg-violet-900`,
     ],
     label: [
       'text-violet-500 dark:text-violet-400 font-semibold',
@@ -45,8 +45,8 @@ const themeClasses: Record<ThemeVariant, {
   orange: {
     container: [
       'text-neutral-700/80 dark:text-neutral-300/80',
-      'bg-orange-50/70 dark:bg-orange-50/10 backdrop-blur-md',
-      `before:bg-orange-200 dark:bg-orange-900/10 before:content-[''] before:dark:bg-orange-900`,
+      'bg-orange-50/70 dark:bg-orange-900/25 backdrop-blur-md',
+      `before:bg-orange-200 before:content-[''] before:dark:bg-orange-900`,
     ],
     label: [
       'text-orange-500 dark:text-orange-400 font-semibold',
@@ -57,14 +57,14 @@ const themeClasses: Record<ThemeVariant, {
 
 <template>
   <div
-    relative mb-4
+    relative
     flex flex-col gap-1
     overflow-hidden rounded-lg
-    py="2.5" pl="6.5" pr-3
+    py="2.5" pl="5" pr-3
     :class="[
       ...themeClasses[props.theme || 'violet'].container,
       // eslint-disable-next-line vue/prefer-separate-static-class
-      'before-position-absolute before:left-3 before:right-0 before:h-[calc(100%-2rem)] before:top-50% before:translate-y--50% before:w-1 before:rounded-full',
+      'before-position-absolute before:left-2 before:right-0 before:h-[calc(100%-1rem)] before:top-50% before:translate-y--50% before:w-1 before:rounded-full',
     ]"
   >
     <div text="font-semibold" :class="[...(themeClasses[props.theme || 'violet'].label || [])]">