diff --git a/apps/app/components/toast-alert/index.tsx b/apps/app/components/toast-alert/index.tsx
index 5d0c0123c..e8f57f6ab 100644
--- a/apps/app/components/toast-alert/index.tsx
+++ b/apps/app/components/toast-alert/index.tsx
@@ -1,14 +1,9 @@
 import React from "react";
 // hooks
-import {
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-  XCircleIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
 import useToast from "hooks/use-toast";
 // icons
+import { LinkIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { ErrorIcon, SuccessIcon } from "components/icons";
 
 const ToastAlerts = () => {
   const { alerts, removeAlert } = useToast();
@@ -16,48 +11,60 @@ const ToastAlerts = () => {
   if (!alerts) return null;
 
   return (
-    <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden">
+    <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-96 space-y-5 overflow-hidden rounded-md">
       {alerts.map((alert) => (
-        <div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
+        <div
+          className="relative flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md border-[2px] border-brand-surface-2 bg-brand-base px-4 py-3 text-sm text-brand-base shadow-md"
+          key={alert.id}
+        >
           <div className="absolute top-1 right-1">
             <button
               type="button"
-              className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
+              className="pointer-events-auto inline-flex rounded-md p-1.5 text-brand-secondary"
               onClick={() => removeAlert(alert.id)}
             >
               <span className="sr-only">Dismiss</span>
-              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              <XMarkIcon className="h-4 w-4" aria-hidden="true" />
             </button>
           </div>
-          <div
-            className={`px-2 py-4 ${
-              alert.type === "success"
-                ? "bg-[#06d6a0]"
-                : alert.type === "error"
-                ? "bg-[#ef476f]"
-                : alert.type === "warning"
-                ? "bg-[#e98601]"
-                : "bg-[#1B9aaa]"
-            }`}
-          >
-            <div className="flex items-center gap-x-3">
-              <div className="flex-shrink-0">
+          {alert.type !== "info" ? (
+            <>
+              <div className="flex w-full items-center gap-2.5">
                 {alert.type === "success" ? (
-                  <CheckCircleIcon className="h-8 w-8" aria-hidden="true" />
+                  <SuccessIcon className="h-4 w-4" />
                 ) : alert.type === "error" ? (
-                  <XCircleIcon className="h-8 w-8" />
-                ) : alert.type === "warning" ? (
-                  <ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
+                  <ErrorIcon className="h-4 w-4" />
                 ) : (
-                  <InformationCircleIcon className="h-8 w-8" />
+                  ""
                 )}
+                <p
+                  className={`font-medium  ${
+                    alert.type === "success"
+                      ? "text-brand-base"
+                      : alert.type === "error"
+                      ? "bg-[#ef476f]"
+                      : alert.type === "warning"
+                      ? "bg-[#e98601]"
+                      : "bg-[#1B9aaa]"
+                  }`}
+                >
+                  {alert.title}
+                </p>
               </div>
-              <div>
-                <p className="font-semibold">{alert.title}</p>
-                {alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
+              <div className="flex w-full items-center justify-start text-brand-secondary">
+                <p className="text-left">{alert.message}</p>
               </div>
+            </>
+          ) : (
+            <div className="flex w-full items-center justify-center gap-2.5 py-2 text-brand-secondary">
+              {alert.iconType === "copy" && (
+                <span>
+                  <LinkIcon className="h-4 w-4" />
+                </span>
+              )}
+              <p className="font-medium italic">{alert.title}</p>
             </div>
-          </div>
+          )}
         </div>
       ))}
     </div>