diff --git a/docs/Permission-Based-UI-Rendering.md b/docs/Permission-Based-UI-Rendering.md
new file mode 100644
index 0000000..d7db8f5
--- /dev/null
+++ b/docs/Permission-Based-UI-Rendering.md
@@ -0,0 +1,661 @@
+# Permission-Based UI Rendering
+
+## Overview
+
+CommDesk uses a permission-based UI rendering system to decide which pages, buttons, actions, and management controls should be visible to a user.
+
+This implementation combines:
+
+- `TanStack Query` for fetching and caching permissions
+- `Redux Toolkit` for storing permission state globally
+- custom permission hooks for clean access checks
+- reusable boundary and gate components for page-level and inline authorization
+
+The goal is simple:
+
+- show only the UI a user is allowed to use
+- keep permission logic centralized
+- make feature code easy to read and easy to extend
+- avoid duplicated permission-check code across screens
+
+This document explains why we use this system, how it works, and how to use it correctly in production code.
+
+---
+
+## Why We Use Permission-Based UI Rendering
+
+### 1. Better security posture at the UI layer
+
+The UI should not invite users to click actions they cannot perform.
+
+Examples:
+
+- hide `Create Event` if the user cannot create events
+- hide `Delete Member` if the user cannot delete members
+- hide `Send Email` if the user does not have contact email access
+
+Important:
+
+UI authorization is not a replacement for backend authorization. The backend must still validate permissions for every protected API action.
+
+### 2. Better user experience
+
+Without permission-aware rendering:
+
+- users see buttons that fail later
+- users get confusing error messages after clicking
+- layout becomes noisy and misleading
+
+With permission-aware rendering:
+
+- the interface feels focused
+- users only see relevant actions
+- restricted areas can provide clear guidance instead of dead ends
+
+### 3. Better maintainability
+
+If every component checks permissions differently, the codebase becomes fragile.
+
+This system keeps permission logic in one place so we can:
+
+- update permission behavior globally
+- reuse hooks and boundary components
+- keep feature components readable
+
+---
+
+## High-Level Architecture
+
+The permission system lives in `src/permissions/`.
+
+### Main files
+
+- `src/permissions/constants.ts`
+  Contains permission keys such as `event:create` and `member:view`.
+
+- `src/permissions/permission.service.ts`
+  Fetches permissions for the current user and defines query keys.
+
+- `src/permissions/PermissionBootstrap.tsx`
+  Runs once near app startup, loads permissions through React Query, and syncs them into Redux.
+
+- `src/store/permissionsSlice.ts`
+  Stores granted permissions plus loading, error, and sync metadata.
+
+- `src/permissions/useAuthorization.tsx`
+  Exposes reusable hooks for permission checks:
+  `useAuthorization`, `usePermissionMap`, and `PermissionGate`.
+
+- `src/permissions/PermissionBoundary.tsx`
+  Handles page-level permission states:
+  loading, allowed, unauthorized.
+
+- `src/permissions/PermissionLoading.tsx`
+  Provides a clean loading state while access is being validated.
+
+- `src/permissions/AccessDenied.tsx`
+  Provides a reusable unauthorized state.
+
+- `src/permissions/selectors.ts`
+  Central Redux selectors for permission state.
+
+- `src/permissions/utils.ts`
+  Shared helpers for normalizing permission input and evaluating access.
+
+---
+
+## Data Flow
+
+### Step 1: App starts
+
+`PermissionBootstrap` mounts near the app root in `src/main.tsx`.
+
+### Step 2: Permissions are fetched
+
+The bootstrap component uses `TanStack Query` to fetch permissions for the current user role.
+
+### Step 3: Permissions are cached
+
+React Query caches the result and prevents unnecessary refetching during the cache window.
+
+### Step 4: Permissions are stored globally
+
+Once fetched, permissions are written into Redux so any component can read them quickly without re-implementing fetch logic.
+
+### Step 5: Components consume permissions
+
+Components use:
+
+- `PermissionBoundary` for full-page access control
+- `PermissionGate` for showing or hiding small UI sections
+- `usePermissionMap` for components with multiple action buttons
+- `useAuthorization` for lower-level custom logic
+
+---
+
+## Permission Constants
+
+The system uses named constants instead of hard-coded strings.
+
+Example:
+
+```ts
+export const Event_Permissions = {
+  CREATE_EVENT: "event:create",
+  UPDATE_EVENT: "event:update",
+  DELETE_EVENT: "event:delete",
+  VIEW_EVENT: "event:view",
+  PUBLISH_EVENT: "event:publish",
+  JOIN_EVENT: "event:join",
+  LEAVE_EVENT: "event:leave",
+} as const;
+```
+
+Why this matters:
+
+- avoids typos
+- improves autocomplete
+- makes refactoring safer
+- keeps permission usage consistent across modules
+
+---
+
+## When to Use Each API
+
+### `PermissionBoundary`
+
+Use for page-level or section-level protection when you need:
+
+- a loading state
+- an unauthorized fallback
+- a protected content area
+
+Example:
+
+```tsx
+<PermissionBoundary
+  permission={Event_Permissions.VIEW_EVENT}
+  loadingFallback={<PermissionLoading />}
+  unauthorizedFallback={
+    <AccessDenied
+      title="Event access is unavailable"
+      description="This view is only shown to members who can view event schedules."
+    />
+  }
+>
+  <EventTable events={events} itemsPerPage={5} />
+</PermissionBoundary>
+```
+
+Use this when an entire page or major content area depends on access.
+
+### `PermissionGate`
+
+Use for small inline UI blocks such as:
+
+- buttons
+- cards
+- menu items
+- action groups
+
+Example:
+
+```tsx
+<PermissionGate permission={Member_Permissions.CREATE_MEMBER}>
+  <Button text="Add Member" onClick={handleAddMember} />
+</PermissionGate>
+```
+
+Use this when you only want to hide or reveal specific UI fragments.
+
+### `usePermissionMap`
+
+Use when a component needs several action checks at once.
+
+Example:
+
+```tsx
+const { canEdit, canDelete, canPublish } = usePermissionMap({
+  canEdit: Event_Permissions.UPDATE_EVENT,
+  canDelete: Event_Permissions.DELETE_EVENT,
+  canPublish: Event_Permissions.PUBLISH_EVENT,
+});
+```
+
+Why this is preferred:
+
+- one hook call instead of many
+- one consistent place to define action access
+- component code stays readable
+
+### `useAuthorization`
+
+Use when you need lower-level control over access state.
+
+It returns:
+
+- `hasPermission`
+- `permissions`
+- `requestedPermissions`
+- `isLoading`
+- `isReady`
+- `isError`
+- `status`
+- `error`
+
+Example:
+
+```tsx
+const access = useAuthorization(Event_Permissions.CREATE_EVENT);
+
+if (access.isLoading) return null;
+if (!access.hasPermission) return <DeniedView />;
+```
+
+Use this only when `PermissionBoundary` or `PermissionGate` is not enough.
+
+---
+
+## Recommended Usage Patterns
+
+### Pattern 1: Protect a full page
+
+Best for:
+
+- Member pages
+- Event pages
+- Project management pages
+- Admin-only sections
+
+Example:
+
+```tsx
+return (
+  <div className="cd-page">
+    <PageHeader />
+    <PermissionBoundary
+      permission={Project_Permissions.VIEW_PROJECT}
+      loadingFallback={<PermissionLoading />}
+      unauthorizedFallback={<AccessDenied title="No access" description="..." />}
+    >
+      <ProjectContent />
+    </PermissionBoundary>
+  </div>
+);
+```
+
+### Pattern 2: Protect a single action button
+
+Best for:
+
+- Create
+- Edit
+- Delete
+- Publish
+
+Example:
+
+```tsx
+<PermissionGate permission={Event_Permissions.PUBLISH_EVENT}>
+  <Button text="Publish Event" onClick={handlePublish} />
+</PermissionGate>
+```
+
+### Pattern 3: Handle multiple related actions
+
+Best for:
+
+- table action columns
+- cards with action bars
+- admin tool panels
+
+Example:
+
+```tsx
+const { canEdit, canDelete } = usePermissionMap({
+  canEdit: Member_Permissions.UPDATE_MEMBER,
+  canDelete: Member_Permissions.DELETE_MEMBER,
+});
+```
+
+Then:
+
+```tsx
+{canEdit && <button>Edit</button>}
+{canDelete && <button>Delete</button>}
+```
+
+---
+
+## Production Guidelines
+
+### 1. Never hard-code permission strings inside feature components
+
+Do this:
+
+```tsx
+permission={Event_Permissions.CREATE_EVENT}
+```
+
+Not this:
+
+```tsx
+permission="event:create"
+```
+
+### 2. Prefer boundaries for pages
+
+If an entire page depends on permission, use `PermissionBoundary` instead of manual `if` chains.
+
+This keeps page code cleaner and more consistent.
+
+### 3. Prefer `usePermissionMap` for action-heavy components
+
+This is more maintainable than calling `useAuthorization` many times in the same component.
+
+### 4. Keep unauthorized UI honest
+
+Avoid showing:
+
+- fake action icons
+- disabled-looking controls that still work
+- menus with no valid action
+
+If a user cannot perform an action, either:
+
+- hide it
+- or present a clear read-only state
+
+### 5. Handle loading intentionally
+
+Do not render unauthorized fallbacks before permission loading completes.
+
+That creates a flash of wrong content.
+
+Use:
+
+- `PermissionBoundary` with `loadingFallback`
+- or `PermissionGate` with `loadingFallback`
+- or `useAuthorization` with `isLoading`
+
+### 6. Keep backend and frontend authorization aligned
+
+Frontend permissions improve UX.
+Backend permissions enforce security.
+
+Both are required.
+
+---
+
+## Why Redux and React Query Together
+
+This is a common question.
+
+### Why not only React Query?
+
+React Query is excellent for:
+
+- fetching
+- caching
+- server-state freshness
+
+But UI code often wants lightweight global reads without repeating query usage everywhere.
+
+### Why not only Redux?
+
+Redux is excellent for:
+
+- global synchronous access
+- predictable state transitions
+- selectors
+
+But it is not the best tool alone for server data fetching and caching.
+
+### Why combine them?
+
+We use:
+
+- React Query for the async fetch lifecycle and caching
+- Redux for simple app-wide access to resolved permission state
+
+This gives us:
+
+- centralized fetching
+- consistent cached results
+- simple UI access anywhere in the app
+
+---
+
+## Current Role Mapping
+
+At the moment, permissions are resolved from a role-to-permission map in `permission.service.ts`.
+
+This works well for local development and UI scaffolding.
+
+Example:
+
+- `Admin` gets all permissions
+- `Member` gets a limited set
+
+In a production backend integration, this file should fetch permissions from a real API instead of using mock role mapping.
+
+---
+
+## How to Add a New Permission
+
+### Step 1: Add the constant
+
+Add it to the correct permission group in `src/permissions/constants.ts`.
+
+Example:
+
+```ts
+export const Project_Permissions = {
+  VIEW_PROJECT: "project:view",
+  CREATE_PROJECT: "project:create",
+  ARCHIVE_PROJECT: "project:archive",
+} as const;
+```
+
+### Step 2: Add it to the permission source
+
+Update the role mapping or backend response logic in `permission.service.ts`.
+
+### Step 3: Use it in the UI
+
+Example:
+
+```tsx
+<PermissionGate permission={Project_Permissions.ARCHIVE_PROJECT}>
+  <Button text="Archive Project" onClick={handleArchive} />
+</PermissionGate>
+```
+
+### Step 4: Enforce it on the backend
+
+Do not stop at the frontend. Make sure the server also validates it.
+
+---
+
+## How to Protect a New Page
+
+Example:
+
+```tsx
+import {
+  AccessDenied,
+  PermissionBoundary,
+  PermissionLoading,
+  Project_Permissions,
+} from "@/permissions";
+
+const ProjectAdminPage = () => {
+  return (
+    <PermissionBoundary
+      permission={Project_Permissions.UPDATE_PROJECT}
+      loadingFallback={<PermissionLoading />}
+      unauthorizedFallback={
+        <AccessDenied
+          title="Project admin access is unavailable"
+          description="You need project management permission to open this page."
+        />
+      }
+    >
+      <ProjectAdminContent />
+    </PermissionBoundary>
+  );
+};
+```
+
+---
+
+## How to Protect Multiple Permissions at Once
+
+If a UI area requires all permissions:
+
+```tsx
+<PermissionBoundary
+  permission={[
+    Event_Permissions.CREATE_EVENT,
+    Event_Permissions.PUBLISH_EVENT,
+  ]}
+  requireAll
+  loadingFallback={<PermissionLoading />}
+  unauthorizedFallback={<AccessDenied title="No access" description="..." />}
+>
+  <PublishPanel />
+</PermissionBoundary>
+```
+
+If a UI area can render when the user has any one of several permissions:
+
+```tsx
+<PermissionGate
+  permission={[
+    Event_Permissions.UPDATE_EVENT,
+    Event_Permissions.DELETE_EVENT,
+  ]}
+>
+  <EventActions />
+</PermissionGate>
+```
+
+By default, permission arrays use `any` behavior unless `requireAll` is passed.
+
+---
+
+## Error Handling
+
+The permission slice stores:
+
+- `status`
+- `error`
+- `lastUpdatedAt`
+
+This gives us better production readiness because we can:
+
+- debug permission fetch issues
+- surface fallback UI later if needed
+- inspect when permission state was last synced
+
+Today, most screens use loading and unauthorized states.
+If needed, we can later add a dedicated permission-error UI using the stored `error`.
+
+---
+
+## Common Mistakes to Avoid
+
+### Mistake 1: Manual page checks everywhere
+
+Bad:
+
+```tsx
+const { hasPermission, isLoading } = useAuthorization(...);
+if (isLoading) return null;
+if (!hasPermission) return <Denied />;
+```
+
+This is okay in rare cases, but for most pages `PermissionBoundary` is cleaner.
+
+### Mistake 2: Showing fake disabled actions
+
+Avoid UI that looks interactive but does nothing.
+
+### Mistake 3: Mixing permission rules across files
+
+Keep permission definitions centralized in `constants.ts`.
+
+### Mistake 4: Forgetting backend validation
+
+UI gating is not enough.
+
+### Mistake 5: Repeating the same check many times in one component
+
+Use `usePermissionMap`.
+
+---
+
+## FAQ
+
+### Does this system secure the backend?
+
+No.
+It only controls what the user sees in the UI.
+Backend APIs must still validate authorization.
+
+### Why is there a loading state?
+
+Permissions are fetched asynchronously.
+Until they are loaded, the UI does not yet know what the user can access.
+
+### Why not just hide everything by default?
+
+We do hide protected UI by default during loading, but page-level areas should show a proper loading state rather than a flash of unauthorized content.
+
+### Why store permissions in Redux after fetching them with React Query?
+
+Because many components need easy global access, while React Query remains responsible for fetching and caching.
+
+### Can we replace the mock permission source later?
+
+Yes.
+That is one of the main reasons this system is centralized.
+You can swap the fetch logic in `permission.service.ts` without rewriting the feature components.
+
+### Can we add route-level guards later?
+
+Yes.
+The current UI boundaries are already structured in a way that can evolve into route guards if needed.
+
+---
+
+## Future Improvements
+
+Good next steps if the system grows:
+
+- fetch permissions from a real backend endpoint
+- add route metadata for permissions
+- create a route guard wrapper for router-level protection
+- add analytics/logging for denied access states
+- add automated tests for permission helpers and boundary components
+- add permission-aware navigation filtering in sidebars and menus
+
+---
+
+## Summary
+
+This permission-based UI rendering system exists to make CommDesk:
+
+- safer at the UI layer
+- clearer for end users
+- easier to maintain for developers
+
+Use these rules as the default:
+
+- `PermissionBoundary` for pages
+- `PermissionGate` for inline UI
+- `usePermissionMap` for multi-action components
+- `constants.ts` for all permission keys
+- backend validation for every protected operation
+
+If we follow these conventions consistently, the code stays clean, modern, and predictable as the app grows.
diff --git a/package-lock.json b/package-lock.json
index 1a2f560..173542d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
+        "@reduxjs/toolkit": "^2.11.2",
         "@tanstack/react-query": "^5.100.9",
         "@tauri-apps/api": "2.10.1",
         "@tauri-apps/plugin-opener": "2.5.4",
@@ -21,6 +22,12 @@
         "markdown-to-jsx": "^9.7.16",
         "next-themes": "^0.4.6",
         "radix-ui": "^1.4.3",
+        "react": "^19.2.6",
+        "react-day-picker": "^9.14.0",
+        "react-dom": "^19.2.6",
+        "react-hook-form": "^7.75.0",
+        "react-icons": "^5.6.0",
+        "react-redux": "^9.2.0",
         "react": "19.2.6",
         "react-day-picker": "^9.14.0",
         "react-dom": "19.2.6",
diff --git a/package.json b/package.json
index 3290687..feb2db2 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@reduxjs/toolkit": "^2.11.2",
     "@tanstack/react-query": "^5.100.9",
     "@tauri-apps/api": "2.10.1",
     "@tauri-apps/plugin-opener": "2.5.4",
@@ -34,6 +35,7 @@
     "react-dom": "19.2.6",
     "react-hook-form": "^7.75.0",
     "react-icons": "^5.6.0",
+    "react-redux": "^9.2.0",
     "react-router": "^7.15.0",
     "react-router-dom": "^7.15.0",
     "recharts": "^3.8.1",
diff --git a/src/App.tsx b/src/App.tsx
index c39f7ca..85037da 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,10 @@
 import { useEffect } from "react";
-
 import { BrowserRouter } from "react-router-dom";
-
 import "./App.css";
 
 
 import { startAutoUpdater } from "./system/updater/autoUpdater";
+import { ThemeProvider } from "next-themes";
 
 import { ThemeProvider } from "./theme";
 import OrgRoute from "./routes/OrgRoute";
@@ -20,11 +19,8 @@ function App() {
   return (
     <ThemeProvider>
       <BrowserRouter>
-
-       <OrgRoute />
-
-       <MemberRoutes />
-        
+        <OrgRoute />
+        <MemberRoutes />
       </BrowserRouter>
     </ThemeProvider>
   );
diff --git a/src/features/AddMember/v1/Component/AddMemberHeader.tsx b/src/features/AddMember/v1/Component/AddMemberHeader.tsx
index 2f0b3e3..697427e 100644
--- a/src/features/AddMember/v1/Component/AddMemberHeader.tsx
+++ b/src/features/AddMember/v1/Component/AddMemberHeader.tsx
@@ -1,4 +1,5 @@
 import { IoMdArrowRoundBack } from "react-icons/io";
+import { Member_Permissions, PermissionGate } from "@/permissions";
 import { Link } from "react-router";
 import Button from "../../../../Component/ui/Button";
 import { memo } from "react";
@@ -20,12 +21,16 @@ const AddMemberHeader = () => {
       </Link>
 
       <div className="w-[40%] h-full mr-[3vw] flex justify-end gap-3">
-        <Button
-          text="Discard Draft"
-          variant="secondary"
-          onClick={() => alert("Discard Draft clicked")}
-        />
-        <Button text="Create Member" onClick={() => alert("Create Member clicked")} />
+        <PermissionGate permission={Member_Permissions.CREATE_MEMBER}>
+          <Button
+            text="Discard Draft"
+            variant="secondary"
+            onClick={() => alert("Discard Draft clicked")}
+          />
+        </PermissionGate>
+        <PermissionGate permission={Member_Permissions.CREATE_MEMBER}>
+          <Button text="Create Member" onClick={() => alert("Create Member clicked")} />
+        </PermissionGate>
       </div>
     </div>
   );
diff --git a/src/features/AddMember/v1/Page/AddMemberPage.tsx b/src/features/AddMember/v1/Page/AddMemberPage.tsx
index cfa19d6..e15819b 100644
--- a/src/features/AddMember/v1/Page/AddMemberPage.tsx
+++ b/src/features/AddMember/v1/Page/AddMemberPage.tsx
@@ -1,4 +1,5 @@
 import AddMemberHeader from "../Component/AddMemberHeader";
+import { AccessDenied, Member_Permissions, PermissionBoundary, PermissionLoading } from "@/permissions";
 import Administrative_MetaData from "../Component/Administrative_MetaData";
 import Community_Involvement from "../Component/Community_Involment";
 import PersonalInfoCard from "../Sections/PersonalInfoCard";
@@ -8,14 +9,25 @@ const AddMemberPage = () => {
   return (
     <div className="w-full flex flex-col cd-page">
       <AddMemberHeader />
-      <div className="flex p-8 gap-8 w-full flex-col lg:flex-row items-start overflow-x-hidden">
-        <div className="w-full lg:w-[65%] h-full flex-col">
-          <PersonalInfoCard />
-          <ProfessionalDetails />
-          <Community_Involvement />
+      <PermissionBoundary
+        permission={Member_Permissions.CREATE_MEMBER}
+        loadingFallback={<PermissionLoading />}
+        unauthorizedFallback={
+          <AccessDenied
+            title="You cannot create members yet"
+            description="Member creation tools are only visible to users with create access for the member directory."
+          />
+        }
+      >
+        <div className="flex p-8 gap-8 w-full flex-col lg:flex-row items-start overflow-x-hidden">
+          <div className="w-full lg:w-[65%] h-full flex-col">
+            <PersonalInfoCard />
+            <ProfessionalDetails />
+            <Community_Involvement />
+          </div>
+          <Administrative_MetaData />
         </div>
-        <Administrative_MetaData />
-      </div>
+      </PermissionBoundary>
     </div>
   );
 };
diff --git a/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx b/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
index cb2f9c5..7e51674 100644
--- a/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
+++ b/src/features/Contact_And_Support/v1/Components/InternalSupport_Table.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { Contact_Permissions, usePermissionMap } from "@/permissions";
 import { FiMail, FiCopy, FiCheck } from "react-icons/fi";
 
 type TeamMember = {
@@ -94,6 +95,10 @@ const CopyEmailButton = ({ email }: { email: string }) => {
 };
 
 const InternalSupport_Table = () => {
+  const { canEmail } = usePermissionMap({
+    canEmail: Contact_Permissions.EMAIL_CONTACT,
+  });
+
   return (
     <div className="w-full h-fit overflow-x-auto">
       <table className="cd-table min-w-[680px]">
@@ -102,7 +107,7 @@ const InternalSupport_Table = () => {
             <th>Team Member</th>
             <th>Role / Department</th>
             <th>Email Address</th>
-            <th className="text-center">Actions</th>
+            <th className="text-center">{canEmail ? "Actions" : "Quick Copy"}</th>
           </tr>
         </thead>
         <tbody>
@@ -148,21 +153,24 @@ const InternalSupport_Table = () => {
               </td>
               <td>
                 <div className="flex items-center justify-center gap-1">
-                  <a
-                    href={`mailto:${member.email}`}
-                    title="Send email"
-                    className="p-1.5 rounded-md transition-colors"
-                    style={{ color: "var(--cd-text-muted)" }}
-                    onMouseEnter={(e) =>
-                      ((e.currentTarget as HTMLAnchorElement).style.backgroundColor =
-                        "var(--cd-primary-subtle)")
-                    }
-                    onMouseLeave={(e) =>
-                      ((e.currentTarget as HTMLAnchorElement).style.backgroundColor = "transparent")
-                    }
-                  >
-                    <FiMail size={14} />
-                  </a>
+                  {canEmail && (
+                    <a
+                      href={`mailto:${member.email}`}
+                      title="Send email"
+                      className="p-1.5 rounded-md transition-colors"
+                      style={{ color: "var(--cd-text-muted)" }}
+                      onMouseEnter={(e) =>
+                        ((e.currentTarget as HTMLAnchorElement).style.backgroundColor =
+                          "var(--cd-primary-subtle)")
+                      }
+                      onMouseLeave={(e) =>
+                        ((e.currentTarget as HTMLAnchorElement).style.backgroundColor =
+                          "transparent")
+                      }
+                    >
+                      <FiMail size={14} />
+                    </a>
+                  )}
                   <CopyEmailButton email={member.email} />
                 </div>
               </td>
diff --git a/src/features/Contact_And_Support/v1/Components/Support.tsx b/src/features/Contact_And_Support/v1/Components/Support.tsx
index cb237bf..dce6506 100644
--- a/src/features/Contact_And_Support/v1/Components/Support.tsx
+++ b/src/features/Contact_And_Support/v1/Components/Support.tsx
@@ -1,5 +1,6 @@
 import DropDown from "@/Component/ui/DropDown";
 import Input from "@/Component/ui/Input";
+import { Contact_Permissions, usePermissionMap } from "@/permissions";
 import { FormEvent, useState } from "react";
 import { MdOutlineSupportAgent } from "react-icons/md";
 import { FiAlertCircle, FiCheckCircle } from "react-icons/fi";
@@ -22,6 +23,9 @@ const priorityColor: Record<PriorityLevel, string> = {
 };
 
 const Support = () => {
+  const { canSubmitTicket } = usePermissionMap({
+    canSubmitTicket: Contact_Permissions.SUBMIT_SUPPORT_TICKET,
+  });
   const initialCategory = CONTACT_AND_SUPPORT_CONSTANT[0] ?? "";
   const [selectedCategory, setSelectedCategory] = useState<string>(initialCategory);
   const [priority, setPriority] = useState<PriorityLevel>("Medium");
@@ -56,6 +60,7 @@ const Support = () => {
 
   const onSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    if (!canSubmitTicket) return;
     if (!validateForm()) {
       setTicketReference("");
       return;
@@ -191,11 +196,18 @@ const Support = () => {
         )}
 
         <div className="flex flex-wrap items-center gap-3 pt-1">
-          <button type="submit" className="cd-btn cd-btn-primary">
-            Submit Ticket
-          </button>
-          <button type="button" onClick={clearAll} className="cd-btn cd-btn-secondary">
-            Clear Form
+          {canSubmitTicket && (
+            <button type="submit" className="cd-btn cd-btn-primary">
+              Submit Ticket
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={canSubmitTicket ? clearAll : undefined}
+            className="cd-btn cd-btn-secondary"
+            disabled={!canSubmitTicket}
+          >
+            {canSubmitTicket ? "Clear Form" : "View Only"}
           </button>
         </div>
 
@@ -214,6 +226,11 @@ const Support = () => {
             turnaround time.
           </p>
         </div>
+        {!canSubmitTicket && (
+          <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+            Ticket submission is hidden until support-request permission is granted.
+          </p>
+        )}
       </form>
     </div>
   );
diff --git a/src/features/Contact_And_Support/v1/Pages/Contact.tsx b/src/features/Contact_And_Support/v1/Pages/Contact.tsx
index c1b1f26..c2cddf0 100644
--- a/src/features/Contact_And_Support/v1/Pages/Contact.tsx
+++ b/src/features/Contact_And_Support/v1/Pages/Contact.tsx
@@ -1,4 +1,5 @@
 import ContactHeader from "../Section/ContactHeader";
+import { AccessDenied, Contact_Permissions, PermissionBoundary, PermissionLoading } from "@/permissions";
 import InternalDirectoryTable from "../Section/InternalDirectoryTable";
 import Support from "../Components/Support";
 
@@ -6,14 +7,25 @@ const Contact = () => {
   return (
     <div className="w-full h-full min-h-0 flex flex-col cd-page">
       <ContactHeader />
-      <div className="w-full min-h-0 flex flex-col xl:flex-row p-4 sm:p-5 lg:p-6 gap-4 lg:gap-6">
-        <div className="w-full min-w-0 xl:flex-1">
-          <InternalDirectoryTable />
+      <PermissionBoundary
+        permission={Contact_Permissions.VIEW_CONTACT_DIRECTORY}
+        loadingFallback={<PermissionLoading />}
+        unauthorizedFallback={
+          <AccessDenied
+            title="Contact directory access is unavailable"
+            description="This area is only shown to users who can view the internal support directory."
+          />
+        }
+      >
+        <div className="w-full min-h-0 flex flex-col xl:flex-row p-4 sm:p-5 lg:p-6 gap-4 lg:gap-6">
+          <div className="w-full min-w-0 xl:flex-1">
+            <InternalDirectoryTable />
+          </div>
+          <div className="w-full min-w-0 xl:max-w-[30rem] flex">
+            <Support />
+          </div>
         </div>
-        <div className="w-full min-w-0 xl:max-w-[30rem] flex">
-          <Support />
-        </div>
-      </div>
+      </PermissionBoundary>
     </div>
   );
 };
diff --git a/src/features/Events/v1/Components/EventTable.tsx b/src/features/Events/v1/Components/EventTable.tsx
index f462d44..8b624db 100644
--- a/src/features/Events/v1/Components/EventTable.tsx
+++ b/src/features/Events/v1/Components/EventTable.tsx
@@ -1,5 +1,5 @@
-import { MoreVertical } from "lucide-react";
 import { useState } from "react";
+import { Event_Permissions, usePermissionMap } from "@/permissions";
 import { Event } from "../Event.type";
 
 type EventProps = {
@@ -14,11 +14,18 @@ const statusConfig: Record<Event["status"], { bg: string; color: string }> = {
 };
 
 function EventTable({ events, itemsPerPage }: EventProps) {
+  const { canView, canEdit, canDelete, canPublish } = usePermissionMap({
+    canView: Event_Permissions.VIEW_EVENT,
+    canEdit: Event_Permissions.UPDATE_EVENT,
+    canDelete: Event_Permissions.DELETE_EVENT,
+    canPublish: Event_Permissions.PUBLISH_EVENT,
+  });
   const [currentPage, setCurrentPage] = useState(1);
   const totalPages = Math.ceil(events.length / itemsPerPage);
   const indexOfLast = currentPage * itemsPerPage;
   const indexOfFirst = indexOfLast - itemsPerPage;
   const currentItems = events.slice(indexOfFirst, indexOfLast);
+  const canManageActions = canView || canEdit || canDelete || canPublish;
 
   return (
     <div
@@ -37,7 +44,7 @@ function EventTable({ events, itemsPerPage }: EventProps) {
             <th>Status</th>
             <th>Teams</th>
             <th>Submissions</th>
-            <th className="text-right">Actions</th>
+            {canManageActions && <th className="text-right">Actions</th>}
           </tr>
         </thead>
         <tbody>
@@ -74,21 +81,26 @@ function EventTable({ events, itemsPerPage }: EventProps) {
                 </td>
                 <td style={{ color: "var(--cd-text-2)" }}>{event.teams}</td>
                 <td style={{ color: "var(--cd-text-2)" }}>{event.submissions}</td>
-                <td className="text-right">
-                  <button
-                    className="p-1.5 rounded-lg transition-colors"
-                    style={{ color: "var(--cd-text-2)" }}
-                    onMouseEnter={(e) =>
-                      ((e.currentTarget as HTMLButtonElement).style.backgroundColor =
-                        "var(--cd-hover)")
-                    }
-                    onMouseLeave={(e) =>
-                      ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
-                    }
-                  >
-                    <MoreVertical size={15} />
-                  </button>
-                </td>
+                {canManageActions && (
+                  <td className="text-right">
+                    <div className="flex flex-wrap justify-end gap-2">
+                      {canView && (
+                        <button className="cd-btn cd-btn-secondary px-3 py-1 text-xs">View</button>
+                      )}
+                      {canEdit && (
+                        <button className="cd-btn cd-btn-secondary px-3 py-1 text-xs">Edit</button>
+                      )}
+                      {canPublish && event.status !== "Completed" && (
+                        <button className="cd-btn cd-btn-primary px-3 py-1 text-xs">
+                          Publish
+                        </button>
+                      )}
+                      {canDelete && (
+                        <button className="cd-btn cd-btn-danger px-3 py-1 text-xs">Delete</button>
+                      )}
+                    </div>
+                  </td>
+                )}
               </tr>
             );
           })}
diff --git a/src/features/Events/v1/Components/Judge.tsx b/src/features/Events/v1/Components/Judge.tsx
index c827e26..87ff92b 100644
--- a/src/features/Events/v1/Components/Judge.tsx
+++ b/src/features/Events/v1/Components/Judge.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import Input from "@/Component/ui/Input";
+import { Event_Permissions, PermissionGate } from "@/permissions";
 import { CiSearch } from "react-icons/ci";
 import { IoMdAdd } from "react-icons/io";
 import JudgeCard from "./JudgeCard";
@@ -53,9 +54,11 @@ const Judge = ({ isExpanded = true, onToggleExpand }: JudgeProps) => {
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
-            <IoMdAdd className="text-base" /> Add
-          </button>
+          <PermissionGate permission={Event_Permissions.UPDATE_EVENT}>
+            <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
+              <IoMdAdd className="text-base" /> Add
+            </button>
+          </PermissionGate>
           {onToggleExpand && (
             <button
               type="button"
diff --git a/src/features/Events/v1/Components/Mentors.tsx b/src/features/Events/v1/Components/Mentors.tsx
index b5d3b83..745cc41 100644
--- a/src/features/Events/v1/Components/Mentors.tsx
+++ b/src/features/Events/v1/Components/Mentors.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import Input from "@/Component/ui/Input";
+import { Event_Permissions, PermissionGate } from "@/permissions";
 import { CiSearch } from "react-icons/ci";
 import { IoMdAdd } from "react-icons/io";
 import MentorCard from "./MentorCard";
@@ -53,9 +54,11 @@ const Mentors = ({ isExpanded = true, onToggleExpand }: MentorsProps) => {
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
-            <IoMdAdd className="text-base" /> Add
-          </button>
+          <PermissionGate permission={Event_Permissions.UPDATE_EVENT}>
+            <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
+              <IoMdAdd className="text-base" /> Add
+            </button>
+          </PermissionGate>
           {onToggleExpand && (
             <button
               type="button"
diff --git a/src/features/Events/v1/Components/Partners_And_Sponsors.tsx b/src/features/Events/v1/Components/Partners_And_Sponsors.tsx
index 471c918..cf75564 100644
--- a/src/features/Events/v1/Components/Partners_And_Sponsors.tsx
+++ b/src/features/Events/v1/Components/Partners_And_Sponsors.tsx
@@ -1,4 +1,5 @@
 import { IoMdAdd } from "react-icons/io";
+import { Event_Permissions, PermissionGate } from "@/permissions";
 import Partners_And_Sponsors_Card from "./Partners_And_Sponsors_Card";
 
 const PARTNERS = [
@@ -57,9 +58,11 @@ const Partners_And_Sponsors = ({
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
-            <IoMdAdd className="text-base" /> Add
-          </button>
+          <PermissionGate permission={Event_Permissions.UPDATE_EVENT}>
+            <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
+              <IoMdAdd className="text-base" /> Add
+            </button>
+          </PermissionGate>
           {onToggleExpand && (
             <button
               type="button"
diff --git a/src/features/Events/v1/Components/Speakers.tsx b/src/features/Events/v1/Components/Speakers.tsx
index 5c79506..6b811d7 100644
--- a/src/features/Events/v1/Components/Speakers.tsx
+++ b/src/features/Events/v1/Components/Speakers.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import Input from "@/Component/ui/Input";
+import { Event_Permissions, PermissionGate } from "@/permissions";
 import { CiSearch } from "react-icons/ci";
 import { IoMdAdd } from "react-icons/io";
 import SpeakerCard from "./SpeakerCard";
@@ -59,9 +60,11 @@ const Speakers = ({ isExpanded = true, onToggleExpand }: SpeakersProps) => {
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
-            <IoMdAdd className="text-base" /> Add
-          </button>
+          <PermissionGate permission={Event_Permissions.UPDATE_EVENT}>
+            <button type="button" className="cd-btn cd-btn-primary px-2.5 py-1.5 text-xs">
+              <IoMdAdd className="text-base" /> Add
+            </button>
+          </PermissionGate>
           {onToggleExpand && (
             <button
               type="button"
diff --git a/src/features/Events/v1/Pages/CreateNewEvent.tsx b/src/features/Events/v1/Pages/CreateNewEvent.tsx
index 4627144..8995d3a 100644
--- a/src/features/Events/v1/Pages/CreateNewEvent.tsx
+++ b/src/features/Events/v1/Pages/CreateNewEvent.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { AccessDenied, Event_Permissions, PermissionBoundary, PermissionLoading } from "@/permissions";
 import Judge from "../Components/Judge";
 import Mentors from "../Components/Mentors";
 import Speakers from "../Components/Speakers";
@@ -21,44 +22,55 @@ const CreateNewEvent = () => {
   return (
     <div className="w-full h-full flex flex-col cd-page">
       <Event_Header />
-      <div className="flex flex-col items-center min-[1408px]:items-start min-[1408px]:flex-row w-full p-[2vw] gap-5">
-        <div
-          className="w-[90%] min-[1408px]:w-[65%] mb-[2vh] rounded-xl p-4"
-          style={{
-            backgroundColor: "var(--cd-surface-2)",
-            border: "1px solid var(--cd-border)",
-          }}
-        >
-          <Event_Basic_Info />
-          <DateAndSchedule />
-          <Capacity_And_Registration />
-        </div>
-        <div
-          className="w-[90%] min-[1408px]:w-[35%] min-[1408px]:h-screen rounded-xl space-y-5 min-[1408px]:overflow-y-auto pr-1 p-4"
-          style={{
-            backgroundColor: "var(--cd-surface-2)",
-            border: "1px solid var(--cd-border)",
-          }}
-        >
-          <Settings />
-          <Speakers
-            isExpanded={expandedPanel === "speakers"}
-            onToggleExpand={() => handlePanelToggle("speakers")}
-          />
-          <Mentors
-            isExpanded={expandedPanel === "mentors"}
-            onToggleExpand={() => handlePanelToggle("mentors")}
-          />
-          <Judge
-            isExpanded={expandedPanel === "judges"}
-            onToggleExpand={() => handlePanelToggle("judges")}
-          />
-          <Partners_And_Sponsors
-            isExpanded={expandedPanel === "partners"}
-            onToggleExpand={() => handlePanelToggle("partners")}
+      <PermissionBoundary
+        permission={Event_Permissions.CREATE_EVENT}
+        loadingFallback={<PermissionLoading />}
+        unauthorizedFallback={
+          <AccessDenied
+            title="You cannot create events yet"
+            description="Ask an administrator for event creation access to manage drafts, settings, speakers, and publishing tools."
           />
+        }
+      >
+        <div className="flex flex-col items-center min-[1408px]:items-start min-[1408px]:flex-row w-full p-[2vw] gap-5">
+          <div
+            className="w-[90%] min-[1408px]:w-[65%] mb-[2vh] rounded-xl p-4"
+            style={{
+              backgroundColor: "var(--cd-surface-2)",
+              border: "1px solid var(--cd-border)",
+            }}
+          >
+            <Event_Basic_Info />
+            <DateAndSchedule />
+            <Capacity_And_Registration />
+          </div>
+          <div
+            className="w-[90%] min-[1408px]:w-[35%] min-[1408px]:h-screen rounded-xl space-y-5 min-[1408px]:overflow-y-auto pr-1 p-4"
+            style={{
+              backgroundColor: "var(--cd-surface-2)",
+              border: "1px solid var(--cd-border)",
+            }}
+          >
+            <Settings />
+            <Speakers
+              isExpanded={expandedPanel === "speakers"}
+              onToggleExpand={() => handlePanelToggle("speakers")}
+            />
+            <Mentors
+              isExpanded={expandedPanel === "mentors"}
+              onToggleExpand={() => handlePanelToggle("mentors")}
+            />
+            <Judge
+              isExpanded={expandedPanel === "judges"}
+              onToggleExpand={() => handlePanelToggle("judges")}
+            />
+            <Partners_And_Sponsors
+              isExpanded={expandedPanel === "partners"}
+              onToggleExpand={() => handlePanelToggle("partners")}
+            />
+          </div>
         </div>
-      </div>
+      </PermissionBoundary>
     </div>
   );
 };
diff --git a/src/features/Events/v1/Pages/ViewEvent.tsx b/src/features/Events/v1/Pages/ViewEvent.tsx
index a91848b..dd403ce 100644
--- a/src/features/Events/v1/Pages/ViewEvent.tsx
+++ b/src/features/Events/v1/Pages/ViewEvent.tsx
@@ -1,4 +1,5 @@
 import Event_View_Header from "../Sections/Event_View_Header";
+import { AccessDenied, Event_Permissions, PermissionBoundary, PermissionLoading } from "@/permissions";
 import EventTable from "../Components/EventTable";
 import { FaRocket, FaCode, FaGlobe, FaBolt, FaPalette } from "react-icons/fa";
 import { Event } from "../Event.type";
@@ -80,9 +81,20 @@ const ViewEvent = () => {
   return (
     <div className="w-full h-full flex flex-col cd-page">
       <Event_View_Header />
-      <div className="w-full h-full p-[3vw]">
-        <EventTable events={events} itemsPerPage={5} />
-      </div>
+      <PermissionBoundary
+        permission={Event_Permissions.VIEW_EVENT}
+        loadingFallback={<PermissionLoading />}
+        unauthorizedFallback={
+          <AccessDenied
+            title="Event access is unavailable"
+            description="This view is only shown to members who can view event schedules, participation, and management actions."
+          />
+        }
+      >
+        <div className="w-full h-full p-[3vw]">
+          <EventTable events={events} itemsPerPage={5} />
+        </div>
+      </PermissionBoundary>
     </div>
   );
 };
diff --git a/src/features/Events/v1/Sections/Event_Header.tsx b/src/features/Events/v1/Sections/Event_Header.tsx
index fdc93a8..9e8c51c 100644
--- a/src/features/Events/v1/Sections/Event_Header.tsx
+++ b/src/features/Events/v1/Sections/Event_Header.tsx
@@ -1,4 +1,5 @@
 import Button from "../../../../Component/ui/Button";
+import { Event_Permissions, PermissionGate } from "@/permissions";
 import { Link } from "react-router";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { MdPublish } from "react-icons/md";
@@ -23,12 +24,20 @@ const Event_Header = () => {
       </Link>
 
       <div className="w-1/2 xl:w-fit h-full mr-[3vw] flex justify-end gap-3">
-        <Button text="Save Draft" variant="secondary" onClick={() => alert("Save Draft clicked")} />
-        <Button
-          text="Create Event"
-          icon={<MdPublish className="inline" />}
-          onClick={() => alert("Create Event clicked")}
-        />
+        <PermissionGate permission={Event_Permissions.CREATE_EVENT}>
+          <Button
+            text="Save Draft"
+            variant="secondary"
+            onClick={() => alert("Save Draft clicked")}
+          />
+        </PermissionGate>
+        <PermissionGate permission={Event_Permissions.PUBLISH_EVENT}>
+          <Button
+            text="Create Event"
+            icon={<MdPublish className="inline" />}
+            onClick={() => alert("Create Event clicked")}
+          />
+        </PermissionGate>
       </div>
     </div>
   );
diff --git a/src/features/Events/v1/Sections/Event_View_Header.tsx b/src/features/Events/v1/Sections/Event_View_Header.tsx
index 09831a7..ee36eb3 100644
--- a/src/features/Events/v1/Sections/Event_View_Header.tsx
+++ b/src/features/Events/v1/Sections/Event_View_Header.tsx
@@ -1,4 +1,5 @@
 import Button from "@/Component/ui/Button";
+import { Event_Permissions, PermissionGate } from "@/permissions";
 import { useCallback, useState } from "react";
 import { IoMdAdd } from "react-icons/io";
 import { useNavigate } from "react-router-dom";
@@ -32,13 +33,15 @@ const Event_View_Header = () => {
             Manage all your events in one place. Create, edit, and track event details with ease.
           </p>
         </div>
-        <div className="flex items-center mr-[2vw]">
-          <Button
-            text="Create Event"
-            onClick={() => navigate("/org/create-event")}
-            icon={<IoMdAdd />}
-          />
-        </div>
+        <PermissionGate permission={Event_Permissions.CREATE_EVENT}>
+          <div className="flex items-center mr-[2vw]">
+            <Button
+              text="Create Event"
+              onClick={() => navigate("/org/create-event")}
+              icon={<IoMdAdd />}
+            />
+          </div>
+        </PermissionGate>
       </div>
 
       <div className="flex space-x-1 mt-[4vh] ml-5 px-3">
diff --git a/src/features/Member/v1/Components/MemberHeader.tsx b/src/features/Member/v1/Components/MemberHeader.tsx
index 37e9e70..9b8b6c4 100644
--- a/src/features/Member/v1/Components/MemberHeader.tsx
+++ b/src/features/Member/v1/Components/MemberHeader.tsx
@@ -1,4 +1,5 @@
 import Button from "@/Component/ui/Button";
+import { Member_Permissions, PermissionGate } from "@/permissions";
 import { IoPersonAdd } from "react-icons/io5";
 import { useNavigate } from "react-router";
 
@@ -31,11 +32,13 @@ const MemberHeader = () => {
         </span>
       </div>
       <div className="w-1/3 h-full flex justify-end items-center gap-3 px-5">
-        <Button
-          text="Add Member"
-          onClick={() => navigate("/org/add-member")}
-          icon={<IoPersonAdd />}
-        />
+        <PermissionGate permission={Member_Permissions.CREATE_MEMBER}>
+          <Button
+            text="Add Member"
+            onClick={() => navigate("/org/add-member")}
+            icon={<IoPersonAdd />}
+          />
+        </PermissionGate>
         <img
           src="https://randomuser.me/api/portraits/men/1.jpg"
           className="w-9 h-9 rounded-full object-cover"
diff --git a/src/features/Member/v1/Components/MemberTable.tsx b/src/features/Member/v1/Components/MemberTable.tsx
index 100fca1..166b59f 100644
--- a/src/features/Member/v1/Components/MemberTable.tsx
+++ b/src/features/Member/v1/Components/MemberTable.tsx
@@ -1,5 +1,5 @@
-import { BsThreeDotsVertical } from "react-icons/bs";
 import { FaCertificate } from "react-icons/fa";
+import { Member_Permissions, usePermissionMap } from "@/permissions";
 import RoleChip from "./RoleChip";
 import StatusChip from "./StatusChip";
 
@@ -15,6 +15,12 @@ type MemberTableProps = {
 };
 
 const MemberTable = ({ members }: MemberTableProps) => {
+  const { canEdit, canDelete } = usePermissionMap({
+    canEdit: Member_Permissions.UPDATE_MEMBER,
+    canDelete: Member_Permissions.DELETE_MEMBER,
+  });
+  const canManageMembers = canEdit || canDelete;
+
   return (
     <div
       className="w-[90%] mt-4 rounded-2xl overflow-hidden"
@@ -28,7 +34,7 @@ const MemberTable = ({ members }: MemberTableProps) => {
             <th>Status</th>
             <th>Skills</th>
             <th>Certificates</th>
-            <th>Actions</th>
+            {canManageMembers && <th>Actions</th>}
           </tr>
         </thead>
         <tbody>
@@ -55,21 +61,18 @@ const MemberTable = ({ members }: MemberTableProps) => {
                 <FaCertificate className="inline mr-1.5" style={{ color: "var(--cd-warning)" }} />
                 {member.certificates}
               </td>
-              <td>
-                <button
-                  className="p-2 rounded-lg transition-colors"
-                  style={{ color: "var(--cd-text-2)" }}
-                  onMouseEnter={(e) =>
-                    ((e.currentTarget as HTMLButtonElement).style.backgroundColor =
-                      "var(--cd-hover)")
-                  }
-                  onMouseLeave={(e) =>
-                    ((e.currentTarget as HTMLButtonElement).style.backgroundColor = "transparent")
-                  }
-                >
-                  <BsThreeDotsVertical />
-                </button>
-              </td>
+              {canManageMembers && (
+                <td>
+                  <div className="flex items-center gap-2">
+                    {canEdit && (
+                      <button className="cd-btn cd-btn-secondary px-3 py-1 text-xs">Edit</button>
+                    )}
+                    {canDelete && (
+                      <button className="cd-btn cd-btn-danger px-3 py-1 text-xs">Delete</button>
+                    )}
+                  </div>
+                </td>
+              )}
             </tr>
           ))}
         </tbody>
diff --git a/src/features/Member/v1/Pages/MemberPage.tsx b/src/features/Member/v1/Pages/MemberPage.tsx
index 8ba6956..33c165c 100644
--- a/src/features/Member/v1/Pages/MemberPage.tsx
+++ b/src/features/Member/v1/Pages/MemberPage.tsx
@@ -1,4 +1,5 @@
 import MemberHeader from "../Components/MemberHeader";
+import { AccessDenied, Member_Permissions, PermissionBoundary, PermissionLoading } from "@/permissions";
 import MemberTable from "../Components/MemberTable";
 import SearchMember from "../Components/SearchMember";
 
@@ -41,8 +42,19 @@ const MemberPage = () => {
   return (
     <div className="w-full h-screen flex flex-col items-center gap-4 cd-page">
       <MemberHeader />
-      <SearchMember />
-      <MemberTable members={membersData} />
+      <PermissionBoundary
+        permission={Member_Permissions.VIEW_MEMBER}
+        loadingFallback={<PermissionLoading />}
+        unauthorizedFallback={
+          <AccessDenied
+            title="Member directory access is unavailable"
+            description="Ask an administrator for member viewing permission to browse profiles and management actions."
+          />
+        }
+      >
+        <SearchMember />
+        <MemberTable members={membersData} />
+      </PermissionBoundary>
     </div>
   );
 };
diff --git a/src/features/Projects/Pages/ProjectsPage.tsx b/src/features/Projects/Pages/ProjectsPage.tsx
index 3f40849..26f4f2d 100644
--- a/src/features/Projects/Pages/ProjectsPage.tsx
+++ b/src/features/Projects/Pages/ProjectsPage.tsx
@@ -1,15 +1,27 @@
 import PagePlaceholder from "@/features/Member/v1/Components/PagePlaceholder";
+import { AccessDenied, PermissionBoundary, PermissionLoading, Project_Permissions } from "@/permissions";
 
 const ProjectsPage = () => {
   return (
-    <div className="flex item-center h-full w-full justify-center">
-      <div className="w-1/2 h-1/2 flex items-center justify-center ">
-        <PagePlaceholder
-          title="Projects"
-          description="Manage your projects, tasks, and timelines."
+    <PermissionBoundary
+      permission={Project_Permissions.VIEW_PROJECT}
+      loadingFallback={<PermissionLoading />}
+      unauthorizedFallback={
+        <AccessDenied
+          title="Project access is unavailable"
+          description="Project pages are only shown to users with project visibility permission."
         />
+      }
+    >
+      <div className="flex item-center h-full w-full justify-center">
+        <div className="w-1/2 h-1/2 flex items-center justify-center ">
+          <PagePlaceholder
+            title="Projects"
+            description="Manage your projects, tasks, and timelines."
+          />
+        </div>
       </div>
-    </div>
+    </PermissionBoundary>
   );
 };
 
diff --git a/src/main.tsx b/src/main.tsx
index eb90262..f68bd30 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,9 @@
 import App from "./App";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { PermissionBootstrap } from "./permissions";
+import { store } from "./store";
 import { ThemeProvider } from "./theme/provider";
 import { SidebarProvider } from "./context/SidebarContext";
 
@@ -10,11 +13,16 @@ const container = document.getElementById("root");
 const root = createRoot(container!);
 
 root.render(
-  <QueryClientProvider client={queryClient}>
-    <ThemeProvider>
-      <SidebarProvider>
-        <App />
-      </SidebarProvider>
-    </ThemeProvider>
-  </QueryClientProvider>,
+  <React.StrictMode>
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          <SidebarProvider>
+            <PermissionBootstrap />
+            <App />
+          </SidebarProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </Provider>
+  </React.StrictMode>,
 );
diff --git a/src/permissions/AccessDenied.tsx b/src/permissions/AccessDenied.tsx
new file mode 100644
index 0000000..93e7983
--- /dev/null
+++ b/src/permissions/AccessDenied.tsx
@@ -0,0 +1,38 @@
+type AccessDeniedProps = {
+  title: string;
+  description: string;
+};
+
+const AccessDenied = ({ title, description }: AccessDeniedProps) => {
+  return (
+    <div className="flex w-full justify-center p-6 sm:p-10">
+      <div
+        className="w-full max-w-3xl rounded-3xl p-8 sm:p-10 text-center"
+        style={{
+          background:
+            "linear-gradient(145deg, var(--cd-surface), color-mix(in srgb, var(--cd-primary) 7%, var(--cd-surface)))",
+          border: "1px solid var(--cd-border)",
+          boxShadow: "0 18px 50px var(--cd-shadow)",
+        }}
+      >
+        <span
+          className="inline-flex rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em]"
+          style={{
+            backgroundColor: "var(--cd-primary-subtle)",
+            color: "var(--cd-primary-text)",
+          }}
+        >
+          Permission required
+        </span>
+        <h2 className="mt-5 text-2xl font-bold" style={{ color: "var(--cd-text)" }}>
+          {title}
+        </h2>
+        <p className="mt-3 text-sm sm:text-base" style={{ color: "var(--cd-text-2)" }}>
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default AccessDenied;
diff --git a/src/permissions/PermissionBootstrap.tsx b/src/permissions/PermissionBootstrap.tsx
new file mode 100644
index 0000000..b60bb56
--- /dev/null
+++ b/src/permissions/PermissionBootstrap.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { fetchUserPermissions, getCurrentUser, permissionQueryKeys } from "@/permissions/permission.service";
+import { toErrorMessage } from "@/permissions/utils";
+import { useAppDispatch } from "@/store/hooks";
+import { setPermissionError, setPermissions, setPermissionStatus } from "@/store/permissionsSlice";
+
+export function PermissionBootstrap() {
+  const dispatch = useAppDispatch();
+  const user = getCurrentUser();
+  const query = useQuery({
+    queryKey: permissionQueryKeys.byRole(user.role),
+    queryFn: () => fetchUserPermissions(user),
+    staleTime: 1000 * 60 * 5,
+  });
+
+  useEffect(() => {
+    if (query.isPending) {
+      dispatch(setPermissionStatus("loading"));
+      return;
+    }
+
+    if (query.isError) {
+      dispatch(setPermissionError(toErrorMessage(query.error)));
+      return;
+    }
+
+    if (query.data) {
+      dispatch(
+        setPermissions({
+          permissions: query.data,
+          syncedAt: new Date().toISOString(),
+        }),
+      );
+    }
+  }, [dispatch, query.data, query.error, query.isError, query.isPending]);
+
+  return null;
+}
diff --git a/src/permissions/PermissionBoundary.tsx b/src/permissions/PermissionBoundary.tsx
new file mode 100644
index 0000000..de8e0ad
--- /dev/null
+++ b/src/permissions/PermissionBoundary.tsx
@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { useAuthorization } from "@/permissions/useAuthorization";
+import { type PermissionRequirement } from "@/permissions/types";
+
+type PermissionBoundaryProps = {
+  permission?: PermissionRequirement;
+  requireAll?: boolean;
+  loadingFallback?: ReactNode;
+  unauthorizedFallback?: ReactNode;
+  children: ReactNode;
+};
+
+const PermissionBoundary = ({
+  permission,
+  requireAll = false,
+  loadingFallback = null,
+  unauthorizedFallback = null,
+  children,
+}: PermissionBoundaryProps) => {
+  const { isLoading, hasPermission } = useAuthorization(permission, { requireAll });
+
+  if (isLoading) return <>{loadingFallback}</>;
+  if (!hasPermission) return <>{unauthorizedFallback}</>;
+
+  return <>{children}</>;
+};
+
+export default PermissionBoundary;
diff --git a/src/permissions/PermissionLoading.tsx b/src/permissions/PermissionLoading.tsx
new file mode 100644
index 0000000..c0881e9
--- /dev/null
+++ b/src/permissions/PermissionLoading.tsx
@@ -0,0 +1,33 @@
+type PermissionLoadingProps = {
+  title?: string;
+  description?: string;
+};
+
+const PermissionLoading = ({
+  title = "Checking access",
+  description = "We are validating your permissions and preparing the right actions for this screen.",
+}: PermissionLoadingProps) => {
+  return (
+    <div className="flex w-full justify-center p-6 sm:p-10">
+      <div
+        className="w-full max-w-3xl rounded-3xl p-8 sm:p-10 text-center"
+        style={{
+          background:
+            "linear-gradient(145deg, var(--cd-surface), color-mix(in srgb, var(--cd-primary) 5%, var(--cd-surface)))",
+          border: "1px solid var(--cd-border)",
+          boxShadow: "0 18px 50px var(--cd-shadow)",
+        }}
+      >
+        <div className="mx-auto h-11 w-11 animate-pulse rounded-2xl bg-[var(--cd-primary-subtle)]" />
+        <h2 className="mt-5 text-2xl font-bold" style={{ color: "var(--cd-text)" }}>
+          {title}
+        </h2>
+        <p className="mt-3 text-sm sm:text-base" style={{ color: "var(--cd-text-2)" }}>
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PermissionLoading;
diff --git a/src/permissions/constants.ts b/src/permissions/constants.ts
new file mode 100644
index 0000000..2ec1af4
--- /dev/null
+++ b/src/permissions/constants.ts
@@ -0,0 +1,38 @@
+export const Event_Permissions = {
+  CREATE_EVENT: "event:create",
+  UPDATE_EVENT: "event:update",
+  DELETE_EVENT: "event:delete",
+  VIEW_EVENT: "event:view",
+  PUBLISH_EVENT: "event:publish",
+  JOIN_EVENT: "event:join",
+  LEAVE_EVENT: "event:leave",
+} as const;
+
+export const Member_Permissions = {
+  CREATE_MEMBER: "member:create",
+  UPDATE_MEMBER: "member:update",
+  DELETE_MEMBER: "member:delete",
+  VIEW_MEMBER: "member:view",
+} as const;
+
+export const Contact_Permissions = {
+  VIEW_CONTACT_DIRECTORY: "contact:view",
+  EMAIL_CONTACT: "contact:email",
+  SUBMIT_SUPPORT_TICKET: "contact:support",
+} as const;
+
+export const Project_Permissions = {
+  VIEW_PROJECT: "project:view",
+  CREATE_PROJECT: "project:create",
+  UPDATE_PROJECT: "project:update",
+  DELETE_PROJECT: "project:delete",
+} as const;
+
+export const App_Permissions = {
+  ...Event_Permissions,
+  ...Member_Permissions,
+  ...Contact_Permissions,
+  ...Project_Permissions,
+} as const;
+
+export type Permission = (typeof App_Permissions)[keyof typeof App_Permissions];
diff --git a/src/permissions/index.ts b/src/permissions/index.ts
new file mode 100644
index 0000000..879c065
--- /dev/null
+++ b/src/permissions/index.ts
@@ -0,0 +1,8 @@
+export * from "./constants";
+export * from "./selectors";
+export * from "./types";
+export * from "./useAuthorization";
+export { PermissionBootstrap } from "./PermissionBootstrap";
+export { default as AccessDenied } from "./AccessDenied";
+export { default as PermissionBoundary } from "./PermissionBoundary";
+export { default as PermissionLoading } from "./PermissionLoading";
diff --git a/src/permissions/permission.service.ts b/src/permissions/permission.service.ts
new file mode 100644
index 0000000..da3562f
--- /dev/null
+++ b/src/permissions/permission.service.ts
@@ -0,0 +1,38 @@
+import { dashboardData } from "@/features/Member/v1/mock/dashboardData";
+import { type User } from "@/features/Dashboard/Member/v1/Type/dashboard";
+import {
+  App_Permissions,
+  Contact_Permissions,
+  Event_Permissions,
+  Member_Permissions,
+  Project_Permissions,
+  type Permission,
+} from "@/permissions/constants";
+import { type PermissionQueryUser } from "@/permissions/types";
+
+const ROLE_PERMISSION_MAP: Record<User["role"], Permission[]> = {
+  Admin: Object.values(App_Permissions),
+  Member: [
+    Event_Permissions.VIEW_EVENT,
+    Event_Permissions.JOIN_EVENT,
+    Event_Permissions.LEAVE_EVENT,
+    Member_Permissions.VIEW_MEMBER,
+    Contact_Permissions.VIEW_CONTACT_DIRECTORY,
+    Contact_Permissions.SUBMIT_SUPPORT_TICKET,
+    Project_Permissions.VIEW_PROJECT,
+  ],
+};
+
+export const permissionQueryKeys = {
+  all: ["permissions"] as const,
+  byRole: (role: string) => [...permissionQueryKeys.all, role] as const,
+};
+
+export async function fetchUserPermissions(user: PermissionQueryUser = getCurrentUser()): Promise<Permission[]> {
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  return ROLE_PERMISSION_MAP[user.role as User["role"]] ?? [];
+}
+
+export function getCurrentUser(): PermissionQueryUser {
+  return dashboardData.user;
+}
diff --git a/src/permissions/selectors.ts b/src/permissions/selectors.ts
new file mode 100644
index 0000000..c70815c
--- /dev/null
+++ b/src/permissions/selectors.ts
@@ -0,0 +1,6 @@
+import { type RootState } from "@/store";
+
+export const selectPermissionState = (state: RootState) => state.permissions;
+export const selectGrantedPermissions = (state: RootState) => state.permissions.permissions;
+export const selectPermissionStatus = (state: RootState) => state.permissions.status;
+export const selectPermissionError = (state: RootState) => state.permissions.error;
diff --git a/src/permissions/types.ts b/src/permissions/types.ts
new file mode 100644
index 0000000..d998dcc
--- /dev/null
+++ b/src/permissions/types.ts
@@ -0,0 +1,21 @@
+import { type Permission } from "@/permissions/constants";
+
+export type PermissionStatus = "idle" | "loading" | "success" | "error";
+export type PermissionRequirement = Permission | Permission[] | undefined;
+export type PermissionCheckMode = "any" | "all";
+
+export type PermissionQueryUser = {
+  name: string;
+  role: string;
+};
+
+export type PermissionAccessResult = {
+  hasPermission: boolean;
+  permissions: Permission[];
+  requestedPermissions: Permission[];
+  isLoading: boolean;
+  isReady: boolean;
+  isError: boolean;
+  status: PermissionStatus;
+  error: string | null;
+};
diff --git a/src/permissions/useAuthorization.tsx b/src/permissions/useAuthorization.tsx
new file mode 100644
index 0000000..7cf0ba7
--- /dev/null
+++ b/src/permissions/useAuthorization.tsx
@@ -0,0 +1,84 @@
+import { type ReactNode, useMemo } from "react";
+import { type Permission } from "@/permissions/constants";
+import { selectPermissionState } from "@/permissions/selectors";
+import { type PermissionAccessResult, type PermissionCheckMode, type PermissionRequirement } from "@/permissions/types";
+import { hasRequiredPermissions, normalizePermissions } from "@/permissions/utils";
+import { useAppSelector } from "@/store/hooks";
+
+type AuthorizationOptions = {
+  requireAll?: boolean;
+};
+
+export function useAuthorization(
+  requestedPermissions?: PermissionRequirement,
+  options: AuthorizationOptions = {},
+) : PermissionAccessResult {
+  const { permissions, status, error } = useAppSelector(selectPermissionState);
+  const requested = useMemo(
+    () => normalizePermissions(requestedPermissions),
+    [requestedPermissions],
+  );
+  const mode: PermissionCheckMode = options.requireAll ? "all" : "any";
+  const hasPermission = hasRequiredPermissions(permissions, requested, mode);
+
+  return {
+    hasPermission,
+    permissions,
+    requestedPermissions: requested,
+    isLoading: status === "loading" || status === "idle",
+    isReady: status === "success",
+    isError: status === "error",
+    status,
+    error,
+  };
+}
+
+export function usePermissionMap<T extends Record<string, Permission | Permission[]>>(config: T) {
+  const { permissions, status, error } = useAppSelector(selectPermissionState);
+
+  const accessMap = useMemo(() => {
+    return Object.entries(config).reduce(
+      (result, [key, requirement]) => {
+        result[key as keyof T] = hasRequiredPermissions(
+          permissions,
+          normalizePermissions(requirement),
+          "any",
+        );
+        return result;
+      },
+      {} as { [K in keyof T]: boolean },
+    );
+  }, [config, permissions]);
+
+  return {
+    ...accessMap,
+    isLoading: status === "loading" || status === "idle",
+    isReady: status === "success",
+    isError: status === "error",
+    error,
+  };
+}
+
+type IfAuthorizedProps = {
+  permission?: PermissionRequirement;
+  requireAll?: boolean;
+  fallback?: ReactNode;
+  loadingFallback?: ReactNode;
+  children: ReactNode;
+};
+
+export function PermissionGate({
+  permission,
+  requireAll = false,
+  fallback = null,
+  loadingFallback = null,
+  children,
+}: IfAuthorizedProps) {
+  const { hasPermission, isLoading } = useAuthorization(permission, { requireAll });
+
+  if (isLoading) return <>{loadingFallback}</>;
+
+  return hasPermission ? <>{children}</> : <>{fallback}</>;
+}
+
+export const IfAuthorized = PermissionGate;
diff --git a/src/permissions/utils.ts b/src/permissions/utils.ts
new file mode 100644
index 0000000..453dacb
--- /dev/null
+++ b/src/permissions/utils.ts
@@ -0,0 +1,24 @@
+import { type Permission } from "@/permissions/constants";
+import { type PermissionCheckMode, type PermissionRequirement } from "@/permissions/types";
+
+export function normalizePermissions(requirement: PermissionRequirement): Permission[] {
+  if (!requirement) return [];
+  return Array.isArray(requirement) ? requirement : [requirement];
+}
+
+export function hasRequiredPermissions(
+  grantedPermissions: Permission[],
+  requiredPermissions: Permission[],
+  mode: PermissionCheckMode = "any",
+) {
+  if (requiredPermissions.length === 0) return true;
+
+  return mode === "all"
+    ? requiredPermissions.every((permission) => grantedPermissions.includes(permission))
+    : requiredPermissions.some((permission) => grantedPermissions.includes(permission));
+}
+
+export function toErrorMessage(error: unknown) {
+  if (error instanceof Error) return error.message;
+  return "Unable to load permissions.";
+}
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
new file mode 100644
index 0000000..2b4bf1f
--- /dev/null
+++ b/src/store/hooks.ts
@@ -0,0 +1,5 @@
+import { useDispatch, useSelector, type TypedUseSelectorHook } from "react-redux";
+import { type AppDispatch, type RootState } from "@/store";
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..4d27fb8
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { permissionsReducer } from "@/store/permissionsSlice";
+
+export const store = configureStore({
+  reducer: {
+    permissions: permissionsReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/store/permissionsSlice.ts b/src/store/permissionsSlice.ts
new file mode 100644
index 0000000..8ee3c94
--- /dev/null
+++ b/src/store/permissionsSlice.ts
@@ -0,0 +1,50 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import { type Permission } from "@/permissions/constants";
+import { type PermissionStatus } from "@/permissions/types";
+
+type PermissionState = {
+  permissions: Permission[];
+  status: PermissionStatus;
+  error: string | null;
+  lastUpdatedAt: string | null;
+};
+
+const initialState: PermissionState = {
+  permissions: [],
+  status: "idle",
+  error: null,
+  lastUpdatedAt: null,
+};
+
+const permissionsSlice = createSlice({
+  name: "permissions",
+  initialState,
+  reducers: {
+    setPermissionStatus(state, action: PayloadAction<PermissionState["status"]>) {
+      state.status = action.payload;
+    },
+    setPermissions(
+      state,
+      action: PayloadAction<{ permissions: Permission[]; syncedAt: string }>,
+    ) {
+      state.permissions = action.payload.permissions;
+      state.status = "success";
+      state.error = null;
+      state.lastUpdatedAt = action.payload.syncedAt;
+    },
+    setPermissionError(state, action: PayloadAction<string>) {
+      state.status = "error";
+      state.error = action.payload;
+    },
+    clearPermissions(state) {
+      state.permissions = [];
+      state.status = "idle";
+      state.error = null;
+      state.lastUpdatedAt = null;
+    },
+  },
+});
+
+export const { clearPermissions, setPermissions, setPermissionError, setPermissionStatus } =
+  permissionsSlice.actions;
+export const permissionsReducer = permissionsSlice.reducer;