diff --git a/CommonUI/src/Components/Toast/Toast.tsx b/CommonUI/src/Components/Toast/Toast.tsx
index 079569c8ee..6a6c8096fd 100644
--- a/CommonUI/src/Components/Toast/Toast.tsx
+++ b/CommonUI/src/Components/Toast/Toast.tsx
@@ -1,5 +1,6 @@
-import OneUptimeDate from "Common/Types/Date";
 import React, { FunctionComponent, ReactElement, useState } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "Common/Types/Icon/IconProp";
 
 export enum ToastType {
   DANGER,
@@ -14,6 +15,7 @@ export interface ComponentProps {
   description: string;
   onClose?: undefined | (() => void);
   type?: undefined | ToastType;
+  icon?: IconProp | undefined;
   createdAt?: undefined | Date;
 }
 
@@ -21,64 +23,69 @@ const Component: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [show, setShow] = useState<boolean>(true);
-  let typeCssClass: string = "text-info";
+  let typeCssClass: string = "text-gray-400";
+  let iconType: IconProp = IconProp.Info; 
 
   if (props.type === ToastType.NORMAL) {
-    typeCssClass = "text-normal";
+    typeCssClass = "text-gray-400";
+    iconType = IconProp.Info;
   }
   if (props.type === ToastType.DANGER) {
-    typeCssClass = "text-danger";
+    typeCssClass = "text-red-400";
+    iconType = IconProp.Error;
   }
   if (props.type === ToastType.WARNING) {
-    typeCssClass = "text-warning";
+    typeCssClass = "text-yellow-400";
+    iconType = IconProp.Alert;
   }
   if (props.type === ToastType.SUCCESS) {
-    typeCssClass = "text-success";
+    typeCssClass = "text-green-400";
+    iconType = IconProp.CheckCircle; 
   }
   if (props.type === ToastType.INFO) {
-    typeCssClass = "text-info";
+    typeCssClass = "text-blue-400";
+    iconType = IconProp.Info;
   }
 
+  if(props.icon){
+    iconType = props.icon;
+  }
+
+
+
+
   if (show) {
     return (
-      <div
-        data-testid="toast-main"
-        className="position-fixed top-0 end-0 p-3"
-        style={{ zIndex: "1005" }}
-      >
-        <div className="toast fade show" role="alert">
-          <div className="toast-header">
-            {props.type && (
-              <div
-                data-testid="toast-status"
-                role="status"
-                className={`spinner-grow-sm spinner-grow ${typeCssClass}`}
-              >
-                <span className="visually-hidden">Loading...</span>
-              </div>
-            )}
-            <strong data-testid="toast-strong" className="me-auto ms-2">
-              {props.title}
-            </strong>
-            {props.createdAt && (
-              <small data-testid="toast-time">
-                {OneUptimeDate.fromNow(props.createdAt)}
-              </small>
-            )}
+      <div aria-live="assertive" className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
+        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
 
-            <button
-              data-testid="toast-button"
-              onClick={() => {
-                setShow(false);
-                props.onClose && props.onClose();
-              }}
-              type="button"
-              className="btn-close"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div data-testid="toast-desc" className="toast-body">
-            {props.description}
+          <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+            <div className="p-4">
+              <div className="flex items-start">
+                <div className="flex-shrink-0">
+                  <Icon className={`h-6 w-6 ${typeCssClass}`} icon={iconType} />
+                </div>
+                <div className="ml-3 w-0 flex-1 pt-0.5">
+                  <p className="text-sm font-medium text-gray-900">{props.title}</p>
+                  <p className="mt-1 text-sm text-gray-500">{props.description}</p>
+                  {/* <div className="mt-3 flex space-x-7">
+                    <button type="button" className="rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Undo</button>
+                    <button type="button" className="rounded-md bg-white text-sm font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Dismiss</button>
+                  </div> */}
+                </div>
+                <div className="ml-4 flex flex-shrink-0">
+                  <button onClick={()=>{
+                    setShow(false);
+                    if(props.onClose){
+                      props.onClose();
+                    }
+                  }} type="button" className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    <span className="sr-only">Close</span>
+                    <Icon className={`h-5 w-5`} icon={IconProp.Close} />
+                  </button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/CommonUI/src/Components/Toast/ToastInit.tsx b/CommonUI/src/Components/Toast/ToastInit.tsx
index d6c0876c53..87970a1cca 100644
--- a/CommonUI/src/Components/Toast/ToastInit.tsx
+++ b/CommonUI/src/Components/Toast/ToastInit.tsx
@@ -30,8 +30,8 @@ const ToastLayout: FunctionComponent = (
 
 
     return (<div>
-        {currentToasts.map((toast: ToastComponentProps, index: number) => (
-            <Toast
+        {currentToasts.map((toast: ToastComponentProps, index: number) => {
+            return (<Toast
                 key={index}
                 title={toast.title}
                 description={toast.description}
@@ -49,7 +49,7 @@ const ToastLayout: FunctionComponent = (
                 }}
                 createdAt={toast.createdAt}
             />
-        ))}
+        )})}
     </div>
     );
 };
diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index 2dc4b4a0d7..3b3c142dca 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -454,6 +454,8 @@ const App: () => JSX.Element = () => {
           }
         />
       </Routes>
+
+     
     </MasterPage>
   );
 };
diff --git a/Dashboard/src/Components/UserTimezone/UserTimezoneInit.tsx b/Dashboard/src/Components/UserTimezone/UserTimezoneInit.tsx
index 23df2f7e1c..9a0638ac75 100644
--- a/Dashboard/src/Components/UserTimezone/UserTimezoneInit.tsx
+++ b/Dashboard/src/Components/UserTimezone/UserTimezoneInit.tsx
@@ -9,6 +9,7 @@ import ConfirmModal from "CommonUI/src/Components/Modal/ConfirmModal";
 import ModelAPI from "CommonUI/src/Utils/ModelAPI/ModelAPI";
 import UserModel from "Model/Models/User";
 import useAsyncEffect from "use-async-effect";
+import BadDataException from "Common/Types/Exception/BadDataException";
 
 const UseTimezoneInitElement: FunctionComponent = (
 
@@ -31,6 +32,8 @@ const UseTimezoneInitElement: FunctionComponent = (
                 modelType: UserModel
             });
 
+            throw new BadDataException("Test Error");
+
         } catch (err) {
             ShowToastNotification({
                 title: "Error Saving Timezone",
diff --git a/Dashboard/src/Pages/Global/UserProfile/Index.tsx b/Dashboard/src/Pages/Global/UserProfile/Index.tsx
index ce480300f7..bf50211b48 100644
--- a/Dashboard/src/Pages/Global/UserProfile/Index.tsx
+++ b/Dashboard/src/Pages/Global/UserProfile/Index.tsx
@@ -12,6 +12,7 @@ import UserUtil from "CommonUI/src/Utils/User";
 import User from "Model/Models/User";
 import React, { FunctionComponent, ReactElement } from "react";
 import TimezoneElement from "../../../Components/Timezone/TimezoneElement";
+import Toast from "CommonUI/src/Components/Toast/Toast";
 
 const Home: FunctionComponent<PageComponentProps> = (): ReactElement => {
   return (
@@ -31,6 +32,11 @@ const Home: FunctionComponent<PageComponentProps> = (): ReactElement => {
       ]}
       sideMenu={<SideMenu />}
     >
+
+      <Toast
+        title="Error Saving Timezone"
+        description={"ERROR"}
+      />
       <CardModelDetail
         cardProps={{
           title: "Basic Info",
@@ -38,7 +44,7 @@ const Home: FunctionComponent<PageComponentProps> = (): ReactElement => {
         }}
         name="User Profile > Basic Info"
         onSaveSuccess={(user: User) => {
-          if(user.timezone){
+          if (user.timezone) {
             UserUtil.setSavedUserTimezone(user.timezone);
           }
         }}
@@ -110,7 +116,7 @@ const Home: FunctionComponent<PageComponentProps> = (): ReactElement => {
               }
             },
           ],
-          
+
           modelId: UserUtil.getUserId(),
         }}
       />