diff --git a/package.json b/package.json
index 4204c8f..80b7c88 100755
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@trpc/client": "11.0.0-rc.370",
     "@trpc/react-query": "11.0.0-rc.370",
     "@trpc/server": "11.0.0-rc.370",
+    "@types/date-fns": "^2.5.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
@@ -50,6 +51,7 @@
     "react-redux": "^9.1.2",
     "server-only": "^0.0.1",
     "smovidyaparcel": ".",
+    "smovidyaparcel": ".",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/app/_components/statusbox.tsx b/src/app/_components/statusbox.tsx
index d732ea4..57647ca 100755
--- a/src/app/_components/statusbox.tsx
+++ b/src/app/_components/statusbox.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { useRouter } from "next/navigation";
 import { api } from "~/trpc/react";
-
 import {
   Table,
   TableBody,
@@ -14,7 +13,7 @@ import { type Parcellist } from "~/lib/constant";
 import Image from "next/image";
 import { Button } from "~/components/ui/button";
 import { format } from "date-fns";
-import { useState } from "react"; // Import useState hook
+import { useState, useEffect } from "react";
 
 interface Props {
   parcelslist: Parcellist;
@@ -23,25 +22,42 @@ interface Props {
 
 export const Statuesbox = ({ parcelslist, student_id }: Props) => {
   const router = useRouter();
+  const [loadingProjectId, setLoadingProjectId] = useState<string | null>(null);
+  const [updatedProjectIds, setUpdatedProjectIds] = useState<string[]>([]);
+  const [showUpdateStatus, setShowUpdateStatus] = useState<boolean>(true);
+
   const updateparcel = api.parcel_Project.updatestatus.useMutation({
     onSuccess: () => {
+      if (loadingProjectId) {
+        setUpdatedProjectIds((prev) => [...prev, loadingProjectId]);
+      }
+      setLoadingProjectId(null);
       router.refresh();
     },
     onError: (error) => {
       console.error("Booking error:", error);
+      setLoadingProjectId(null); // Reset loading state in case of error
     },
   });
 
-  // State to track expanded parcels
   const [expandedProjectIds, setExpandedProjectIds] = useState<string[]>([]);
 
   async function Updatestatus(project_id: string) {
+    setLoadingProjectId(project_id); // Set loading state when starting the update
     updateparcel.mutate({
       student_id: student_id,
       project_id: project_id,
     });
   }
 
+  useEffect(() => {
+    const hasBorrowingStatus = Object.values(parcelslist).some((parcels) =>
+      parcels.some((parcel) => parcel.status === "BORROWING"),
+    );
+
+    setShowUpdateStatus(hasBorrowingStatus); // Show update status only if there are borrowing items
+  }, [parcelslist]);
+
   const renderedCards = [];
 
   for (const projectId in parcelslist) {
@@ -49,6 +65,8 @@ export const Statuesbox = ({ parcelslist, student_id }: Props) => {
 
     if (parcels !== undefined) {
       const isExpanded = expandedProjectIds.includes(projectId);
+      const isLoading = loadingProjectId === projectId;
+      const isUpdated = updatedProjectIds.includes(projectId);
 
       const shownParcels = isExpanded ? parcels : parcels.slice(0, 3);
 
@@ -68,7 +86,7 @@ export const Statuesbox = ({ parcelslist, student_id }: Props) => {
           <TableBody>
             {Array.isArray(shownParcels) &&
               shownParcels.map((parcel) => (
-                <TableRow className="" key={parcel.project_id}>
+                <TableRow key={parcel.project_id}>
                   <TableCell>
                     <div>
                       <Image
@@ -82,7 +100,7 @@ export const Statuesbox = ({ parcelslist, student_id }: Props) => {
                   </TableCell>
                   <TableCell className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
                     <div className="h-30 grid grid-rows-4 text-left">
-                      <div className="">
+                      <div>
                         {parcel.parcel_id} | {parcel.parcel.title}
                       </div>
                       <div className="row-start-2 row-end-4 text-gray-500">
@@ -130,7 +148,6 @@ export const Statuesbox = ({ parcelslist, student_id }: Props) => {
                     วันสุดท้ายของการคืนพัสดุ <br />
                   </p>
                   <p className="row-start-2 py-1 text-sm text-red-500">
-                    {" "}
                     {parcels[0]?.endDate.toISOString()} <br />
                     <br />
                   </p>
@@ -159,14 +176,21 @@ export const Statuesbox = ({ parcelslist, student_id }: Props) => {
                   </div>
                   <div className="row-start-3">
                     <Button
-                      className="bg-yellow-400"
+                      className={`bg-yellow-400 ${
+                        !showUpdateStatus ? "bg-gray-400" : ""
+                      }`}
                       type="button"
+                      disabled={isLoading || !showUpdateStatus}
                       onClick={() =>
                         parcels[0]?.project_id &&
                         Updatestatus(parcels[0]?.project_id)
                       }
                     >
-                      ได้รับพัสดุเรียบร้อยแล้ว
+                      {!showUpdateStatus
+                        ? "สถานะอัพเดตแล้ว"
+                        : isLoading
+                          ? "Loading..."
+                          : "ได้รับพัสดุเรียบร้อยแล้ว"}
                     </Button>
                   </div>
                 </div>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 1b72eb6..c0dddf8 100755
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -11,8 +11,8 @@ const LoginPage = () => {
   };
 
   // Version and deployment date
-  const version = "1.2.1";
-  const deploymentDate = "Aug 19, 2024";
+  const version = "1.3.0";
+  const deploymentDate = "Sep 3, 2024";
 
   return (
     <div className="grid h-screen w-screen md:grid-cols-5">