diff --git a/src/components/Notification.jsx b/src/components/Notification.jsx
new file mode 100644
index 0000000..93141c1
--- /dev/null
+++ b/src/components/Notification.jsx
@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import { Copy } from "lucide-react";
+import { motion } from "motion/react";
+import PropTypes from "prop-types";
+
+function Notification({ notification }) {
+return <motion.div
+    initial={{ y: 15, opacity: 0 }}
+    animate={{ y: 0, opacity: 1 }}
+    exit={{ y: 15, opacity: 0 }}
+    className={clsx(
+        "p-2 pl-8 mb-8 font-body text-lg border-2 rounded-3xl flex items-center gap-2",
+        notification.type === "error"
+            ? "bg-error-surface text-white border-error"
+            : notification.type === "success"
+            ? "bg-success text-white border-green-700"
+            : notification.type === "warning"
+            ? "bg-warning-surface text-white border-warning"
+            : ""
+    )}
+>
+    {notification.message.split(":").map((msg, index) => {
+        return index === 1 ? (
+            <span key={index} className="border-b border-dashed">
+                {msg}
+            </span>
+        ) : (
+            <span key={index}>{msg}</span>
+        );
+    })}
+    {notification.message.split(":")[1] && (
+        <Copy
+            cursor={"pointer"}
+            size={15}
+            onClick={navigator.clipboard.writeText(
+                notification.message.split(":")[1].trim()
+            )}
+        />
+    )}
+</motion.div>;
+}
+
+Notification.propTypes = {
+  notification: PropTypes.shape({
+    visible: PropTypes.bool,
+    message: PropTypes.string,
+    type: PropTypes.string,
+  }),
+};
+
+export default Notification;
diff --git a/src/main.jsx b/src/main.jsx
index 3f27c52..cab5c4e 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -14,8 +14,7 @@ import LockerStatus from "./pages/LockerStatus.jsx";
 import KeySwap from "./pages/KeySwap.jsx";
 import ChargeManagement from "./pages/ChargeManagement.jsx";
 import ChargeEdit from "./pages/ChargeEdit.jsx";
-import Placeholder from "./pages/Placeholder.jsx";
-
+import CheckInOut from "./pages/CheckInOut.jsx";
 
 const router = createBrowserRouter([
   {
@@ -64,7 +63,7 @@ const router = createBrowserRouter([
       },
       {
         path: "operation/check-in-out",
-        element: <Placeholder />
+        element: <CheckInOut />
       }
     ],
   },
diff --git a/src/pages/CheckInOut.jsx b/src/pages/CheckInOut.jsx
new file mode 100644
index 0000000..620fec8
--- /dev/null
+++ b/src/pages/CheckInOut.jsx
@@ -0,0 +1,89 @@
+import FormBox from "../components/FormBox";
+import { useState } from "react";
+import FormField from "../components/FormField";
+import FormInput from "../components/FormInput";
+import { Search } from "lucide-react";
+import Button from "../components/Button";
+import { AnimatePresence } from "motion/react";
+import Notification from "../components/Notification";
+import { useToast } from "../hooks/useToast";
+import { lockerService } from "../services/locker.service";
+import { useLoading } from "../hooks/useLoading";
+
+function CheckInOutManagement() {
+  const [accountNumber, setAccountNumber] = useState("");
+  const [notification, setNotification] = useState({
+    visible: false,
+    message: "",
+    type: "",
+  });
+
+  const showToast = useToast();
+  const { setIsLoading } = useLoading();
+
+  const handleNext = async (e) => {
+    e.preventDefault();
+    if (accountNumber === "") {
+      showToast("Account Number is required", "error");
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await lockerService.preCheckIn(accountNumber);
+      console.log(response.data);
+      if (response.status === 200) {
+        const data = response.data;
+        if (data.code === 1) {
+          setNotification({
+            visible: true,
+            message: "Account is valid. Please proceed to the next step.",
+            type: "success",
+          });
+        } else if (data.code === 2) {
+          setNotification({
+            visible: true,
+            message:
+              "Monthly access limit exceeded. A fine will be charged for each additional access.",
+            type: "warning",
+          });
+        } else if (data.code === 3) {
+          setNotification({
+            visible: true,
+            message:
+              "Rent for this account is due. Please pay the rent amount in full to access the locker.",
+            type: "error",
+          });
+        }
+      }
+    } catch (error) {
+      console.log(error);
+      setNotification(error.message, "error");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <div>
+      <AnimatePresence>
+        {notification.visible && <Notification notification={notification} />}
+      </AnimatePresence>
+      <FormBox title="Check In/Out">
+        <div className="p-2 pt-7">
+          <FormField
+            label="Account Number"
+            icon={{ icon: <Search size={17} />, onClick: () => {} }}
+          >
+            <FormInput
+              type="text"
+              value={accountNumber}
+              onChange={(e) => setAccountNumber(e.target.value)}
+            />
+          </FormField>
+        </div>
+        <Button text="Next" onClick={handleNext} />
+      </FormBox>
+    </div>
+  );
+}
+
+export default CheckInOutManagement;
diff --git a/src/services/locker.service.js b/src/services/locker.service.js
index 771df0b..3ddf7ec 100644
--- a/src/services/locker.service.js
+++ b/src/services/locker.service.js
@@ -26,5 +26,9 @@ export const lockerService = {
 
   getCharges: async (productCode, interestCategory) => {
     return api.get(`/charge/${productCode}${interestCategory}`);
+  },
+
+  preCheckIn: async (accountNumber) => {
+    return api.post(`/pre-checkin/${accountNumber}`);
   }
 };
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index da19a89..17c6fe1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,18 +11,18 @@ export default {
       black: '#000000',
       grey: '#979797',
       error: {
-        DEFAULT: '#E5254B',
+        DEFAULT: '#A14444',
         dark: '#E5254B',
-        surface: {DEFAULT: '#FCE9ED', dark: '#FCE9ED'}
+        surface: {DEFAULT: '#D26464', dark: '#FCE9ED'}
       },
       onToast: {
         DEFAULT: '#646564',
         dark: '#646564',
       },
       warning: {
-        DEFAULT: '#EA7000',
+        DEFAULT: '#A5A513',
         dark: '#EA7000',
-        surface: {DEFAULT: '#FDF1E5', dark: '#FDF1E5'}
+        surface: {DEFAULT: '#C8C820', dark: '#FDF1E5'}
       },
       success: {
         DEFAULT: '#038100',