diff --git a/app/dashboard/orders/[id]/page.tsx b/app/dashboard/orders/[id]/page.tsx
index 74af874..f6dc233 100644
--- a/app/dashboard/orders/[id]/page.tsx
+++ b/app/dashboard/orders/[id]/page.tsx
@@ -46,6 +46,21 @@ interface Order {
   trackingNumber?: string;
 }
 
+const getStatusVariant = (status: string) => {
+  switch (status) {
+    case 'paid':
+      return 'paid';
+    case 'shipped':
+      return 'shipped';
+    case 'completed':
+      return 'completed';
+    case 'cancelled':
+      return 'destructive';
+    default:
+      return 'unpaid';
+  }
+};
+
 export default function OrderDetailsPage() {
   const [order, setOrder] = useState<Order | null>(null);
   const [trackingNumber, setTrackingNumber] = useState("");
@@ -54,6 +69,7 @@ export default function OrderDetailsPage() {
   const [productNames, setProductNames] = useState<Record<string, string>>({});
   const [isPaid, setIsPaid] = useState(false);
   const [isSending, setIsSending] = useState(false);
+  const [isMarkingShipped, setIsMarkingShipped] = useState(false);
 
   const router = useRouter();
   const params = useParams();
@@ -114,6 +130,36 @@ export default function OrderDetailsPage() {
     }
   };
 
+  const handleMarkAsShipped = async () => {
+    try {
+      setIsMarkingShipped(true);
+      const authToken = document.cookie.split("Authorization=")[1];
+      const response = await fetchData(
+        `${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${authToken}`,
+          },
+          body: JSON.stringify({ status: "shipped" }),
+        }
+      );
+
+      if (response && response.message === "Order status updated successfully") {
+        setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "shipped" } : null);
+        toast.success("Order marked as shipped successfully!");
+      } else {
+        throw new Error(response.error || "Failed to mark order as shipped");
+      }
+    } catch (error: any) {
+      console.error("Failed to mark order as shipped:", error);
+      toast.error(error.message || "Failed to mark order as shipped");
+    } finally {
+      setIsMarkingShipped(false);
+    }
+  };
+
   useEffect(() => {
     const fetchOrderDetails = async () => {
       try {
@@ -183,7 +229,7 @@ export default function OrderDetailsPage() {
         trackingNumber: trackingNumber
       } : null);
       
-      toast.success("Tracking number updated and notification sent to customer!");
+      toast.success("Tracking number updated successfully!");
       setTrackingNumber(""); // Clear the input
     } catch (err: any) {
       console.error("Failed to update tracking:", err);
@@ -207,9 +253,11 @@ export default function OrderDetailsPage() {
       <div className="space-y-6">
         <div className="flex justify-between items-center">
           <h1 className="text-3xl font-bold">Order Details: {order?.orderId}</h1>
-          <Badge variant={order?.status === "paid" ? "paid" : "unpaid"}>
-            {order?.status}
-          </Badge>
+          <div className="flex items-center gap-2">
+            <Badge variant={getStatusVariant(order?.status || '')}>
+              {order?.status}
+            </Badge>
+          </div>
         </div>
 
         <div className="grid gap-6 md:grid-cols-2">
@@ -336,9 +384,28 @@ export default function OrderDetailsPage() {
         </div>
 
         <div className="flex justify-end space-x-4">
-          <Button size="lg" onClick={handleMarkAsPaid} disabled={isPaid}>
-            {isPaid ? "Order Marked as Paid" : "Mark Order as Paid"}
-          </Button>
+          {order?.status === "unpaid" && (
+            <Button 
+              size="lg" 
+              onClick={handleMarkAsPaid} 
+              disabled={isPaid}
+              className="bg-emerald-600 hover:bg-emerald-700"
+            >
+              {isPaid ? "Order Marked as Paid" : "Mark Order as Paid"}
+            </Button>
+          )}
+          
+          {order?.status === "paid" && (
+            <Button 
+              size="lg" 
+              onClick={handleMarkAsShipped}
+              disabled={isMarkingShipped}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              <Truck className="w-5 h-5 mr-2" />
+              {isMarkingShipped ? "Updating..." : "Mark as Shipped"}
+            </Button>
+          )}
         </div>
       </div>
     </Layout>
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index 73ae922..8f51932 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -12,9 +12,11 @@ const badgeVariants = cva(
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
-        paid: "border-transparent bg-green-500 text-white hover:bg-green-600",
-        unpaid: "border-transparent bg-red-500 text-white hover:bg-red-600",
-        pending: "border-transparent bg-yellow-500 text-white hover:bg-yellow-600",
+        paid: "border-transparent bg-emerald-500 text-emerald-50",
+        unpaid: "border-transparent bg-amber-500 text-amber-50",
+        shipped: "border-transparent bg-blue-500 text-blue-50",
+        completed: "border-transparent bg-purple-500 text-purple-50",
+        pending: "border-transparent bg-orange-500 text-orange-50"
       },
     },
     defaultVariants: {