diff --git a/src/Components/Notification/Notification.jsx b/src/Components/Notification/Notification.jsx
new file mode 100644
index 00000000..ab870810
--- /dev/null
+++ b/src/Components/Notification/Notification.jsx
@@ -0,0 +1,62 @@
+import React, {useState, useEffect} from 'react';
+import './Notification.css';
+
+const Notification = (props) => {
+  const [exit, setExit] = useState(false);
+  const [width, setWidth] = useState(0);
+  const [intervalID, setIntervalID] = useState(null);
+
+  const handleStartTimer = () => {
+
+    const id = setInterval(() => {
+      setWidth((prevState) => {
+        if (prevState < 100) {
+          return prevState + 0.5;
+        }
+        clearInterval(id);
+        return prevState;
+      });
+    }, 10)
+
+    setIntervalID(id);
+
+  };
+
+  const handlePauseTimer = () => {
+    clearInterval(intervalID);
+  };
+
+  const handleCloseNotification = () => {
+    handlePauseTimer();
+    setExit(true);
+    setTimeout(() => {
+      props.dispatch({
+        type: "REMOVE_NOTIFICATION",
+        id: props.id
+      })
+    }, 400)
+  };
+
+  useEffect(() => {
+    if (width === 100) {
+      handleCloseNotification();
+    }
+  }, [width])
+
+  useEffect(() => {
+    handleStartTimer();
+  }, []);
+
+  return (
+    <div onMouseOver={handlePauseTimer} onMouseLeave={handleStartTimer}
+    className={`notification-item ${props.type === "SUCCESS" ? "success" : "error"}
+    ${exit ? "exit" : ""}`}>
+      <p>{props.message}</p>
+      <div className={"bar"} style={{width: `${width}%`}}>
+
+      </div>
+    </div>
+  )
+}
+
+export default Notification;