diff --git a/package-lock.json b/package-lock.json
index ef9102a..199bf35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@contacto-io/style-guide",
-  "version": "0.5.85",
+  "version": "0.5.99",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1684,6 +1684,23 @@
         }
       }
     },
+    "@formatjs/intl-displaynames": {
+      "version": "6.6.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.6.6.tgz",
+      "integrity": "sha512-Dg5URSjx0uzF8VZXtHb6KYZ6LFEEhCbAbKoYChYHEOnMFTw/ZU3jIo/NrujzQD2EfKPgQzIq73LOUvW6Z/LpFA==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.18.2",
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+        }
+      }
+    },
     "@formatjs/intl-enumerator": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-enumerator/-/intl-enumerator-1.4.5.tgz",
diff --git a/package.json b/package.json
index b89ed7e..268c2a1 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "registry": "https://npm.pkg.github.com"
   },
   "repository": "git://github.com/contacto-io/contacto-console",
-  "version": "0.5.85",
+  "version": "0.5.99",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js
new file mode 100644
index 0000000..e2c6934
--- /dev/null
+++ b/src/components/Notification/index.js
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react'
+import { Icon } from '../Icon/index'
+import { Text } from '../Typography/index'
+import { notification } from 'antd'
+import './notification.scss'
+
+const iconMap = {
+  info: 'info',
+  warning: 'error',
+  error: 'report',
+  success: 'check_circle',
+}
+export const showNotification = (type, message) => {
+  notification[type]({
+    message: <Text type="title-3">{message}</Text>,
+    className: `notification-${type}`,
+    icon: <Icon name={iconMap[type]} size={24} />,
+    closeIcon: (
+      <Icon name="close" size={24} color="primary-text-color" hoverColor="primary-text-color" />
+    ),
+    duration: 5,
+  })
+}
+
+export const Notification = ({ type, message }) => {
+  useEffect(() => {
+    showNotification(type, message)
+  }, [type])
+  return <>This is notification of type {type}</>
+}
diff --git a/src/components/Notification/index.stories.js b/src/components/Notification/index.stories.js
new file mode 100644
index 0000000..50848ac
--- /dev/null
+++ b/src/components/Notification/index.stories.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Notification, showNotification } from './'
+
+export default {
+  title: 'Components/Notification',
+  component: showNotification,
+}
+
+const Template = (args) => <Notification {...args} />
+
+export const Info = Template.bind({})
+Info.args = {
+  message: 'This is info notification',
+  type: 'info',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  message: 'This is success notification',
+  type: 'success',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  message: 'This is error notification',
+  type: 'error',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  message: 'This is warning notification',
+  type: 'warning',
+}
diff --git a/src/components/Notification/notification.scss b/src/components/Notification/notification.scss
new file mode 100644
index 0000000..ae1fd95
--- /dev/null
+++ b/src/components/Notification/notification.scss
@@ -0,0 +1,76 @@
+.notification {
+  &-success {
+    color: var(--success-color);
+    border-left: 4px solid var(--toast-success-color);
+  }
+
+  &-device-change {
+    background: rgba(6, 14, 43, 0.9) !important;
+    width: 100% !important;
+    min-height: 36px;
+    padding: 8px !important;
+    .ant-notification-notice-message {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0px;
+    }
+  }
+
+  &-error {
+    color: var(--danger-color);
+    border-left: 4px solid var(--danger-color);
+  }
+
+  &-warning {
+    color: var(--warning-color);
+    border-left: 4px solid var(--warning-color);
+  }
+
+  &-info {
+    color: var(--primary-color);
+    border-left: 4px solid var(--primary-color);
+  }
+
+}
+
+.ant-notification {
+  &-notice-content {
+    display: flex;
+    margin-right: 40px;
+  }
+  &-notice-description {
+    margin: 0;
+  }
+
+  &-notice-message {
+    display: flex;
+    margin: 0 !important;
+    margin-left: 32px !important;
+    padding-right: 0 !important;
+    &-single-line-auto-margin {
+      display: none;
+    }
+  }
+  &-notice-with-icon {
+    display: initial !important;
+  }
+  &-notice-close-icon,
+  &-close-icon {
+    svg {
+      height: 1.5rem !important;
+      width: 1.5rem !important;
+      fill: var(--primary-text-color) !important;
+    }
+  }
+  &-notice-close {
+    right: 16px;
+  }
+  &-notice-icon {
+    margin: 0;
+  }
+  &-notice {
+    padding: 16px;
+    width: 337px;
+  }
+}
diff --git a/src/index.js b/src/index.js
index a013cb9..15e9565 100644
--- a/src/index.js
+++ b/src/index.js
@@ -26,4 +26,4 @@ export * from './components/TopBanner/index'
 export * from './components/TimeLeftBar/index'
 export * from './components/PhoneNumberInput/index'
 export * from './components/ChatLoader/index'
-
+export * from './components/Notification/index'