diff --git a/frontend/src/components/ocme/ocmeCycleCount.tsx b/frontend/src/components/ocme/ocmeCycleCount.tsx
index 71c4348..9b8c33e 100644
--- a/frontend/src/components/ocme/ocmeCycleCount.tsx
+++ b/frontend/src/components/ocme/ocmeCycleCount.tsx
@@ -1,185 +1,213 @@
-import {toast} from "sonner";
-import {LstCard} from "../extendedUI/LstCard";
-import {Button} from "../ui/button";
-import {Input} from "../ui/input";
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "../ui/table";
-import {Skeleton} from "../ui/skeleton";
+import { toast } from "sonner";
+import { LstCard } from "../extendedUI/LstCard";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { Skeleton } from "../ui/skeleton";
 //import CycleCountLog from "./CycleCountLog";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "../ui/select";
-import {Controller, useForm} from "react-hook-form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { Controller, useForm } from "react-hook-form";
 import axios from "axios";
-import {useState} from "react";
+import { useState } from "react";
 
 export default function OcmeCycleCount() {
-    const token = localStorage.getItem("auth_token");
-    const [data, setData] = useState([]);
-    const [counting, setCounting] = useState(false);
-    const {
-        register,
-        handleSubmit,
-        //watch,
-        formState: {errors},
-        reset,
-        control,
-    } = useForm();
+  const token = localStorage.getItem("auth_token");
+  const [data, setData] = useState([]);
+  const [counting, setCounting] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    //watch,
+    formState: { errors },
+    reset,
+    control,
+  } = useForm();
 
-    const onSubmit = async (data: any) => {
-        setData([]);
-        setCounting(true);
-        toast.success(`Cycle count started`);
-        try {
-            const res = await axios.post("/ocme/api/v1/cyclecount", data, {
-                headers: {Authorization: `Bearer ${token}`},
-            });
-            toast.success(res.data.message);
-            setData(res.data.data);
-            setCounting(false);
-            reset();
-        } catch (error) {
-            toast.error("There was an error cycle counting");
-            setCounting(false);
-            reset();
-        }
-    };
-    return (
-        <div className="flex flex-row w-screen">
-            <div className="m-2 w-5/6">
-                <LstCard>
-                    <p className="ml-2">Please enter the name or laneID you want to cycle count.</p>
-                    <div>
-                        <form onSubmit={handleSubmit(onSubmit)}>
-                            <div className="flex justify-between">
-                                <div className="m-2 flex flex-row">
-                                    <Input
-                                        placeholder="enter lane: L064"
-                                        className={errors.lane ? "border-red-500" : ""}
-                                        aria-invalid={!!errors.lane}
-                                        {...register("lane", {
-                                            required: true,
-                                            minLength: {
-                                                value: 3,
-                                                message: "The lane is too short!",
-                                            },
-                                        })}
-                                    />
-                                    <div className="ml-2">
-                                        <Controller
-                                            control={control}
-                                            name="laneType"
-                                            defaultValue={""}
-                                            render={({
-                                                field: {onChange},
-                                                fieldState: {},
-                                                //formState,
-                                            }) => (
-                                                <Select onValueChange={onChange}>
-                                                    <SelectTrigger className="w-[180px]">
-                                                        <SelectValue placeholder="Select name or id" />
-                                                    </SelectTrigger>
-                                                    <SelectContent>
-                                                        <SelectItem value="name">Name</SelectItem>
-                                                        <SelectItem value="laneId">Lane ID</SelectItem>
-                                                    </SelectContent>
-                                                </Select>
-                                            )}
-                                        />
-                                    </div>
-                                </div>
-                                <Button className="m-2" type="submit" disabled={counting}>
-                                    {counting ? <span>Counting...</span> : <span>CycleCount</span>}
-                                </Button>
-                            </div>
-                        </form>
-                    </div>
-                    <div>
-                        <Table>
-                            <TableHeader>
-                                <TableRow>
-                                    <TableHead>LaneID</TableHead>
-                                    <TableHead>Lane</TableHead>
-                                    <TableHead>AV</TableHead>
-                                    <TableHead>Description</TableHead>
-                                    <TableHead>Running Number</TableHead>
-                                    <TableHead>In Ocme</TableHead>
-                                    <TableHead>In Stock</TableHead>
-                                    <TableHead>Result</TableHead>
-                                </TableRow>
-                            </TableHeader>
-                            {data.length === 0 ? (
-                                <TableBody>
-                                    {Array(10)
-                                    .fill(0)
-                                    .map((_, i) => (
-                                        <TableRow key={i}>
-                                            <TableCell className="font-medium">
-                                                <Skeleton className="h-4" />
-                                            </TableCell>
-                                            <TableCell>
-                                                <Skeleton className="h-4" />
-                                            </TableCell>
-                                            <TableCell>
-                                                <Skeleton className="h-4" />
-                                            </TableCell>
-                                            <TableCell>
-                                                <Skeleton className="h-4" />
-                                            </TableCell>
-                                            <TableCell>
-                                                <Skeleton className="h-4" />
-                                            </TableCell>
-                                            <TableCell>
-                                                <Skeleton className="h-4" />
-                                            </TableCell>
-                                            <TableCell>
-                                                <Skeleton className="h-4" />
-                                            </TableCell>
-                                            <TableCell>
-                                                <Skeleton className="h-4" />
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            ) : (
-                                <>
-                                    {data.map((i: any) => {
-                                        let classname = ``;
-                                        if (i.info === "Quality Check Required") {
-                                            classname = `bg-red-500`;
-                                        }
-                                        if (i.info === "Sent to Inv") {
-                                            classname = `bg-amber-700`;
-                                        }
-                                        return (
-                                            <TableRow key={i.runningNumber}>
-                                                <TableCell className={`font-medium ${classname}`}>
-                                                    {i.alpla_laneID}
-                                                </TableCell>
-                                                <TableCell className={`font-medium ${classname}`}>
-                                                    {i.alpla_laneDescription}
-                                                </TableCell>
-                                                <TableCell className={`font-medium ${classname}`}>
-                                                    {i.Article}
-                                                </TableCell>
-                                                <TableCell className={`font-medium ${classname}`}>
-                                                    {i.alpla_laneDescription}
-                                                </TableCell>
-                                                <TableCell className={`font-medium ${classname}`}>
-                                                    {i.runningNumber}
-                                                </TableCell>
-                                                <TableCell className={`font-medium ${classname}`}>{i.ocme}</TableCell>
-                                                <TableCell className={`font-medium ${classname}`}>{i.stock}</TableCell>
-                                                <TableCell className={`font-medium ${classname}`}>{i.info}</TableCell>
-                                            </TableRow>
-                                        );
-                                    })}
-                                </>
-                            )}
-                        </Table>
-                    </div>
-                </LstCard>
-            </div>
-            {/* <div className="m-2">
+  const onSubmit = async (data: any) => {
+    setData([]);
+    setCounting(true);
+    toast.success(`Cycle count started`);
+    try {
+      const res = await axios.post("/ocme/api/v1/cycleCount", data, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      console.log(data);
+      toast.success(res.data.message);
+      setData(res.data.data);
+      setCounting(false);
+      reset();
+    } catch (error) {
+      console.log(error);
+      toast.error("There was an error cycle counting");
+      setCounting(false);
+      reset();
+    }
+  };
+
+  return (
+    <div className="flex flex-row w-screen">
+      <div className="m-2 w-5/6">
+        <LstCard>
+          <p className="ml-2">
+            Please enter the name or laneID you want to cycle count.
+          </p>
+          <div>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <div className="flex justify-between">
+                <div className="m-2 flex flex-row">
+                  <Input
+                    placeholder="enter lane: L064"
+                    className={errors.lane ? "border-red-500" : ""}
+                    aria-invalid={!!errors.lane}
+                    {...register("lane", {
+                      required: true,
+                      minLength: {
+                        value: 3,
+                        message: "The lane is too short!",
+                      },
+                    })}
+                  />
+                  <div className="ml-2">
+                    <Controller
+                      control={control}
+                      name="laneType"
+                      defaultValue={""}
+                      render={({
+                        field: { onChange },
+                        fieldState: {},
+                        //formState,
+                      }) => (
+                        <Select onValueChange={onChange}>
+                          <SelectTrigger className="w-[180px]">
+                            <SelectValue placeholder="Select name or id" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="name">Name</SelectItem>
+                            <SelectItem value="laneID">Lane ID</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
+                  </div>
+                </div>
+                <Button className="m-2" type="submit" disabled={counting}>
+                  {counting ? (
+                    <span>Counting...</span>
+                  ) : (
+                    <span>CycleCount</span>
+                  )}
+                </Button>
+              </div>
+            </form>
+          </div>
+          <div>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>LaneID</TableHead>
+                  <TableHead>Lane</TableHead>
+                  <TableHead>AV</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead>Running Number</TableHead>
+                  <TableHead>In Ocme</TableHead>
+                  <TableHead>In Stock</TableHead>
+                  <TableHead>Result</TableHead>
+                </TableRow>
+              </TableHeader>
+              {data?.length === 0 ? (
+                <TableBody>
+                  {Array(10)
+                    .fill(0)
+                    .map((_, i) => (
+                      <TableRow key={i}>
+                        <TableCell className="font-medium">
+                          <Skeleton className="h-4" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4" />
+                        </TableCell>
+                        <TableCell>
+                          <Skeleton className="h-4" />
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                </TableBody>
+              ) : (
+                <>
+                  {data?.map((i: any) => {
+                    let classname = ``;
+                    if (i.info === "Quality Check Required") {
+                      classname = `bg-red-500`;
+                    }
+                    if (i.info === "Sent to Inv") {
+                      classname = `bg-amber-700`;
+                    }
+                    return (
+                      <TableRow key={i.runningNumber}>
+                        <TableCell className={`font-medium ${classname}`}>
+                          {i.alpla_laneID}
+                        </TableCell>
+                        <TableCell className={`font-medium ${classname}`}>
+                          {i.alpla_laneDescription}
+                        </TableCell>
+                        <TableCell className={`font-medium ${classname}`}>
+                          {i.Article}
+                        </TableCell>
+                        <TableCell className={`font-medium ${classname}`}>
+                          {i.alpla_laneDescription}
+                        </TableCell>
+                        <TableCell className={`font-medium ${classname}`}>
+                          {i.runningNumber}
+                        </TableCell>
+                        <TableCell className={`font-medium ${classname}`}>
+                          {i.ocme}
+                        </TableCell>
+                        <TableCell className={`font-medium ${classname}`}>
+                          {i.stock}
+                        </TableCell>
+                        <TableCell className={`font-medium ${classname}`}>
+                          {i.info}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </>
+              )}
+            </Table>
+          </div>
+        </LstCard>
+      </div>
+      {/* <div className="m-2">
                 <CycleCountLog />
             </div> */}
-        </div>
-    );
+    </div>
+  );
 }