diff --git a/web/src/constants/Theme.constants.ts b/web/src/constants/Theme.constants.ts
index 9e60012b84..6f11bb7c02 100644
--- a/web/src/constants/Theme.constants.ts
+++ b/web/src/constants/Theme.constants.ts
@@ -31,6 +31,7 @@ export const theme: DefaultTheme = {
   },
   notification: {
     success: {
+      color: '#52C41A',
       style: {
         border: '1px solid #52C41A',
         background: '#F6FFED',
@@ -38,20 +39,23 @@ export const theme: DefaultTheme = {
       },
     },
     error: {
+      color: '#EE1847',
       style: {
-        border: '1px solid #F5222D',
+        border: '1px solid #EE1847',
         background: '#FFF1F0',
         minWidth: '450px',
       },
     },
     info: {
+      color: '#3B61F6',
       style: {
         border: '1px solid #3B61F6',
-        background: '#3B61F61A',
+        background: '#E7EBFE',
         minWidth: '450px',
       },
     },
     warning: {
+      color: '#FAAD14',
       style: {
         border: '1px solid #FAAD14',
         background: '#FFFBE6',
@@ -59,6 +63,7 @@ export const theme: DefaultTheme = {
       },
     },
     open: {
+      color: '#3B61F6',
       style: {
         minWidth: '450px',
       },
diff --git a/web/src/hooks/useNotification.tsx b/web/src/hooks/useNotification.tsx
index c88b990cf2..5ccceb9003 100644
--- a/web/src/hooks/useNotification.tsx
+++ b/web/src/hooks/useNotification.tsx
@@ -1,3 +1,4 @@
+import {CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined} from '@ant-design/icons';
 import {notification} from 'antd';
 import {NotificationInstance, ArgsProps} from 'antd/lib/notification/index';
 import {useCallback} from 'react';
@@ -10,6 +11,14 @@ export type IShowNotificationProps = Omit<ArgsProps, 'message' | 'type'> & {
 };
 export type TShowNotification = (props: IShowNotificationProps) => void;
 
+const icons: Record<TNotificationType, React.ComponentType> = {
+  info: InfoCircleOutlined,
+  success: CheckCircleOutlined,
+  error: CloseCircleOutlined,
+  warning: WarningOutlined,
+  open: InfoCircleOutlined,
+};
+
 const useNotification = () => {
   const [api, contextHolder] = notification.useNotification();
   const {notification: notificationStyles} = useTheme();
@@ -18,8 +27,9 @@ const useNotification = () => {
     ({type = 'info', title = '', ...rest}) => {
       const overwrite = notificationStyles[type];
       const notificationFn = api[type];
+      const Icon = icons[type] as React.ComponentType<{style: React.CSSProperties}>;
 
-      notificationFn({...overwrite, ...rest, message: title});
+      notificationFn({icon: <Icon style={{color: overwrite.color}} />, ...overwrite, ...rest, message: title});
     },
     [api, notificationStyles]
   );
diff --git a/web/src/styled.d.ts b/web/src/styled.d.ts
index 30024a564a..160d8618c1 100644
--- a/web/src/styled.d.ts
+++ b/web/src/styled.d.ts
@@ -3,6 +3,7 @@ import {CSSProperties} from 'react';
 import 'styled-components';
 
 type TNotification = {
+  color: string;
   style: CSSProperties;
 };