diff --git a/src/components/NavigateBackButton.tsx b/src/components/NavigateBackButton.tsx
new file mode 100644
index 0000000..6026cba
--- /dev/null
+++ b/src/components/NavigateBackButton.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { ArrowUturnLeftIcon } from '@heroicons/react/20/solid'
+import { Button } from './ui/button'
+
+const NaviagteBackButton = () => {
+  const handleClick = () => {
+    window.history.back()
+  }
+  return (
+    <Button
+      className="cursor-pointer text-muted-foreground hover:text-foreground bg-transparent hover:bg-muted-foreground/10 border border-muted-foreground/10"
+      onClick={handleClick}
+    >
+      <ArrowUturnLeftIcon className="size-6" />
+    </Button>
+  )
+}
+
+export default NaviagteBackButton
diff --git a/src/components/PageBreadCrumb.tsx b/src/components/PageBreadCrumb.tsx
index 0fe42a1..89d09ec 100644
--- a/src/components/PageBreadCrumb.tsx
+++ b/src/components/PageBreadCrumb.tsx
@@ -15,6 +15,7 @@ import {
   DropdownMenuTrigger,
 } from './ui/dropdown-menu'
 import { Fragment } from 'react'
+import NaviagteBackButton from './NavigateBackButton'
 
 export type Route = {
   href: string
@@ -49,50 +50,55 @@ export function PageBreadCrumb(props: Props) {
   const { routes } = props
   const groups = groupBreadCrumbHistory(routes)
   return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href={groups.root.href}>{groups.root.label}</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        {!!groups.inBetween.length && (
-          <>
-            <BreadcrumbItem>
-              <DropdownMenu>
-                <DropdownMenuTrigger className="flex items-center gap-1">
-                  <BreadcrumbEllipsis className="h-4 w-4" />
-                  <span className="sr-only">Toggle menu</span>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  {groups.inBetween.map((r) => (
-                    <DropdownMenuItem key={r.label + r.href}>
-                      <Link href={r.href}>{r.label}</Link>
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-          </>
-        )}
-        {groups.mostRecent.map((r, index) => {
-          if (index != groups.mostRecent.length - 1)
-            return (
-              <Fragment key={r.label + r.href}>
-                <BreadcrumbItem>
-                  <BreadcrumbLink href={r.href}>{r.label}</BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-              </Fragment>
-            )
-          else
-            return (
-              <BreadcrumbItem key={r.label + r.href}>
-                <BreadcrumbPage>{r.label}</BreadcrumbPage>
+    <div className="">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <NaviagteBackButton />
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbLink href={groups.root.href}>{groups.root.label}</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          {!!groups.inBetween.length && (
+            <>
+              <BreadcrumbItem>
+                <DropdownMenu>
+                  <DropdownMenuTrigger className="flex items-center gap-1">
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                    <span className="sr-only">Toggle menu</span>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {groups.inBetween.map((r) => (
+                      <DropdownMenuItem key={r.label + r.href}>
+                        <Link href={r.href}>{r.label}</Link>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
               </BreadcrumbItem>
-            )
-        })}
-      </BreadcrumbList>
-    </Breadcrumb>
+              <BreadcrumbSeparator />
+            </>
+          )}
+          {groups.mostRecent.map((r, index) => {
+            if (index != groups.mostRecent.length - 1)
+              return (
+                <Fragment key={r.label + r.href}>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink href={r.href}>{r.label}</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                </Fragment>
+              )
+            else
+              return (
+                <BreadcrumbItem key={r.label + r.href}>
+                  <BreadcrumbPage>{r.label}</BreadcrumbPage>
+                </BreadcrumbItem>
+              )
+          })}
+        </BreadcrumbList>
+      </Breadcrumb>
+    </div>
   )
 }