diff --git a/frontend/components/global/ToastContainer/ToastBox.vue b/frontend/components/global/ToastContainer/ToastBox.vue
index d539f25..04c2fac 100644
--- a/frontend/components/global/ToastContainer/ToastBox.vue
+++ b/frontend/components/global/ToastContainer/ToastBox.vue
@@ -40,17 +40,17 @@ const statusIcon = computed(() => {
         case "success":
             return {
                 name: "duo-icons:check-circle",
-                class: "**:fill-success-500 [filter:drop-shadow(0_0_10px_var(--color-success-500))]",
+                class: "**:fill-success-500 [filter:drop-shadow(0_0_20px_var(--color-success-500))]",
             };
         case "error":
             return {
                 name: "duo-icons:alert-triangle",
-                class: "**:fill-danger-500 [filter:drop-shadow(0_0_10px_var(--color-danger-500))]",
+                class: "**:fill-danger-500 [filter:drop-shadow(0_0_20px_var(--color-danger-500))]",
             };
         case "info":
             return {
                 name: "duo-icons:info",
-                class: "**:fill-cyan-500 [filter:drop-shadow(0_0_10px_var(--color-cyan-500))]",
+                class: "**:fill-cyan-500 [filter:drop-shadow(0_0_20px_var(--color-cyan-500))]",
             };
         case "warning":
             return {
@@ -88,20 +88,25 @@ onMounted(() => {
         :duration="options.duration ?? 4000"
         @swipeEnd="onSwipeEnd"
         v-model:open="open"
-        class="w-full bg-white shadow-md justify-items-start shadow-black/3 border-t-[0.5px] border-slate-200 p-4 grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-toast-in data-[state=closed]:animate-toast-hide data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-toast-out"
+        class="w-full bg-white shadow-md justify-items-start shadow-black/3 border-[0.5px] flex flex-col border-slate-300 p-4 gap-x-[15px] items-center data-[state=open]:animate-toast-in data-[state=closed]:animate-toast-hide data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-toast-out"
         :class="options.description ? 'rounded-150' : 'rounded-full'"
     >
         <ToastTitle
-            :class="[{ 'mb-1.5': options.description }]"
-            class="w-full justify-items-start [grid-area:_title] font-medium text-slate-600 text-sm flex items-center justify-between gap-2"
+            :class="[{ 'mb-1': options.description }]"
+            class="w-full justify-items-start font-medium text-slate-600 text-sm flex items-center justify-between gap-2"
         >
-            <Icon :name="statusIcon.name" :class="statusIcon.class" size="24" />
-            <span class="text-start -me-2">{{ message }}</span>
+            <Icon
+                :name="statusIcon.name"
+                :class="statusIcon.class"
+                size="24"
+            />
+            <span class="text-start">{{ message }}</span>
         </ToastTitle>
-        <ToastDescription v-if="options.description" as-child>
-            <div
-                class="[grid-area:_description] m-0 mr-8 text-slate-500 typo-p-sm text-start"
-            >
+        <ToastDescription
+            v-if="options.description"
+            as-child
+        >
+            <div class="text-slate-400 typo-p-xs font-medium flex items-center justify-end w-full">
                 {{ options.description }}
             </div>
         </ToastDescription>