diff --git a/src/pages/ChargeEdit.jsx b/src/pages/ChargeEdit.jsx
index bc65275..404d80b 100644
--- a/src/pages/ChargeEdit.jsx
+++ b/src/pages/ChargeEdit.jsx
@@ -20,11 +20,7 @@ function ChargeEdit() {
     penaltyAmountEdit: false,
   });
 
-  const [notification, setNotification] = useState({
-    visible: false,
-    message: "",
-    type: "",
-  });
+  const [notification, setNotification] = useState({ message: "", type: "" });
 
   const { setIsLoading } = useLoading();
   const { t } = useTranslation();
@@ -36,7 +32,10 @@ function ChargeEdit() {
     const fetchCharges = async () => {
       try {
         setIsLoading(true);
-        const response = await lockerService.getCharges(productCode, interestCategory);
+        const response = await lockerService.getCharges(
+          productCode,
+          interestCategory
+        );
         if (response.status === 200) {
           const { rent, penalty } = response.data;
           setChargeDetails({
@@ -47,7 +46,6 @@ function ChargeEdit() {
           });
         } else {
           setNotification({
-            visible: true,
             message: response.data.message,
             type: "error",
           });
@@ -55,7 +53,6 @@ function ChargeEdit() {
       } catch (error) {
         console.error(error);
         setNotification({
-          visible: true,
           message: error.message,
           type: "error",
         });
@@ -114,13 +111,11 @@ function ChargeEdit() {
       );
       if (response.status === 200) {
         setNotification({
-          visible: true,
           message: response.data.message,
           type: "success",
         });
       } else {
         setNotification({
-          visible: true,
           message: response.data.message,
           type: "error",
         });
@@ -128,7 +123,6 @@ function ChargeEdit() {
     } catch (error) {
       console.error(error);
       setNotification({
-        visible: true,
         message: error.message,
         type: "error",
       });
@@ -167,7 +161,7 @@ function ChargeEdit() {
   return (
     <div>
       <AnimatePresence>
-        {notification.visible && <Notification notification={notification} />}
+        {notification.message !== "" && <Notification {...notification} />}
       </AnimatePresence>
       <div className="relative">
         {notification.type === "success" && (
diff --git a/src/pages/CheckInOutLog.jsx b/src/pages/CheckInOutLog.jsx
index 3d673a8..ecb28b1 100644
--- a/src/pages/CheckInOutLog.jsx
+++ b/src/pages/CheckInOutLog.jsx
@@ -10,10 +10,7 @@ import { useLoading } from "../hooks/useLoading";
 function CheckInOutLog() {
   const [time, setTime] = useState(null);
   const [checkType, setCheckType] = useState("");
-  const [notification, setNotification] = useState({
-    message: "",
-    type: "",
-  });
+  const [notification, setNotification] = useState({ message: "", type: "" });
 
   const location = useLocation();
   const showToast = useToast();
@@ -29,7 +26,11 @@ function CheckInOutLog() {
     // Add your logic here
     try {
       setIsLoading(true);
-      const response = await lockerService.checkInOut(accountNumber, time, checkType);
+      const response = await lockerService.checkInOut(
+        accountNumber,
+        time,
+        checkType
+      );
       if (response.status === 200) {
         setNotification({ message: response.data.message, type: "success" });
       } else {
@@ -42,7 +43,7 @@ function CheckInOutLog() {
     } finally {
       setIsLoading(false);
     }
-  }
+  };
 
   return (
     <div>
@@ -80,7 +81,7 @@ function CheckInOutLog() {
             </select>
           </div>
         </div>
-        <Button text="Submit" onClick={handleSubmit}/>
+        <Button text="Submit" onClick={handleSubmit} />
       </FormBox>
     </div>
   );
diff --git a/src/pages/KeySwap.jsx b/src/pages/KeySwap.jsx
index 2add86b..f7ac568 100644
--- a/src/pages/KeySwap.jsx
+++ b/src/pages/KeySwap.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import { AnimatePresence } from "motion/react";
 import { useTranslation } from "react-i18next";
 import { useToast } from "../hooks/useToast";
 import { useLoading } from "../hooks/useLoading";
@@ -10,17 +10,13 @@ import Button from "../components/Button";
 import { lockerService } from "../services/locker.service";
 import clsx from "clsx";
 import FormBox from "../components/FormBox";
-import { Copy } from "lucide-react";
+import Notification from "../components/Notification";
 
 function KeySwap() {
   const { t } = useTranslation();
   const showToast = useToast();
   const { isLoading, setIsLoading } = useLoading();
-  const [notification, setNotification] = useState({
-    visible: false,
-    message: "",
-    type: "",
-  });
+  const [notification, setNotification] = useState({ message: "", type: "" });
   const [keySwapDetails, setKeySwapDetails] = useState({
     cabinetId: "",
     lockerId: "",
@@ -117,20 +113,17 @@ function KeySwap() {
       );
       if (response.status === 200) {
         setNotification({
-          visible: true,
           message: response.data.message,
           type: "success",
         });
       } else {
         setNotification({
-          visible: true,
           message: response.data.message,
           type: "error",
         });
       }
     } catch (error) {
       setNotification({
-        visible: true,
         message: error.message,
         type: "error",
       });
@@ -169,51 +162,22 @@ function KeySwap() {
 
   return (
     <div>
-    <AnimatePresence>
-    {notification.visible && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className={clsx(
-              "p-4 mb-8 font-body text-center text-lg rounded-2xl flex items-center justify-center gap-2",
-              notification.type === "error"
-                ? "bg-error-surface text-error"
-                : "bg-success-surface text-success"
-            )}
-          >
-            {notification.message.split(":").map((msg, index) => {
-              return index === 1 ? (
-                <span key={index} className="border-b border-dashed">
-                  {msg}
-                </span>
-              ) : (
-                <span key={index}>{msg}</span>
-              );
-            })}
-            <Copy
-              cursor={"pointer"}
-              size={15}
-              onClick={navigator.clipboard.writeText(
-                notification.message.split(":")[1].trim()
-              )}
-            />
-          </motion.div>
+      <AnimatePresence>
+        {notification.message !== "" && <Notification {...notification} />}
+      </AnimatePresence>
+      <div className="relative">
+        {notification.type === "success" && (
+          <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
         )}
-    </AnimatePresence>
-    <div className="relative">
-    {notification.type === "success" && (
-        <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
-      )}
-    <FormBox title={t("lockerStatus")}>
-      <div className="p-2 pt-7 flex flex-col gap-4">
-        {formFields.map(renderField)}
+        <FormBox title={t("lockerStatus")}>
+          <div className="p-2 pt-7 flex flex-col gap-4">
+            {formFields.map(renderField)}
+          </div>
+          <Button text={t("submit")} onClick={handleKeySwap} />
+        </FormBox>
       </div>
-      <Button text={t("submit")} onClick={handleKeySwap} />
-    </FormBox>
     </div>
-  </div>
-  )
+  );
 }
 
 export default KeySwap;
diff --git a/src/pages/LockerStatus.jsx b/src/pages/LockerStatus.jsx
index cab2580..41990b4 100644
--- a/src/pages/LockerStatus.jsx
+++ b/src/pages/LockerStatus.jsx
@@ -24,11 +24,7 @@ function LockerStatus() {
     statusValid: true,
   });
   const { isLoading, setIsLoading } = useLoading();
-  const [notification, setNotification] = useState({
-    visible: false,
-    message: "",
-    type: "",
-  });
+  const [notification, setNotification] = useState({ message: "", type: "" });
 
   const formFields = [
     {
@@ -89,13 +85,11 @@ function LockerStatus() {
         lockerDetails.status
       );
       setNotification({
-        visible: true,
         message: response.data.message,
         type: "success",
       });
     } catch (error) {
       setNotification({
-        visible: true,
         message: error.message,
         type: "error",
       });
@@ -135,18 +129,18 @@ function LockerStatus() {
   return (
     <div>
       <AnimatePresence>
-        {notification.visible && <Notification notification={notification} />}
+        {notification.message !== "" && <Notification {...notification} />}
       </AnimatePresence>
       <div className="relative">
-      {notification.type === "success" && (
+        {notification.type === "success" && (
           <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
         )}
-      <FormBox title={t("lockerStatus")}>
-        <div className="p-2 pt-7 flex flex-col gap-4">
-          {formFields.map(renderField)}
-        </div>
-        <Button text={t("submit")} onClick={handleSubmit} />
-      </FormBox>
+        <FormBox title={t("lockerStatus")}>
+          <div className="p-2 pt-7 flex flex-col gap-4">
+            {formFields.map(renderField)}
+          </div>
+          <Button text={t("submit")} onClick={handleSubmit} />
+        </FormBox>
       </div>
     </div>
   );
diff --git a/src/pages/LockersRegistration.jsx b/src/pages/LockersRegistration.jsx
index afc274d..8f72406 100644
--- a/src/pages/LockersRegistration.jsx
+++ b/src/pages/LockersRegistration.jsx
@@ -17,7 +17,6 @@ function LockersRegistration() {
   const cabinetId = location.state?.cabinetId;
   const [submitting, setSubmitting] = useState(false);
   const [notification, setNotification] = useState({
-    visible: false,
     message: "",
     type: "",
   });
@@ -109,14 +108,12 @@ function LockersRegistration() {
         lockerValues
       );
       setNotification({
-        visible: true,
         message: `Cabinet creation successful. Cabinet ID: ${response.data.cabinetId}`,
         type: "success",
       });
     } catch (error) {
       console.error(error);
       setNotification({
-        visible: true,
         message: `Error registering lockers. ${error.message}`,
         type: "error",
       });
@@ -207,7 +204,7 @@ function LockersRegistration() {
   return (
     <div>
       <AnimatePresence>
-        {notification.visible && <Notification notification={notification} />}
+        {notification.message !== "" && <Notification {...notification} />}
       </AnimatePresence>
       <div className="relative">
         {notification.type === "success" && (