diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index 3a6a94c..4a2173f 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -1,5 +1,5 @@
 import { AppSidebar } from "@/components/ui/app-sidebar"
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { SidebarProvider } from "@/components/ui/sidebar"
 
 export default function DashboardLayout({
   children,
diff --git a/app/dashboard/spesific-target/page.tsx b/app/dashboard/spesific-target/page.tsx
new file mode 100644
index 0000000..f20077d
--- /dev/null
+++ b/app/dashboard/spesific-target/page.tsx
@@ -0,0 +1,16 @@
+"use client"
+import SpesificTargetTable from "@/components/table/spesific-target/spesific-target-table"
+import dynamic from "next/dynamic"
+
+const Navbar = dynamic(() => import("@/components/ui/navbar"), {
+  ssr: false,
+})
+
+export default function SpesificTarget() {
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <Navbar title="Spesific Target" />
+      <SpesificTargetTable />
+    </div>
+  )
+}
diff --git a/components/table/spesific-target/spesific-target-table.tsx b/components/table/spesific-target/spesific-target-table.tsx
new file mode 100644
index 0000000..d4ab50a
--- /dev/null
+++ b/components/table/spesific-target/spesific-target-table.tsx
@@ -0,0 +1,252 @@
+"use client"
+
+import { ReloadIcon } from "@/components/icons"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { ChevronLeft, ChevronRight, PlusIcon, SearchIcon } from "lucide-react"
+import { useEffect, useState } from "react"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+
+const dummyData = [
+  {
+    id: "1",
+    name: "POLRI - DIV Humas",
+    status: 1,
+  },
+  {
+    id: "2",
+    name: "POLRI - Korlantas",
+    status: 2,
+  },
+  {
+    id: "3",
+    name: "TNI",
+    status: 3,
+  },
+  {
+    id: "4",
+    name: "DPR",
+    status: 4,
+  },
+]
+
+export default function SpesificTargetTable() {
+  const [selectedTarget, setSelectedTarget] = useState("")
+  const [search, setSearch] = useState("")
+  const [limit, setLimit] = useState("5")
+  const [page, setPage] = useState(1)
+  // const [totalPage, setTotalPage] = useState(1)
+  const [selectedDataTable, setSelectedDataTable] = useState<string[]>([])
+  const [isOpen, setIsOpen] = useState(false)
+  const [formStatus, setFormStatus] = useState<"create" | "edit">("create")
+
+  const getData = async () => {
+    const req = {
+      search: search,
+      page: page,
+      limit: limit,
+    }
+    console.log("request", req)
+  }
+  useEffect(() => {
+    getData()
+  }, [page, limit])
+
+  const resetFilter = () => {
+    setSearch("")
+    setPage(1)
+    getData()
+  }
+
+  return (
+    <div className="flex flex-col gap-4 text-black">
+      <div className="flex flex-col gap-2 rounded-xl bg-white">
+        <p className="mx-4 text-3xl font-semibold">Spesific Target</p>
+        <p className="mx-4 text-sm text-gray-700">
+          Manage your Spesific Target
+        </p>
+
+        <div className="m-4 flex flex-row items-end gap-4 rounded-xl border border-violet-200 p-4">
+          <div className="flex flex-col gap-1">
+            <p className="text-xs font-light uppercase">Search</p>
+            <InputGroup className="h-10 w-100 rounded-lg border border-violet-300 bg-transparent text-black outline-none focus:border-transparent focus:ring-0 focus:outline-none">
+              <InputGroupInput
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                id="inline-end-input"
+                type="text"
+                placeholder="Search e.g name"
+              />
+              <InputGroupAddon align="inline-start">
+                <a
+                  className="cursor-pointer"
+                  // onClick={() => setViewPassword(!viewPassword)}
+                >
+                  <SearchIcon />
+                </a>
+              </InputGroupAddon>
+            </InputGroup>
+          </div>
+
+          <Button
+            onClick={getData}
+            className="h-10 w-24 bg-blue-600 text-white"
+          >
+            Filter
+          </Button>
+          <Button
+            onClick={resetFilter}
+            className="bg-grey-50 h-10 w-24 border-2 border-gray-300 text-black"
+          >
+            Reset
+          </Button>
+        </div>
+      </div>
+      <Button
+        onClick={() => {
+          if (!isOpen) {
+            setSelectedTarget("")
+            setFormStatus("create")
+            setIsOpen(true)
+          }
+        }}
+        className="mx-4 h-10 w-50 bg-blue-600 text-white"
+      >
+        <PlusIcon /> Add Spesific Target
+      </Button>
+
+      <div className="flex-roew m-4 flex items-center gap-2 rounded-xl border border-violet-200 bg-white p-4">
+        <Table>
+          <TableHeader className="bg-violet-50">
+            <TableRow className="hover:bg-transparent">
+              <TableHead className="text-black">NO</TableHead>
+              <TableHead className="text-black">Name</TableHead>
+
+              <TableHead className="text-black">Action</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {dummyData.map((target, index) => (
+              <TableRow className="hover:bg-gray-200" key={target.id}>
+                <TableCell className="font-medium">{index + 1}</TableCell>
+                <TableCell>{target.name}</TableCell>
+
+                <TableCell className="space-x-2">
+                  <Button
+                    onClick={() => {
+                      setFormStatus("edit")
+                      setSelectedTarget(target.name)
+                      setIsOpen(true)
+                      console.log("selectData", target.id)
+                    }}
+                    className="cursor-pointer border border-gray-300 bg-white text-black"
+                  >
+                    <ReloadIcon /> Edit
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      console.log("selectData", target.id)
+                    }}
+                    className="cursor-pointer bg-red-700 text-white"
+                  >
+                    <ReloadIcon /> Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter className="bg-violet-50">
+            <TableRow className="hover:bg-transparent">
+              <TableCell colSpan={3} className="">
+                <div className="flex flex-row items-center justify-end gap-2">
+                  <p className="text-blue-400">ROWS PER PAGE: </p>
+                  <Select value={limit} onValueChange={setLimit}>
+                    <SelectTrigger className="w-20">
+                      <SelectValue placeholder="value" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="5">5</SelectItem>
+                        <SelectItem value="10">10</SelectItem>
+                        <SelectItem value="25">25</SelectItem>
+                        <SelectItem value="50">50</SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <a className="cursor-pointer">
+                    <ChevronLeft />
+                  </a>
+                  <a className="cursor-pointer">
+                    <ChevronRight />
+                  </a>
+                </div>
+              </TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="max-w-sm lg:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>
+              {formStatus == "create"
+                ? "Add New Spesific Target"
+                : "Edit Spesific Target"}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="my-5 flex flex-col gap-2">
+            <p className="text-xs font-light uppercase">name</p>
+            <Input
+              value={selectedTarget}
+              onChange={(e) => setSelectedTarget(e.target.value)}
+              className="h-10 rounded-lg border border-violet-300 bg-transparent text-black outline-none focus:border-transparent focus:ring-0 focus:outline-none"
+            />
+          </div>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button className="h-10 w-24" variant="outline">
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button className="h-10 w-24 bg-blue-600">
+              {formStatus == "create" ? "Submit" : "Save"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}