diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index 842e31ebe..b0d0c4c7a 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -18,6 +18,7 @@
           rounded-lg
           border
         "
+        :class="[config.containerBorder]"
         style="pointer-events: auto"
       >
         <feather-icon
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index 5c3dd7499..d0384a7f1 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -34,7 +34,11 @@ export function getBgColorClass(color: string) {
   return `bg-${vcolor}-200`;
 }
 
-export function getColorClass(color: string, type: 'bg' | 'text', value = 300) {
+export function getColorClass(
+  color: string,
+  type: 'bg' | 'text' | 'border',
+  value = 300
+) {
   return `${type}-${getValidColor(color)}-${value}`;
 }
 
diff --git a/src/utils/interactive.ts b/src/utils/interactive.ts
index 9012e41fb..839f3975c 100644
--- a/src/utils/interactive.ts
+++ b/src/utils/interactive.ts
@@ -70,6 +70,8 @@ export function getIconConfig(type: ToastType) {
   }[type];
 
   const iconColor = getColorClass(color ?? 'gray', 'text', 400);
+  const containerBackground = getColorClass(color ?? 'gray', 'bg', 100);
+  const containerBorder = getColorClass(color ?? 'gray', 'border', 300);
 
-  return { iconName, color, iconColor };
+  return { iconName, color, iconColor, containerBorder, containerBackground };
 }