diff --git a/comps/custom/Breadcrumb.tsx b/comps/custom/Breadcrumb.tsx
index 9bb3969..4c18207 100755
--- a/comps/custom/Breadcrumb.tsx
+++ b/comps/custom/Breadcrumb.tsx
@@ -1,6 +1,7 @@
 import { useLocal } from "@/utils/use-local";
 import { FC, ReactNode, useEffect } from "react";
 import { FieldLoading } from "../ui/field-loading";
+import { ChevronLeft } from "lucide-react";
 
 export type BreadItem = {
   label: React.ReactNode;
@@ -39,10 +40,13 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
     local.value = value;
   }
 
+  const list = Array.isArray(local.value) ? local.value : [];
+
   return (
     <div
       className={cx(
-        "breadcrumb c-w-full c-flex c-items-center c-flex-wrap",
+        "breadcrumb c-w-full c-flex c-flex-wrap",
+        isMobile ? "c-items-stretch" : "c-items-center",
         className
       )}
     >
@@ -53,50 +57,79 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
           {(!local.value || local.value.length === 0) &&
             isEditor &&
             "Breadcrumb"}
-          {(Array.isArray(local.value) ? local.value : []).map(
-            (cur, index): ReactNode => {
-              const lastIndex = (local.value || []).length - 1;
+          {isDesktop && (
+            <>
+              {list.map((cur, index): ReactNode => {
+                const lastIndex = (local.value || []).length - 1;
 
-              return (
-                <>
-                  {index === lastIndex ? (
-                    <h1 className="c-font-semibold c-text-xs md:c-text-base">
-                      {cur?.label}
-                    </h1>
-                  ) : (
-                    <h1
-                      className="c-font-normal c-text-xs md:c-text-base hover:c-cursor-pointer hover:c-underline"
-                      onClick={(ev) => {
-                        if (isEditor) return;
-                        if (cur.url) navigate(cur.url || "");
-                        if (cur.onClick) cur.onClick(ev);
-                      }}
-                    >
-                      {cur?.label}
-                    </h1>
-                  )}
-
-                  {index !== lastIndex && (
-                    <div>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="1"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        className="lucide lucide-chevron-right"
+                return (
+                  <>
+                    {index === lastIndex ? (
+                      <h1 className="c-font-semibold c-text-xs md:c-text-base">
+                        {cur?.label}
+                      </h1>
+                    ) : (
+                      <h1
+                        className="c-font-normal c-text-xs md:c-text-base hover:c-cursor-pointer hover:c-underline"
+                        onClick={(ev) => {
+                          if (isEditor) return;
+                          if (cur.url) navigate(cur.url || "");
+                          if (cur.onClick) cur.onClick(ev);
+                        }}
                       >
-                        <path d="m9 18 6-6-6-6" />
-                      </svg>
-                    </div>
-                  )}
-                </>
-              );
-            }
+                        {cur?.label}
+                      </h1>
+                    )}
+
+                    {index !== lastIndex && (
+                      <div>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          className="lucide lucide-chevron-right"
+                        >
+                          <path d="m9 18 6-6-6-6" />
+                        </svg>
+                      </div>
+                    )}
+                  </>
+                );
+              })}
+            </>
+          )}
+          {isMobile && (
+            <>
+              {list.length > 1 && (
+                <div className={cx("c-flex c-items-stretch")}>
+                  <div
+                    className="breadcrumb-back c-flex c-items-center c-px-2 c-border-r "
+                    onClick={(ev) => {
+                      const cur = list[list.length - 2];
+                      if (isEditor) return;
+                      if (cur.url) navigate(cur.url || "");
+                      if (cur.onClick) cur.onClick(ev);
+                    }}
+                  >
+                    <ChevronLeft />
+                  </div>
+                  <h1 className="bredcrumb-label c-flex c-font-semibold c-items-center c-pl-2 c-text-xs md:c-text-base">
+                    {list[list.length - 1].label}
+                  </h1>
+                </div>
+              )}
+              {list.length === 1 && (
+                <h1 className="bredcrumb-label c-font-semibold c-flex c-px-3 c-items-center c-text-xs md:c-text-base">
+                  {list[0].label}
+                </h1>
+              )}
+            </>
           )}
         </>
       )}