diff --git a/src/components/BreadCrumbs.tsx b/src/components/BreadCrumbs.tsx
new file mode 100644
index 0000000..50a5a30
--- /dev/null
+++ b/src/components/BreadCrumbs.tsx
@@ -0,0 +1,44 @@
+import { ActionIcon, Anchor, Breadcrumbs, Card, Group } from "@mantine/core";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { useNavigate } from "react-router-dom";
+
+export default function BreadCrumbs({ dataLink, back, linkBack }: { dataLink: { title: string, link: string, active: boolean }[], back?: boolean, linkBack?: string }) {
+   const navigate = useNavigate();
+
+   return (
+      <Card
+         radius="md"
+         p="sm"
+         withBorder
+         style={{
+            background:
+               "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+            borderColor: "rgba(100,100,100,0.2)",
+            boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+         }}
+      >
+         <Group>
+            {
+               back &&
+               <ActionIcon variant="outline" aria-label="Settings" radius={"lg"} onClick={() => window.history.back()}>
+                  <IconChevronLeft size={20} stroke={1.5} />
+               </ActionIcon>
+            }
+            <Breadcrumbs>
+               {
+                  dataLink.map((item, index) => (
+                     <Anchor
+                        c={item.active ? "gray.0" : "gray.5"}
+                        onClick={() => item.active || item.link == "#" ? null : navigate(item.link)}
+                        key={index}
+                     >
+                        {item.title}
+                     </Anchor>
+                  ))
+               }
+            </Breadcrumbs>
+         </Group>
+
+      </Card>
+   )
+}
\ No newline at end of file
diff --git a/src/pages/scr/dashboard/dashboard_layout.tsx b/src/pages/scr/dashboard/dashboard_layout.tsx
index 0a7b5ae..6e90d54 100644
--- a/src/pages/scr/dashboard/dashboard_layout.tsx
+++ b/src/pages/scr/dashboard/dashboard_layout.tsx
@@ -215,6 +215,8 @@ function NavigationDashboard() {
   const location = useLocation();
   const [permissions, setPermissions] = useState<JsonValue[]>([]);
 
+  console.log(location)
+
   useEffect(() => {
     async function fetchPermissions() {
       const { data } = await apiFetch.api.user.find.get();
@@ -295,17 +297,21 @@ function NavigationDashboard() {
             label={
               <Flex align="center" gap={6}>
                 <Text fw={500}>{item.label}</Text>
-                {isActive(item.path as keyof typeof clientRoute) && (
-                  <Badge
-                    variant="light"
-                    color="teal"
-                    radius="sm"
-                    size="xs"
-                    style={{ textTransform: "none" }}
-                  >
-                    Active
-                  </Badge>
-                )}
+                {(isActive(item.path as keyof typeof clientRoute) ||
+                  (location.pathname == "/scr/dashboard/pelayanan-surat/detail-pelayanan" && item.path == "/scr/dashboard/pelayanan-surat/list-pelayanan") ||
+                  (location.pathname == "/scr/dashboard/pengaduan/detail" && item.path == "/scr/dashboard/pengaduan/list")
+                )
+                  && (
+                    <Badge
+                      variant="light"
+                      color="teal"
+                      radius="sm"
+                      size="xs"
+                      style={{ textTransform: "none" }}
+                    >
+                      Active
+                    </Badge>
+                  )}
               </Flex>
             }
             description={item.description}
diff --git a/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx b/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
index b51e64d..9970d37 100644
--- a/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
+++ b/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
 import ModalFile from "@/components/ModalFile";
 import ModalSurat from "@/components/ModalSurat";
 import notification from "@/components/notificationGlobal";
@@ -49,6 +50,11 @@ import { useLocation } from "react-router-dom";
 import useSwr from "swr";
 
 export default function DetailPengajuanPage() {
+  const dataMenu = [
+    { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
+    { title: "Pelayanan Surat", link: "/scr/dashboard/pelayanan-surat/list-pelayanan", active: false },
+    { title: "Detail Pengajuan Surat", link: "#", active: true },
+  ];
   const { search } = useLocation();
   const query = new URLSearchParams(search);
   const id = query.get("id");
@@ -67,6 +73,9 @@ export default function DetailPengajuanPage() {
   return (
     <Container size="xl" py="xl" w={"100%"}>
       <Grid>
+        <Grid.Col span={12}>
+          <BreadCrumbs dataLink={dataMenu} back />
+        </Grid.Col>
         <Grid.Col span={8}>
           <Stack gap={"xl"}>
             <DetailDataPengajuan
diff --git a/src/pages/scr/dashboard/pengaduan/detail_page.tsx b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
index cfa6994..563f466 100644
--- a/src/pages/scr/dashboard/pengaduan/detail_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
 import ModalFile from "@/components/ModalFile";
 import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
@@ -40,6 +41,11 @@ import useSwr from "swr";
 
 
 export default function DetailPengaduanPage() {
+  const dataMenu = [
+    { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
+    { title: "Pengaduan", link: "/scr/dashboard/pengaduan/list", active: false },
+    { title: "Detail Pengaduan", link: "#", active: true },
+  ];
   const { search } = useLocation();
   const query = new URLSearchParams(search);
   const id = query.get("id");
@@ -58,6 +64,9 @@ export default function DetailPengaduanPage() {
   return (
     <Container size="xl" py="xl" w={"100%"}>
       <Grid>
+        <Grid.Col span={12}>
+          <BreadCrumbs dataLink={dataMenu} back />
+        </Grid.Col>
         <Grid.Col span={8}>
           <Stack gap={"xl"}>
             <DetailDataPengaduan
diff --git a/src/pages/scr/dashboard/setting/detail_setting_page.tsx b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
index 665e7a2..b16fc8c 100644
--- a/src/pages/scr/dashboard/setting/detail_setting_page.tsx
+++ b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
 import DesaSetting from "@/components/DesaSetting";
 import KategoriPelayananSurat from "@/components/KategoriPelayananSurat";
 import KategoriPengaduan from "@/components/KategoriPengaduan";
@@ -15,6 +16,7 @@ import {
   IconUsersGroup,
 } from "@tabler/icons-react";
 import type { JsonValue } from "generated/prisma/runtime/library";
+import _ from "lodash";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
@@ -23,6 +25,11 @@ export default function DetailSettingPage() {
   const query = new URLSearchParams(search);
   const type = query.get("type");
   const [permissions, setPermissions] = useState<JsonValue[]>([]);
+  const dataMenu = [
+    { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
+    { title: "Setting", link: "#", active: false },
+    { title: type == "cat-pengaduan" ? "Kategori Pengaduan" : type == "cat-pelayanan" ? "Kategori Pelayanan Surat" : type ? _.upperFirst(type) : "Profile", link: "#", active: true },
+  ];
 
   useEffect(() => {
     async function fetchPermissions() {
@@ -87,6 +94,9 @@ export default function DetailSettingPage() {
   return (
     <Container size="xl" py="xl" w={"100%"}>
       <Grid>
+        <Grid.Col span={12}>
+          <BreadCrumbs dataLink={dataMenu} back />
+        </Grid.Col>
         <Grid.Col span={3}>
           <Card
             radius="md"
diff --git a/src/pages/scr/dashboard/warga/detail_warga_page.tsx b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
index e5c65aa..0f070c5 100644
--- a/src/pages/scr/dashboard/warga/detail_warga_page.tsx
+++ b/src/pages/scr/dashboard/warga/detail_warga_page.tsx
@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/components/BreadCrumbs";
 import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
 import {
@@ -26,6 +27,11 @@ import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 export default function DetailWargaPage() {
+  const dataMenu = [
+    { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
+    { title: "Warga", link: "/scr/dashboard/warga/list-warga", active: false },
+    { title: "Detail Warga", link: "#", active: true },
+  ];
   const { search } = useLocation();
   const query = new URLSearchParams(search);
   const id = query.get("id");
@@ -50,6 +56,9 @@ export default function DetailWargaPage() {
       />
       <Container size="xl" py="xl" w={"100%"}>
         <Grid>
+          <Grid.Col span={12}>
+            <BreadCrumbs dataLink={dataMenu} back />
+          </Grid.Col>
           <Grid.Col span={4}>
             <DetailWarga id={id!} />
           </Grid.Col>