diff --git a/web/app/layout.js b/web/app/layout.js
index 84e1813132c..47b1526e808 100644
--- a/web/app/layout.js
+++ b/web/app/layout.js
@@ -14,11 +14,14 @@ import Layout from '@/lib/layout/Layout'
 
 import Loading from '@/lib/layout/Loading'
 
-import { Toaster } from 'react-hot-toast'
+import StyledToast from '../components/StyledToast'
 
 export const metadata = {
   title: 'Gravitino',
-  description: 'A high-performance, geo-distributed and federated metadata lake.'
+  description: 'A high-performance, geo-distributed and federated metadata lake.',
+  icons: {
+    icon: '/icons/gravitino.svg'
+  }
 }
 
 const RootLayout = props => {
@@ -33,7 +36,7 @@ const RootLayout = props => {
             <Layout>{children}</Layout>
           </Suspense>
         </Provider>
-        <Toaster position='top-right' />
+        <StyledToast />
       </body>
     </html>
   )
diff --git a/web/components/StyledToast.js b/web/components/StyledToast.js
new file mode 100644
index 00000000000..0d1b50a2217
--- /dev/null
+++ b/web/components/StyledToast.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2024 Datastrato Pvt Ltd.
+ * This software is licensed under the Apache License version 2.
+ */
+
+'use client'
+
+import { toast, ToastBar, Toaster } from 'react-hot-toast'
+
+export default function StyledToast() {
+  return (
+    <div>
+      <Toaster
+        reverseOrder={false}
+        position='top-right'
+        toastOptions={{
+          duration: Infinity,
+          style: {
+            borderRadius: '8px',
+            maxWidth: 500
+          }
+        }}
+      >
+        {t => (
+          <ToastBar toast={t}>
+            {({ icon, message }) => (
+              <>
+                {icon}
+                <div className='twc-flex twc-w-full twc-break-all [&>div]:twc-justify-start'>{message}</div>
+                <div className='twc-flex twc-h-full'>
+                  {t.type !== 'loading' && (
+                    <button
+                      className='twc-border-0 twc-text-[#666] twc-w-6 twc-h-6 twc-justify-start twc-rounded-full twc-ring-primary-400 twc-transition hover:twc-bg-[#f8f8f8] focus:twc-outline-none focus-visible:twc-ring'
+                      onClick={() => toast.dismiss(t.id)}
+                    >
+                      x
+                    </button>
+                  )}
+                </div>
+              </>
+            )}
+          </ToastBar>
+        )}
+      </Toaster>
+    </div>
+  )
+}
diff --git a/web/lib/utils/axios/checkStatus.ts b/web/lib/utils/axios/checkStatus.ts
index 9073345feb9..4567f904a83 100644
--- a/web/lib/utils/axios/checkStatus.ts
+++ b/web/lib/utils/axios/checkStatus.ts
@@ -98,6 +98,13 @@ export function checkStatus(status: number, msg: string, errorMessageMode: Error
     if (errorMessageMode === 'modal') {
       console.log({ title: 'Error Tip', text: errMessage, icon: 'error' })
     } else if (errorMessageMode === 'message') {
+      const keyword = 'reason'
+      const idx = errMessage.indexOf(keyword)
+
+      if (idx !== -1) {
+        errMessage = 'reason ' + errMessage.substring(idx + keyword.length + 1)
+      }
+
       toast.error(errMessage, { id: `global_error_message_status_${status}` })
     }
   }