diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 09654eb..8a7b730 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -43,7 +43,8 @@
     "error_message_required": "اجباری!"
   },
   "Dashboard": {
-    "dashboard_page": "داشبورد"
+    "dashboard_page": "داشبورد",
+    "passenger_office_page": "اداره مسافر"
   },
   "MuiDatePicker": {
     "date_picker_birthday": "تاریخ"
diff --git a/src/components/dashboard/passenger-office/TableRowActions.jsx b/src/components/dashboard/passenger-office/TableRowActions.jsx
new file mode 100644
index 0000000..0290214
--- /dev/null
+++ b/src/components/dashboard/passenger-office/TableRowActions.jsx
@@ -0,0 +1,50 @@
+import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
+import { Box, IconButton } from "@mui/material";
+// import EditForm from "./Form/EditForm";
+import { useContext } from "react";
+import { DataTableContext } from "@/lib/app/contexts/DataTableContext";
+// import DeleteForm from "./Form/DeleteForm";
+
+const TableRowActions = ({ row }) => {
+  const {
+    toggleDrawer,
+    setDrawerContent,
+    openDeleteDialog,
+    handleOpenDeleteDialog,
+    handleCloseDeleteDialog,
+    handleDeleteDialog,
+    rowId,
+    deleteData,
+  } = useContext(DataTableContext);
+  return (
+    <Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
+      <IconButton
+        aria-label="edit"
+        color="primary"
+        onClick={() => {
+          toggleDrawer(true);
+          //   setDrawerContent(<EditForm />);
+        }}
+      >
+        <EditIcon />
+      </IconButton>
+      <IconButton
+        aria-label="delete"
+        color="primary"
+        onClick={() => handleOpenDeleteDialog(row)}
+      >
+        <DeleteIcon />
+      </IconButton>
+      {/* <DeleteForm
+        rowId={rowId}
+        open={openDeleteDialog}
+        handleClose={handleCloseDeleteDialog}
+        handleDelete={handleDeleteDialog}
+        deleteData={deleteData}
+      /> */}
+    </Box>
+  );
+};
+
+export default TableRowActions;
diff --git a/src/components/dashboard/passenger-office/TableTollbar.jsx b/src/components/dashboard/passenger-office/TableTollbar.jsx
new file mode 100644
index 0000000..0b29ba8
--- /dev/null
+++ b/src/components/dashboard/passenger-office/TableTollbar.jsx
@@ -0,0 +1,32 @@
+import { DataTableContext } from "@/lib/app/contexts/DataTableContext";
+import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
+import { Button, Stack, Tooltip } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useContext } from "react";
+// import AddForm from "./Form/AddForm";
+
+function TableToolbar() {
+  const t = useTranslations();
+  const { toggleDrawer, setDrawerContent } = useContext(DataTableContext);
+  return (
+    <Stack direction={"row"} spacing={2}>
+      <Tooltip title={t("add")} arrow placement="right">
+        <Button
+          color="primary"
+          variant="contained"
+          size="small"
+          sx={{ textTransform: "unset", alignSelf: "center" }}
+          startIcon={<DataSaverOnIcon />}
+          onClick={() => {
+            toggleDrawer(true);
+            // setDrawerContent(<AddForm />);
+          }}
+        >
+          {t("add")}
+        </Button>
+      </Tooltip>
+    </Stack>
+  );
+}
+
+export default TableToolbar;
diff --git a/src/components/dashboard/passenger-office/index.jsx b/src/components/dashboard/passenger-office/index.jsx
new file mode 100644
index 0000000..2d52dd3
--- /dev/null
+++ b/src/components/dashboard/passenger-office/index.jsx
@@ -0,0 +1,192 @@
+import DataTableStructure from "@/core/components/DatatableStructure";
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import { ContentCopy } from "@mui/icons-material";
+import { Box, Typography } from "@mui/material";
+import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { format } from "date-fns-jalali";
+import { useMemo } from "react";
+import TableToolbar from "./TableTollbar";
+import TableRowActions from "./TableRowActions";
+
+function DashboardPassengerOfficeComponent() {
+  const columns = useMemo(
+    () => [
+      {
+        accessorFn: (row) => row.id,
+        id: "id",
+        header: "Id",
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: [
+          "equals",
+          "notEquals",
+          "contains",
+          "lessThan",
+          "greaterThan",
+          "between",
+        ],
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
+      {
+        accessorFn: (row) => row.username,
+        id: "username",
+        header: "Username",
+        enableColumnFilter: true,
+        datatype: "text",
+        filterFn: "contains",
+        columnFilterModeOptions: ["contains", "equals", "notEquals"],
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
+      {
+        accessorFn: (row) => row.name,
+        id: "name",
+        header: "Name",
+        enableColumnFilter: true,
+        datatype: "text",
+        filterFn: "contains",
+        columnFilterModeOptions: ["contains", "equals", "notEquals"],
+        muiTableBodyCellCopyButtonProps: {
+          fullWidth: true,
+          endIcon: <ContentCopy />,
+          sx: { justifyContent: "space-between" },
+        },
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
+      {
+        accessorFn: (row) => row.phone_number,
+        id: "phone_number",
+        header: "Phone Number",
+        enableColumnFilter: true,
+        datatype: "text",
+        filterFn: "contains",
+        columnFilterModeOptions: ["equals", "notEquals", "contains"],
+        muiTableBodyCellCopyButtonProps: {
+          fullWidth: true,
+          endIcon: <ContentCopy />,
+          sx: { justifyContent: "space-between" },
+        },
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
+      {
+        accessorFn: (row) => row.status,
+        id: "status",
+        header: "Status",
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        filterSelectOptions: [
+          { text: "Active", value: "0" },
+          { text: "Deactive", value: "1" },
+        ],
+        filterVariant: "select",
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
+      {
+        accessorFn: (row) => row.gender,
+        id: "gender",
+        header: "Gender",
+        enableColumnFilter: true,
+        datatype: "text",
+        filterFn: "equals",
+        filterSelectOptions: [
+          { text: "Male", value: "male" },
+          { text: "Female", value: "female" },
+        ],
+        filterVariant: "select",
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
+      {
+        accessorFn: (row) => row.national_id_code,
+        id: "national_id_code",
+        header: "National Id Code",
+        enableColumnFilter: true,
+        datatype: "text",
+        filterFn: "contains",
+        columnFilterModeOptions: ["equals", "notEquals", "contains"],
+        muiTableBodyCellCopyButtonProps: {
+          fullWidth: true,
+          endIcon: <ContentCopy />,
+          sx: { justifyContent: "space-between" },
+        },
+        Cell: ({ renderedCellValue }) => (
+          <Typography variant="body2">{renderedCellValue}</Typography>
+        ),
+      },
+      {
+        accessorFn: (row) => new Date(row.updated_at),
+        id: "updated_at",
+        header: "Update Date",
+        enableColumnFilter: true,
+        datatype: "date",
+        filterFn: "lessThan",
+        columnFilterModeOptions: ["lessThan", "greaterThan"],
+        Cell: ({ renderedCellValue }) => {
+          const date = new Date(renderedCellValue);
+          const formattedDate = format(date, "MM/dd/yyyy HH:mm");
+          return <Typography variant="body2">{formattedDate}</Typography>;
+        },
+        Header: ({ column }) => <em>{column.columnDef.header}</em>,
+        Filter: ({ column }) => {
+          return (
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DateTimePicker
+                onChange={(newValue) => {
+                  const date = new Date(newValue);
+                  const formattedDate = format(date, "yyyy-MM-dd HH:mm");
+                  column.setFilterValue(formattedDate);
+                }}
+                slotProps={{
+                  textField: {
+                    helperText: `Filter Mode: ${column.columnDef._filterFn}`,
+                    sx: { minWidth: "120px" },
+                    variant: "standard",
+                  },
+                }}
+                value={column.getFilterValue()}
+              />
+            </LocalizationProvider>
+          );
+        },
+      },
+    ],
+    []
+  );
+  return (
+    <DashboardLayouts>
+      <Box sx={{ px: 3 }}>
+        <DataTableStructure
+          //   tableUrl={SHOW_EXPERTS}
+          //   columns={columns}
+          selectableRow={false}
+          enableCustomToolbar={true}
+          CustomToolbar={<TableToolbar />}
+          enableLastUpdate={true}
+          enablePinning={true}
+          enableDensityToggle={true}
+          enableColumnFilters={true}
+          enableHiding={true}
+          enableFullScreenToggle={false}
+          enableGlobalFilter={false}
+          enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+          enableRowActions={true}
+          renderRowActions={({ row }) => <TableRowActions row={row} />}
+        />
+      </Box>
+    </DashboardLayouts>
+  );
+}
+
+export default DashboardPassengerOfficeComponent;
diff --git a/src/core/components/ImageConvertor.jsx b/src/core/components/ImageConvertor.jsx
index e69de29..667182e 100644
--- a/src/core/components/ImageConvertor.jsx
+++ b/src/core/components/ImageConvertor.jsx
@@ -0,0 +1,22 @@
+import ImageResize from "image-resize";
+
+const ImageResizer = async (image) => {
+  const imageResize = new ImageResize({
+    quality: 1,
+    format: "jpg",
+    outputType: "base64",
+    width: 400,
+  });
+
+  const get = await imageResize.get(image);
+  const resize = await imageResize.resize(get).then();
+  const output = await imageResize.output(resize).then();
+
+  const avatar = await (await import("image-to-file-converter"))
+    .base64ToFile(output)
+    .then();
+
+  return avatar;
+};
+
+export default ImageResizer;
diff --git a/src/pages/dashboard/passenger-office/index.jsx b/src/pages/dashboard/passenger-office/index.jsx
new file mode 100644
index 0000000..78ec016
--- /dev/null
+++ b/src/pages/dashboard/passenger-office/index.jsx
@@ -0,0 +1,23 @@
+import DashboardPassengerOfficeComponent from "@/components/dashboard/passenger-office";
+import TitlePage from "@/core/components/TitlePage";
+import WithAuthMiddleware from "@/middlewares/WithoutAuth";
+import { parse } from "next-useragent";
+
+export default function PassengerOffice() {
+  return (
+    <WithAuthMiddleware>
+      <TitlePage text="Dashboard.passenger_office_page" />
+      <DashboardPassengerOfficeComponent />
+    </WithAuthMiddleware>
+  );
+}
+
+export async function getServerSideProps({ req, locale }) {
+  const { isBot } = parse(req.headers["user-agent"]);
+  return {
+    props: {
+      messages: (await import(`&/locales/${locale}/app.json`)).default,
+      isBot,
+    },
+  };
+}