diff --git a/src/components/AppBar/NavigationToggle.tsx b/src/components/AppBar/NavigationToggle.tsx
index 9f61753..23551b7 100644
--- a/src/components/AppBar/NavigationToggle.tsx
+++ b/src/components/AppBar/NavigationToggle.tsx
@@ -4,10 +4,17 @@ import MenuIcon from "@mui/icons-material/Menu";
 import NavigationContent from "../NavigationContent";
 import React from "react";
 import Drawer from "@mui/material/Drawer";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/config/authConfig";
+import { Session } from "inspector";
+export interface SessionWithAbilities extends Session {
+  abilities?: string[]
+}
 
-const NavigationToggle: React.FC = () => {
+const NavigationToggle: React.FC = async () => {
   const [isOpened, setIsOpened] = React.useState(false);
-
+  const session = await getServerSession(authOptions) as SessionWithAbilities;
+  const abilities: string[] = session.abilities || []
   const openNavigation = () => {
     setIsOpened(true);
   };
@@ -18,7 +25,7 @@ const NavigationToggle: React.FC = () => {
   return (
     <>
       <Drawer variant="permanent" sx={{ display: { xs: "none", xl: "block" } }}>
-        <NavigationContent />
+        <NavigationContent abilities={abilities}/>
       </Drawer>
       <Drawer
         sx={{ display: { xl: "none" } }}
@@ -28,7 +35,7 @@ const NavigationToggle: React.FC = () => {
           keepMounted: true,
         }}
       >
-        <NavigationContent />
+        <NavigationContent abilities={abilities}/>
       </Drawer>
       <IconButton
         sx={{ display: { xl: "none" } }}
diff --git a/src/components/NavigationContent/NavigationContent.tsx b/src/components/NavigationContent/NavigationContent.tsx
index 9f0c3d7..e6fc1b0 100644
--- a/src/components/NavigationContent/NavigationContent.tsx
+++ b/src/components/NavigationContent/NavigationContent.tsx
@@ -35,111 +35,118 @@ import BusinessIcon from '@mui/icons-material/Business';
 import ViewWeekIcon from '@mui/icons-material/ViewWeek';
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
+import { GENERATE_REPORTS, MAINTAIN_MASTERDATA, MAINTAIN_USER, VIEW_MASTERDATA, VIEW_USER } from "@/middleware";
 
 interface NavigationItem {
   icon: React.ReactNode;
   label: string;
   path: string;
+  isHidden?: boolean;
   children?: NavigationItem[];
 }
 
-const navigationItems: NavigationItem[] = [
-  { icon: <WorkHistory />, label: "User Workspace", path: "/home" },
-  {
-    icon: <Dashboard />,
-    label: "Dashboard",
-    path: "",
-    children: [
-      {
-        icon: <SummarizeIcon />,
-        label: "Financial Summary",
-        path: "/dashboard/ProjectFinancialSummary",
-      },
-      {
-        icon: <PaymentsIcon />,
-        label: "Company / Team Cash Flow",
-        path: "/dashboard/CompanyTeamCashFlow",
-      },
-      {
-        icon: <PaymentsIcon />,
-        label: "Project Cash Flow",
-        path: "/dashboard/ProjectCashFlow",
-      },
-      {
-        icon: <AccountTreeIcon />,
-        label: "Project Status by Client",
-        path: "/dashboard/ProjectStatusByClient",
-      },
-      {
-        icon: <AccountTreeIcon />,
-        label: "Project Status by Team",
-        path: "/dashboard/ProjectStatusByTeam",
-      },
-      {
-        icon: <PeopleIcon />,
-        label: "Staff Utilization",
-        path: "/dashboard/StaffUtilization",
-      },
-      {
-        icon: <ViewWeekIcon />,
-        label: "Project Resource Summary",
-        path: "/dashboard/ProjectResourceSummary",
-      }
-    ],
-  },
-  {
-    icon: <RequestQuote />,
-    label: "Staff Reimbursement",
-    path: "/staffReimbursement",
-    children: [
-      {
-        icon: <RequestQuote />,
-        label: "Claim Approval",
-        path: "/staffReimbursement/ClaimApproval",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Claim Summary",
-        path: "/staffReimbursement/ClaimSummary",
-      },
-    ],
-  },
-  { icon: <Assignment />, label: "Project Management", path: "/projects" },
-  { icon: <Task />, label: "Task Template", path: "/tasks" },
-  { icon: <Payments />, label: "Invoice", path: "/invoice" },
-  { icon: <Analytics />, label: "Analysis Report", path: "",
-    children: [
-      {icon: <Analytics />, label:"Late Start Report", path: "/analytics/LateStartReport"},
-      {icon: <Analytics />, label:"Delay Report", path: "/analytics/DelayReport"},
-      {icon: <Analytics />, label:"Resource Overconsumption Report", path: "/analytics/ResourceOverconsumptionReport"},
-      {icon: <Analytics />, label:"Cost and Expense Report", path: "/analytics/CostandExpenseReport"},
-      {icon: <Analytics />, label:"Completion Report", path: "/analytics/ProjectCompletionReport"},
-      {icon: <Analytics />, label:"Completion Report with Outstanding Un-billed Hours Report", path: "/analytics/ProjectCompletionReportWO"},
-      {icon: <Analytics />, label:"Project Claims Report", path: "/analytics/ProjectClaimsReport"},
-      {icon: <Analytics />, label:"Project P&L Report", path: "/analytics/ProjectPLReport"},
-      {icon: <Analytics />, label:"Financial Status Report", path: "/analytics/FinancialStatusReport"},
-      {icon: <Analytics />, label:"EX02 - Project Cash Flow Report", path: "/analytics/EX02ProjectCashFlowReport"},
-  ],
-},
-  {
-    icon: <Settings />, label: "Setting", path: "",
-    children: [
-      { icon: <GroupIcon />, label: "Client", path: "/settings/customer" },
-      { icon: <BusinessIcon />, label: "Subsidiary", path: "/settings/subsidiary" },
-      { icon: <Staff />, label: "Staff", path: "/settings/staff" },
-      { icon: <Company />, label: "Company", path: "/settings/company" },
-      { icon: <EmojiEventsIcon />, label: "Skill", path: "/settings/skill" },
-      { icon: <Department />, label: "Department", path: "/settings/department" },
-      { icon: <Position />, label: "Position", path: "/settings/position" },
-      { icon: <Salary />, label: "Salary", path: "/settings/salary" },
-      { icon: <Team />, label: "Team", path: "/settings/team" },
-      { icon: <ManageAccountsIcon />, label: "User", path: "/settings/user" },
-      { icon: <Holiday />, label: "Holiday", path: "/settings/holiday" },
+interface Props {
+  abilities: string[]
+}
+// console.log(getUserData())
+
+
+const NavigationContent: React.FC<Props> = async ({abilities}) => {
+  const navigationItems: NavigationItem[] = [
+    { icon: <WorkHistory />, label: "User Workspace", path: "/home" },
+    {
+      icon: <Dashboard />,
+      label: "Dashboard",
+      path: "",
+      children: [
+        {
+          icon: <SummarizeIcon />,
+          label: "Financial Summary",
+          path: "/dashboard/ProjectFinancialSummary",
+        },
+        {
+          icon: <PaymentsIcon />,
+          label: "Company / Team Cash Flow",
+          path: "/dashboard/CompanyTeamCashFlow",
+        },
+        {
+          icon: <PaymentsIcon />,
+          label: "Project Cash Flow",
+          path: "/dashboard/ProjectCashFlow",
+        },
+        {
+          icon: <AccountTreeIcon />,
+          label: "Project Status by Client",
+          path: "/dashboard/ProjectStatusByClient",
+        },
+        {
+          icon: <AccountTreeIcon />,
+          label: "Project Status by Team",
+          path: "/dashboard/ProjectStatusByTeam",
+        },
+        {
+          icon: <PeopleIcon />,
+          label: "Staff Utilization",
+          path: "/dashboard/StaffUtilization",
+        },
+        {
+          icon: <ViewWeekIcon />,
+          label: "Project Resource Summary",
+          path: "/dashboard/ProjectResourceSummary",
+        }
+      ],
+    },
+    {
+      icon: <RequestQuote />,
+      label: "Staff Reimbursement",
+      path: "/staffReimbursement",
+      children: [
+        {
+          icon: <RequestQuote />,
+          label: "Claim Approval",
+          path: "/staffReimbursement/ClaimApproval",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Claim Summary",
+          path: "/staffReimbursement/ClaimSummary",
+        },
+      ],
+    },
+    { icon: <Assignment />, label: "Project Management", path: "/projects" },
+    { icon: <Task />, label: "Task Template", path: "/tasks" },
+    { icon: <Payments />, label: "Invoice", path: "/invoice" },
+    { icon: <Analytics />, label: "Analysis Report", path: "", isHidden: ![GENERATE_REPORTS].some((ability) => abilities.includes(ability)),
+      children: [
+        {icon: <Analytics />, label:"Late Start Report", path: "/analytics/LateStartReport"},
+        {icon: <Analytics />, label:"Delay Report", path: "/analytics/DelayReport"},
+        {icon: <Analytics />, label:"Resource Overconsumption Report", path: "/analytics/ResourceOverconsumptionReport"},
+        {icon: <Analytics />, label:"Cost and Expense Report", path: "/analytics/CostandExpenseReport"},
+        {icon: <Analytics />, label:"Completion Report", path: "/analytics/ProjectCompletionReport"},
+        {icon: <Analytics />, label:"Completion Report with Outstanding Un-billed Hours Report", path: "/analytics/ProjectCompletionReportWO"},
+        {icon: <Analytics />, label:"Project Claims Report", path: "/analytics/ProjectClaimsReport"},
+        {icon: <Analytics />, label:"Project P&L Report", path: "/analytics/ProjectPLReport"},
+        {icon: <Analytics />, label:"Financial Status Report", path: "/analytics/FinancialStatusReport"},
+        {icon: <Analytics />, label:"EX02 - Project Cash Flow Report", path: "/analytics/EX02ProjectCashFlowReport"},
     ],
   },
-];
-
-const NavigationContent: React.FC = () => {
+    {
+      icon: <Settings />, label: "Setting", path: "", isHidden: ![VIEW_MASTERDATA, MAINTAIN_MASTERDATA].some((ability) => abilities.includes(ability)),
+      children: [
+        { icon: <GroupIcon />, label: "Client", path: "/settings/customer" },
+        { icon: <BusinessIcon />, label: "Subsidiary", path: "/settings/subsidiary" },
+        { icon: <Staff />, label: "Staff", path: "/settings/staff" },
+        { icon: <Company />, label: "Company", path: "/settings/company" },
+        { icon: <EmojiEventsIcon />, label: "Skill", path: "/settings/skill" },
+        { icon: <Department />, label: "Department", path: "/settings/department" },
+        { icon: <Position />, label: "Position", path: "/settings/position" },
+        { icon: <Salary />, label: "Salary", path: "/settings/salary" },
+        { icon: <Team />, label: "Team", path: "/settings/team" },
+        { icon: <ManageAccountsIcon />, label: "User", path: "/settings/user", isHidden: ![MAINTAIN_USER, VIEW_USER].some((ability) => abilities.includes(ability))},
+        { icon: <Holiday />, label: "Holiday", path: "/settings/holiday" },
+      ],
+    },
+  ];
   const { t } = useTranslation("common");
   const pathname = usePathname();
 
@@ -188,7 +195,7 @@ const NavigationContent: React.FC = () => {
       </Box>
       <Divider />
       <List component="nav">
-        {navigationItems.map((item) => renderNavigationItem(item))}
+        {navigationItems.filter(item => item.isHidden !== true).map((item) => renderNavigationItem(item))}
         {/* {navigationItems.map(({ icon, label, path }, index) => {
           return (
             <Box
diff --git a/src/components/StaffSearch/StaffSearchWrapper.tsx b/src/components/StaffSearch/StaffSearchWrapper.tsx
index 59f9dc1..ad061b8 100644
--- a/src/components/StaffSearch/StaffSearchWrapper.tsx
+++ b/src/components/StaffSearch/StaffSearchWrapper.tsx
@@ -9,18 +9,15 @@ import { fetchPositionCombo } from "@/app/api/positions/actions";
 import { fetchGradeCombo } from "@/app/api/grades/actions";
 import { fetchSkillCombo } from "@/app/api/skill/actions";
 import { fetchSalaryCombo } from "@/app/api/salarys/actions";
-import { Session, getServerSession } from "next-auth";
+import { getServerSession } from "next-auth";
 import { authOptions } from "@/config/authConfig";
+import { SessionWithAbilities } from "../AppBar/NavigationToggle";
 // import { preloadStaff } from "@/app/api/staff";
 
 interface SubComponents {
   Loading: typeof StaffSearchLoading;
 }
 
-interface SessionWithAbilities extends Session {
-  abilities?: string[]
-}
-
 const StaffSearchWrapper: React.FC & SubComponents = async () => {
   const staff = await fetchStaff();
   const session = await getServerSession(authOptions) as SessionWithAbilities;