diff --git a/src/main.jsx b/src/main.jsx
index 6a8cc5c..4e7e128 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -15,7 +15,7 @@ import KeySwap from "./pages/KeySwap.jsx";
 import ChargeManagement from "./pages/ChargeManagement.jsx";
 import ChargeEdit from "./pages/ChargeEdit.jsx";
 import CheckInOutManagement from "./pages/CheckInOutManagement.jsx";
-import Placeholder from "./pages/Placeholder.jsx";
+import CheckInOutLog from "./pages/CheckInOutLog.jsx";
 
 const router = createBrowserRouter([
   {
@@ -68,7 +68,7 @@ const router = createBrowserRouter([
       },
       {
         path: "operation/check-in-out/log",
-        element: <Placeholder />
+        element: <CheckInOutLog />
       }
     ],
   },
diff --git a/src/pages/CheckInOutLog.jsx b/src/pages/CheckInOutLog.jsx
new file mode 100644
index 0000000..3d673a8
--- /dev/null
+++ b/src/pages/CheckInOutLog.jsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import FormBox from "../components/FormBox";
+import Button from "../components/Button";
+import Notification from "../components/Notification";
+import { lockerService } from "../services/locker.service";
+import { useToast } from "../hooks/useToast";
+import { useLoading } from "../hooks/useLoading";
+
+function CheckInOutLog() {
+  const [time, setTime] = useState(null);
+  const [checkType, setCheckType] = useState("");
+  const [notification, setNotification] = useState({
+    message: "",
+    type: "",
+  });
+
+  const location = useLocation();
+  const showToast = useToast();
+  const { setIsLoading } = useLoading();
+  const accountNumber = location.state?.accountNumber;
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (time === null || checkType === "") {
+      showToast("Please fill in all fields", "error");
+      return;
+    }
+    // Add your logic here
+    try {
+      setIsLoading(true);
+      const response = await lockerService.checkInOut(accountNumber, time, checkType);
+      if (response.status === 200) {
+        setNotification({ message: response.data.message, type: "success" });
+      } else {
+        console.log(response);
+        setNotification({ message: response.data.message, type: "error" });
+      }
+    } catch (error) {
+      console.log(error);
+      setNotification({ message: error.message, type: "error" });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div>
+      {notification.message !== "" && <Notification {...notification} />}
+      <FormBox title="Check In/Out Log">
+        <div className="px-4 pt-7 text-2xl font-display font-bold text-primary dark:text-primary-dark">
+          {accountNumber}
+        </div>
+        <div className="p-2 pt-7 flex flex-col gap-4">
+          <div className="flex">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+              Time
+            </label>
+            <input
+              type="time"
+              className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey text-black"
+              onChange={(e) => setTime(e.target.value)}
+              value={time}
+            />
+          </div>
+          <div className="flex">
+            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
+              Check Type
+            </label>
+            <select
+              className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey"
+              onChange={(e) => setCheckType(e.target.value)}
+              value={checkType}
+            >
+              <option value="" disabled>
+                Select
+              </option>
+              <option value="check-in">Check In</option>
+              <option value="check-out">Check Out</option>
+            </select>
+          </div>
+        </div>
+        <Button text="Submit" onClick={handleSubmit}/>
+      </FormBox>
+    </div>
+  );
+}
+
+export default CheckInOutLog;
diff --git a/src/services/locker.service.js b/src/services/locker.service.js
index 3ddf7ec..2e61a00 100644
--- a/src/services/locker.service.js
+++ b/src/services/locker.service.js
@@ -1,14 +1,14 @@
-import api from './api';
+import api from "./api";
 
 export const lockerService = {
   registerLockers: async (cabinetId, lockers) => {
-    return api.post('/cabinet', {
+    return api.post("/cabinet", {
       cabinetId,
       lockers: lockers.map(({ id, size, keyId }) => ({
         id,
         size,
-        keyId
-      }))
+        keyId,
+      })),
     });
   },
 
@@ -17,11 +17,20 @@ export const lockerService = {
   },
 
   keySwap: async (cabinetId, lockerId, reason, oldKey, newKey) => {
-    return api.patch(`/locker/key`, { cabinetId, lockerId, reason, oldKey, newKey });
+    return api.patch(`/locker/key`, {
+      cabinetId,
+      lockerId,
+      reason,
+      oldKey,
+      newKey,
+    });
   },
 
   updateCharges: async (productCode, interestCategory, rent, penalty) => {
-    return api.patch(`/charge/${productCode}${interestCategory}`, { rent, penalty });
+    return api.patch(`/charge/${productCode}${interestCategory}`, {
+      rent,
+      penalty,
+    });
   },
 
   getCharges: async (productCode, interestCategory) => {
@@ -30,5 +39,9 @@ export const lockerService = {
 
   preCheckIn: async (accountNumber) => {
     return api.post(`/pre-checkin/${accountNumber}`);
-  }
-};
\ No newline at end of file
+  },
+
+  checkInOut: async (accountNumber, time, checkType) => {
+    return api.post(`/check-in-out/${accountNumber}`, { time, checkType });
+  },
+};