diff --git a/src/components/modules/escrow/ui/dialogs/EditMilestonesDialog.tsx b/src/components/modules/escrow/ui/dialogs/EditMilestonesDialog.tsx
index 0c4a9d7..10e1d36 100644
--- a/src/components/modules/escrow/ui/dialogs/EditMilestonesDialog.tsx
+++ b/src/components/modules/escrow/ui/dialogs/EditMilestonesDialog.tsx
@@ -68,8 +68,11 @@ const EditMilestonesDialog = ({
                     <TooltipInfo content="Key stages or deliverables for the escrow." />
                   </FormLabel>
                   {milestones.map((milestone, index) => (
-                    <>
-                      <div key={index} className="flex items-center space-x-4">
+                    <div
+                      key={`milestone-${index}`}
+                      className="flex flex-col gap-4"
+                    >
+                      <div className="flex items-center space-x-4">
                         {milestone.flag ? (
                           <Badge className="uppercase max-w-24">Approved</Badge>
                         ) : (
@@ -117,7 +120,7 @@ const EditMilestonesDialog = ({
                           Add Item
                         </Button>
                       )}
-                    </>
+                    </div>
                   ))}
                 </div>
               </div>
diff --git a/src/components/modules/escrow/ui/dialogs/EscrowDetailDialog.tsx b/src/components/modules/escrow/ui/dialogs/EscrowDetailDialog.tsx
index c276000..bd30235 100644
--- a/src/components/modules/escrow/ui/dialogs/EscrowDetailDialog.tsx
+++ b/src/components/modules/escrow/ui/dialogs/EscrowDetailDialog.tsx
@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import useEscrowDetailDialog from "./hooks/escrow-detail-dialog.hook";
-import { Escrow } from "@/@types/escrow.entity";
+import type { Escrow } from "@/@types/escrow.entity";
 import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import { useFormatUtils } from "@/utils/hook/format.hook";
@@ -38,13 +38,13 @@ import {
   Handshake,
   Wallet,
 } from "lucide-react";
-import SkeletonMilestones from "./utils/SkeletonMilestones";
 import EditMilestonesDialog from "./EditMilestonesDialog";
 import {
   SuccessReleaseDialog,
   SuccessResolveDisputeDialog,
 } from "./SuccessDialog";
 import { toast } from "@/hooks/toast.hook";
+import { useEscrowDialogs } from "./hooks/use-escrow-dialogs.hook";
 
 interface EscrowDetailDialogProps {
   isDialogOpen: boolean;
@@ -58,6 +58,8 @@ const EscrowDetailDialog = ({
   setSelectedEscrow,
 }: EscrowDetailDialogProps) => {
   const selectedEscrow = useGlobalBoundedStore((state) => state.selectedEscrow);
+  const dialogStates = useEscrowDialogs();
+  const activeTab = useEscrowBoundedStore((state) => state.activeTab);
 
   const {
     handleClose,
@@ -72,64 +74,13 @@ const EscrowDetailDialog = ({
 
   const { distributeEscrowEarningsSubmit } =
     useDistributeEarningsEscrowDialogHook();
-
-  const setIsResolveDisputeDialogOpen = useEscrowBoundedStore(
-    (state) => state.setIsResolveDisputeDialogOpen,
-  );
-
   const { handleOpen } = useResolveDisputeEscrowDialogHook({
-    setIsResolveDisputeDialogOpen,
+    setIsResolveDisputeDialogOpen: dialogStates.resolveDispute.setIsOpen,
   });
-
   const { changeMilestoneStatusSubmit } = useChangeStatusEscrowDialogHook();
   const { startDisputeSubmit } = useStartDisputeEscrowDialogHook();
   const { changeMilestoneFlagSubmit } = useChangeFlagEscrowDialogHook();
 
-  const isSecondDialogOpen = useEscrowBoundedStore(
-    (state) => state.isSecondDialogOpen,
-  );
-  const setIsSecondDialogOpen = useEscrowBoundedStore(
-    (state) => state.setIsSecondDialogOpen,
-  );
-  const setIsQRDialogOpen = useEscrowBoundedStore(
-    (state) => state.setIsQRDialogOpen,
-  );
-  const isQRDialogOpen = useEscrowBoundedStore((state) => state.isQRDialogOpen);
-
-  const isChangingStatus = useEscrowBoundedStore(
-    (state) => state.isChangingStatus,
-  );
-
-  const isStartingDispute = useEscrowBoundedStore(
-    (state) => state.isStartingDispute,
-  );
-
-  const isResolveDisputeDialogOpen = useEscrowBoundedStore(
-    (state) => state.isResolveDisputeDialogOpen,
-  );
-
-  const setIsEditMilestoneDialogOpen = useEscrowBoundedStore(
-    (state) => state.setIsEditMilestoneDialogOpen,
-  );
-  const isEditMilestoneDialogOpen = useEscrowBoundedStore(
-    (state) => state.isEditMilestoneDialogOpen,
-  );
-  const isSuccessReleaseDialogOpen = useEscrowBoundedStore(
-    (state) => state.isSuccessReleaseDialogOpen,
-  );
-  const setIsSuccessReleaseDialogOpen = useEscrowBoundedStore(
-    (state) => state.setIsSuccessReleaseDialogOpen,
-  );
-
-  const isSuccessResolveDisputeDialogOpen = useEscrowBoundedStore(
-    (state) => state.isSuccessResolveDisputeDialogOpen,
-  );
-  const setIsSuccessResolveDisputeDialogOpen = useEscrowBoundedStore(
-    (state) => state.setIsSuccessResolveDisputeDialogOpen,
-  );
-
-  const activeTab = useEscrowBoundedStore((state) => state.activeTab);
-
   const { formatAddress, formatText, formatDollar, formatDateFromFirebase } =
     useFormatUtils();
   const { copyText, copiedKeyId } = useCopyUtils();
@@ -196,7 +147,9 @@ const EscrowDetailDialog = ({
                     <Button
                       variant="link"
                       type="button"
-                      onClick={() => setIsSuccessReleaseDialogOpen(true)}
+                      onClick={() =>
+                        dialogStates.successRelease.setIsOpen(true)
+                      }
                       className="text-xs text-muted-foreground my-0 p-0 h-auto"
                     >
                       See Details
@@ -224,7 +177,9 @@ const EscrowDetailDialog = ({
                     <Button
                       variant="link"
                       type="button"
-                      onClick={() => setIsSuccessResolveDisputeDialogOpen(true)}
+                      onClick={() =>
+                        dialogStates.successResolveDispute.setIsOpen(true)
+                      }
                       className="text-xs text-muted-foreground my-0 p-0 h-auto"
                     >
                       See Details
@@ -279,30 +234,31 @@ const EscrowDetailDialog = ({
             <div className="flex flex-col justify-center w-full md:w-1/5">
               <p className="text-center mb-3 text-sm">
                 <span className="uppercase font-bold">Escrow ID:</span>
-                <div className="flex items-center justify-center">
-                  {formatAddress(selectedEscrow.contractId)}
-                  <button
-                    onClick={() =>
-                      copyText(
-                        selectedEscrow?.contractId,
-                        selectedEscrow.contractId,
-                      )
-                    }
-                    className="p-1.5 hover:bg-muted rounded-md transition-colors"
-                    title="Copy Escrow ID"
-                  >
-                    {copiedKeyId ? (
-                      <Check className={cn("h-4 w-4 text-green-700")} />
-                    ) : (
-                      <Copy className={cn("h-4 w-4")} />
-                    )}
-                  </button>
-                </div>
               </p>
+              <div className="flex items-center justify-center">
+                <span>{formatAddress(selectedEscrow.contractId)}</span>
+                <button
+                  type="button"
+                  onClick={() =>
+                    copyText(
+                      selectedEscrow?.contractId,
+                      selectedEscrow.contractId,
+                    )
+                  }
+                  className="p-1.5 hover:bg-muted rounded-md transition-colors"
+                  title="Copy Escrow ID"
+                >
+                  {copiedKeyId ? (
+                    <Check className={cn("h-4 w-4 text-green-700")} />
+                  ) : (
+                    <Copy className={cn("h-4 w-4")} />
+                  )}
+                </button>
+              </div>
               <Button
                 onClick={(e) => {
                   e.stopPropagation();
-                  setIsQRDialogOpen(true);
+                  dialogStates.qr.setIsOpen(true);
                 }}
                 className="w-full mb-3"
                 variant="outline"
@@ -312,7 +268,7 @@ const EscrowDetailDialog = ({
               <Button
                 onClick={(e) => {
                   e.stopPropagation();
-                  setIsSecondDialogOpen(true);
+                  dialogStates.second.setIsOpen(true);
                 }}
                 className="w-full"
               >
@@ -324,7 +280,21 @@ const EscrowDetailDialog = ({
                 !areAllMilestonesCompletedAndFlag &&
                 (activeTab === "approver" || activeTab === "serviceProvider") &&
                 !selectedEscrow.disputeFlag && (
-                  <div
+                  <button
+                    type="button"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        if (Number(selectedEscrow.balance) === 0) {
+                          toast({
+                            title: "Cannot start dispute",
+                            description: "The escrow balance is 0",
+                            variant: "destructive",
+                          });
+                        } else {
+                          startDisputeSubmit();
+                        }
+                      }
+                    }}
                     onClick={() => {
                       if (Number(selectedEscrow.balance) === 0) {
                         toast({
@@ -345,7 +315,7 @@ const EscrowDetailDialog = ({
                     >
                       Start Dispute
                     </Button>
-                  </div>
+                  </button>
                 )}
 
               {userRolesInEscrow.includes("disputeResolver") &&
@@ -395,79 +365,73 @@ const EscrowDetailDialog = ({
               {/* Milestones */}
               <div className="flex justify-center w-full mt-5">
                 <div className="flex flex-col gap-4 py-4 w-full md:w-2/3">
-                  {isChangingStatus || isStartingDispute ? (
-                    <SkeletonMilestones />
-                  ) : (
-                    <div className="space-y-4">
-                      <label className="flex items-center">
-                        Milestones
-                        <TooltipInfo content="Key stages or deliverables for the escrow." />
-                      </label>
-                      {selectedEscrow.milestones.map((milestone, index) => (
-                        <div
-                          key={index}
-                          className="flex items-center space-x-4"
-                        >
-                          {milestone.flag ? (
-                            <Badge className="uppercase max-w-24">
-                              Approved
-                            </Badge>
-                          ) : (
-                            <Badge
-                              className="uppercase max-w-24"
-                              variant="outline"
+                  <label htmlFor="milestones" className="flex items-center">
+                    Milestones
+                    <TooltipInfo content="Key stages or deliverables for the escrow." />
+                  </label>
+                  {selectedEscrow.milestones.map(
+                    (milestone, milestoneIndex) => (
+                      <div
+                        key={`${milestone.description}-${milestone.status}`}
+                        className="flex items-center space-x-4"
+                      >
+                        {milestone.flag ? (
+                          <Badge className="uppercase max-w-24">Approved</Badge>
+                        ) : (
+                          <Badge
+                            className="uppercase max-w-24"
+                            variant="outline"
+                          >
+                            {milestone.status}
+                          </Badge>
+                        )}
+
+                        <Input
+                          disabled
+                          value={milestone.description}
+                          placeholder="Milestone Description"
+                        />
+
+                        {userRolesInEscrow.includes("serviceProvider") &&
+                          activeTab === "serviceProvider" &&
+                          milestone.status !== "completed" &&
+                          !milestone.flag && (
+                            <Button
+                              className="max-w-32"
+                              onClick={() =>
+                                changeMilestoneStatusSubmit(
+                                  selectedEscrow,
+                                  milestone,
+                                  milestoneIndex,
+                                )
+                              }
                             >
-                              {milestone.status}
-                            </Badge>
+                              Complete
+                            </Button>
                           )}
 
-                          <Input
-                            disabled
-                            value={milestone.description}
-                            placeholder="Milestone Description"
-                          />
-
-                          {userRolesInEscrow.includes("serviceProvider") &&
-                            activeTab === "serviceProvider" &&
-                            milestone.status !== "completed" &&
-                            !milestone.flag && (
-                              <Button
-                                className="max-w-32"
-                                onClick={() =>
-                                  changeMilestoneStatusSubmit(
-                                    selectedEscrow,
-                                    milestone,
-                                    index,
-                                  )
-                                }
-                              >
-                                Complete
-                              </Button>
-                            )}
-
-                          {userRolesInEscrow.includes("approver") &&
-                            activeTab === "approver" &&
-                            milestone.status === "completed" &&
-                            !milestone.flag && (
-                              <Button
-                                className="max-w-32"
-                                onClick={() =>
-                                  changeMilestoneFlagSubmit(
-                                    selectedEscrow,
-                                    milestone,
-                                    index,
-                                  )
-                                }
-                              >
-                                Approve
-                              </Button>
-                            )}
-                        </div>
-                      ))}
-
-                      <ProgressEscrow escrow={selectedEscrow} />
-                    </div>
+                        {userRolesInEscrow.includes("approver") &&
+                          activeTab === "approver" &&
+                          milestone.status === "completed" &&
+                          !milestone.flag && (
+                            <Button
+                              className="max-w-32"
+                              onClick={() =>
+                                changeMilestoneFlagSubmit(
+                                  selectedEscrow,
+                                  milestone,
+                                  milestoneIndex,
+                                )
+                              }
+                            >
+                              Approve
+                            </Button>
+                          )}
+                      </div>
+                    ),
                   )}
+
+                  <ProgressEscrow escrow={selectedEscrow} />
                 </div>
               </div>
             </CardContent>
@@ -499,7 +463,7 @@ const EscrowDetailDialog = ({
                 <Button
                   onClick={(e) => {
                     e.stopPropagation();
-                    setIsEditMilestoneDialogOpen(true);
+                    dialogStates.editMilestone.setIsOpen(true);
                   }}
                   variant="outline"
                 >
@@ -510,43 +474,39 @@ const EscrowDetailDialog = ({
         </DialogContent>
       </Dialog>
 
-      {/* Second Dialog */}
       <FundEscrowDialog
-        isSecondDialogOpen={isSecondDialogOpen}
-        setIsSecondDialogOpen={setIsSecondDialogOpen}
+        isSecondDialogOpen={dialogStates.second.isOpen}
+        setIsSecondDialogOpen={dialogStates.second.setIsOpen}
       />
 
-      {/* QR Dialog */}
       <QREscrowDialog
-        isQRDialogOpen={isQRDialogOpen}
-        setIsQRDialogOpen={setIsQRDialogOpen}
+        isQRDialogOpen={dialogStates.qr.isOpen}
+        setIsQRDialogOpen={dialogStates.qr.setIsOpen}
       />
 
-      {/* Resolve Dispute Dialog */}
       <ResolveDisputeEscrowDialog
-        isResolveDisputeDialogOpen={isResolveDisputeDialogOpen}
-        setIsResolveDisputeDialogOpen={setIsResolveDisputeDialogOpen}
+        isResolveDisputeDialogOpen={dialogStates.resolveDispute.isOpen}
+        setIsResolveDisputeDialogOpen={dialogStates.resolveDispute.setIsOpen}
       />
 
-      {/* Edit Milestones Dialog */}
       <EditMilestonesDialog
-        isEditMilestoneDialogOpen={isEditMilestoneDialogOpen}
-        setIsEditMilestoneDialogOpen={setIsEditMilestoneDialogOpen}
+        isEditMilestoneDialogOpen={dialogStates.editMilestone.isOpen}
+        setIsEditMilestoneDialogOpen={dialogStates.editMilestone.setIsOpen}
       />
 
-      {/* Success Release Dialog */}
       <SuccessReleaseDialog
-        isSuccessReleaseDialogOpen={isSuccessReleaseDialogOpen}
-        setIsSuccessReleaseDialogOpen={setIsSuccessReleaseDialogOpen}
+        isSuccessReleaseDialogOpen={dialogStates.successRelease.isOpen}
+        setIsSuccessReleaseDialogOpen={dialogStates.successRelease.setIsOpen}
         title=""
         description="Now that your escrow is released, you will be able to view it directly in"
       />
 
-      {/* Success Resolved Dialog */}
       <SuccessResolveDisputeDialog
-        isSuccessResolveDisputeDialogOpen={isSuccessResolveDisputeDialogOpen}
+        isSuccessResolveDisputeDialogOpen={
+          dialogStates.successResolveDispute.isOpen
+        }
         setIsSuccessResolveDisputeDialogOpen={
-          setIsSuccessResolveDisputeDialogOpen
+          dialogStates.successResolveDispute.setIsOpen
         }
         title=""
         description="Now that your escrow is resolved, you will be able to view it directly in"
diff --git a/src/components/modules/escrow/ui/dialogs/hooks/escrow-detail-dialog.hook.ts b/src/components/modules/escrow/ui/dialogs/hooks/escrow-detail-dialog.hook.ts
index 02217e7..2f28f94 100644
--- a/src/components/modules/escrow/ui/dialogs/hooks/escrow-detail-dialog.hook.ts
+++ b/src/components/modules/escrow/ui/dialogs/hooks/escrow-detail-dialog.hook.ts
@@ -1,16 +1,12 @@
-import { Escrow } from "@/@types/escrow.entity";
-import {
-  statusMap,
-  statusOptions,
-} from "@/components/modules/escrow/constants/status-options.constant";
+import type { Escrow } from "@/@types/escrow.entity";
 import { getUserRoleInEscrow } from "../../../server/escrow.firebase";
 import {
   useGlobalAuthenticationStore,
   useGlobalBoundedStore,
 } from "@/core/store/data";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
-interface useEscrowDetailDialogProps {
+interface EscrowDetailDialogProps {
   setIsDialogOpen: (value: boolean) => void;
   setSelectedEscrow: (selectedEscrow?: Escrow) => void;
   selectedEscrow: Escrow | null;
@@ -20,7 +16,7 @@ const useEscrowDetailDialog = ({
   setIsDialogOpen,
   setSelectedEscrow,
   selectedEscrow,
-}: useEscrowDetailDialogProps) => {
+}: EscrowDetailDialogProps) => {
   const { address } = useGlobalAuthenticationStore();
   const userRolesInEscrow = useGlobalBoundedStore(
     (state) => state.userRolesInEscrow,
@@ -28,6 +24,8 @@ const useEscrowDetailDialog = ({
   const setUserRolesInEscrow = useGlobalBoundedStore(
     (state) => state.setUserRolesInEscrow,
   );
+  const fetchingRef = useRef(false);
+  const lastFetchKey = useRef("");
 
   const handleClose = useCallback(() => {
     setIsDialogOpen(false);
@@ -35,45 +33,61 @@ const useEscrowDetailDialog = ({
   }, [setIsDialogOpen, setSelectedEscrow]);
 
   const areAllMilestonesCompleted =
-    selectedEscrow?.milestones
-      ?.map((milestone) => milestone.status)
-      .every((status) => status === "completed") ?? false;
+    selectedEscrow?.milestones?.every(
+      (milestone) => milestone.status === "completed",
+    ) ?? false;
 
   const areAllMilestonesCompletedAndFlag =
-    selectedEscrow?.milestones
-      ?.map((milestone) => milestone.flag)
-      .every((flag) => flag === true) ?? false;
-
-  const getFilteredStatusOptions = useCallback((currentStatus: string | undefined) => {
-    const nextStatuses = statusMap[currentStatus || ""] || [];
-    return statusOptions.filter((option) =>
-      nextStatuses.includes(option.value),
-    );
-  }, []);
+    selectedEscrow?.milestones?.every((milestone) => milestone.flag === true) ??
+    false;
 
   const fetchUserRoleInEscrow = useCallback(async () => {
-    const { contractId } = selectedEscrow || {};
-    const data = await getUserRoleInEscrow({ contractId, address });
-    return data;
-  }, [selectedEscrow, address]);
+    if (!selectedEscrow?.contractId || !address) return null;
+    return getUserRoleInEscrow({
+      contractId: selectedEscrow.contractId,
+      address,
+    });
+  }, [selectedEscrow?.contractId, address]);
 
   useEffect(() => {
+    let timeoutId: NodeJS.Timeout | undefined = undefined;
+    let isMounted = true;
+
     const fetchRoles = async () => {
-      if (selectedEscrow) {
+      if (!selectedEscrow || !address || fetchingRef.current) return;
+
+      const fetchKey = `${selectedEscrow.contractId}-${address}`;
+      if (fetchKey === lastFetchKey.current) return;
+
+      try {
+        fetchingRef.current = true;
+        lastFetchKey.current = fetchKey;
         const roleData = await fetchUserRoleInEscrow();
-        setUserRolesInEscrow(roleData?.roles || []);
+        if (isMounted && roleData) {
+          setUserRolesInEscrow(roleData.roles || []);
+        }
+      } catch (error) {
+        console.error("[EscrowDetailDialog] Error fetching roles:", error);
+      } finally {
+        fetchingRef.current = false;
       }
     };
 
-    fetchRoles();
-  }, [selectedEscrow, fetchUserRoleInEscrow, setUserRolesInEscrow]);
+    timeoutId = setTimeout(fetchRoles, 100);
+
+    return () => {
+      isMounted = false;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      fetchingRef.current = false;
+    };
+  }, [selectedEscrow, fetchUserRoleInEscrow, setUserRolesInEscrow, address]);
 
   return {
     handleClose,
     areAllMilestonesCompleted,
     areAllMilestonesCompletedAndFlag,
-    getFilteredStatusOptions,
-    fetchUserRoleInEscrow,
     userRolesInEscrow,
   };
 };
diff --git a/src/components/modules/escrow/ui/dialogs/hooks/use-escrow-dialogs.hook.ts b/src/components/modules/escrow/ui/dialogs/hooks/use-escrow-dialogs.hook.ts
new file mode 100644
index 0000000..b94a3d7
--- /dev/null
+++ b/src/components/modules/escrow/ui/dialogs/hooks/use-escrow-dialogs.hook.ts
@@ -0,0 +1,66 @@
+import { useEscrowBoundedStore } from "../../../store/ui";
+
+interface DialogStates {
+  second: {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+  };
+  qr: {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+  };
+  resolveDispute: {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+  };
+  editMilestone: {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+  };
+  successRelease: {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+  };
+  successResolveDispute: {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+  };
+}
+
+interface StatusStates {
+  isChangingStatus: boolean;
+  isStartingDispute: boolean;
+}
+
+export const useEscrowDialogs = (): DialogStates & StatusStates => {
+  const store = useEscrowBoundedStore();
+
+  return {
+    second: {
+      isOpen: store.isSecondDialogOpen,
+      setIsOpen: store.setIsSecondDialogOpen,
+    },
+    qr: {
+      isOpen: store.isQRDialogOpen,
+      setIsOpen: store.setIsQRDialogOpen,
+    },
+    resolveDispute: {
+      isOpen: store.isResolveDisputeDialogOpen,
+      setIsOpen: store.setIsResolveDisputeDialogOpen,
+    },
+    editMilestone: {
+      isOpen: store.isEditMilestoneDialogOpen,
+      setIsOpen: store.setIsEditMilestoneDialogOpen,
+    },
+    successRelease: {
+      isOpen: store.isSuccessReleaseDialogOpen,
+      setIsOpen: store.setIsSuccessReleaseDialogOpen,
+    },
+    successResolveDispute: {
+      isOpen: store.isSuccessResolveDisputeDialogOpen,
+      setIsOpen: store.setIsSuccessResolveDisputeDialogOpen,
+    },
+    isChangingStatus: store.isChangingStatus,
+    isStartingDispute: store.isStartingDispute,
+  };
+};
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index ecfc6a4..4deae56 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -76,15 +76,15 @@ const BreadcrumbSeparator = ({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">) => (
-  <li
+}: React.ComponentProps<"span">) => (
+  <span
     role="presentation"
     aria-hidden="true"
     className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
     {...props}
   >
     {children ?? <ChevronRight />}
-  </li>
+  </span>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";