diff --git a/.prettierignore b/.prettierignore
index 209260b..ab1293b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,4 +2,6 @@ dist
 node_modules
 src-tauri/target
 src-tauri/gen
-pnpm-lock.yaml
\ No newline at end of file
+pnpm-lock.yaml
+
+.github/*
\ No newline at end of file
diff --git a/Contributing.md b/Contributing.md
index c6e38f5..159d2a1 100644
--- a/Contributing.md
+++ b/Contributing.md
@@ -2,17 +2,18 @@
 
 Thank you for your interest in contributing to CommDesk.
 
-***CommDesk*** is a desktop platform for *communities*, *clubs*, *organizations*, and *event teams*. Contributions that improve *usability*, *reliability*, *documentation*, *maintainability*, and *developer experience* are welcome.
+**_CommDesk_** is a desktop platform for _communities_, _clubs_, _organizations_, and _event teams_. Contributions that improve _usability_, _reliability_, _documentation_, _maintainability_, and _developer experience_ are welcome.
 
 ## Before You Start
 
 Before making changes, please review the **existing documentation** and **project structure** to understand the current scope of the repository.
 
 This repository includes:
-- A *React* + *TypeScript* **frontend**
-- A *Tauri* **desktop application** layer
-- A *Rust* backend under `src-tauri`
-- *Documentation* for project scope, implementation status, and release flow
+
+- A _React_ + _TypeScript_ **frontend**
+- A _Tauri_ **desktop application** layer
+- A _Rust_ backend under `src-tauri`
+- _Documentation_ for project scope, implementation status, and release flow
 
 ## Prerequisites
 
@@ -23,7 +24,7 @@ To work on this project, you should have the following installed:
 - **Rust stable** (`rustup`, `cargo`)
 - The platform-specific dependencies required by **Tauri**
 
-For *Linux*, *macOS*, and *Windows*, please ensure the appropriate system dependencies are installed before building the project.
+For _Linux_, _macOS_, and _Windows_, please ensure the appropriate system dependencies are installed before building the project.
 
 ## Getting Started
 
@@ -40,7 +41,7 @@ For *Linux*, *macOS*, and *Windows*, please ensure the appropriate system depend
 git clone https://github.com/NexGenStudioDev/CommDesk.git
 cd CommDesk
 pnpm install
-````
+```
 
 ### Run the Application
 
@@ -58,33 +59,33 @@ pnpm dev
 
 ## Branch Naming
 
-Use a *descriptive branch name* for your work.
+Use a _descriptive branch name_ for your work.
 
 Recommended formats:
 
-* `feature/<short-description>`
-* `fix/<short-description>`
-* `docs/<short-description>`
-* `refactor/<short-description>`
+- `feature/<short-description>`
+- `fix/<short-description>`
+- `docs/<short-description>`
+- `refactor/<short-description>`
 
 Examples:
 
-* `feature/member-search`
-* `fix/login-error`
-* `docs/update-readme`
+- `feature/member-search`
+- `fix/login-error`
+- `docs/update-readme`
 
 ## Coding Standards
 
-Please follow the existing *code style* and *project conventions*.
+Please follow the existing _code style_ and _project conventions_.
 
 General expectations:
 
-* Keep changes focused and minimal
-* Write clear, readable, and maintainable code
-* Follow the current folder structure and architecture
-* Avoid introducing unnecessary dependencies
-* Prefer small, reusable components and functions
-* Keep frontend and backend changes consistent with the existing design
+- Keep changes focused and minimal
+- Write clear, readable, and maintainable code
+- Follow the current folder structure and architecture
+- Avoid introducing unnecessary dependencies
+- Prefer small, reusable components and functions
+- Keep frontend and backend changes consistent with the existing design
 
 Before submitting, format and lint your code where applicable.
 
@@ -94,10 +95,10 @@ All contributions should be tested locally before submission.
 
 At minimum, verify:
 
-* The application starts successfully
-* The change works as intended
-* Existing functionality is not broken
-* The project passes linting and build checks where relevant
+- The application starts successfully
+- The change works as intended
+- Existing functionality is not broken
+- The project passes linting and build checks where relevant
 
 Useful commands:
 
@@ -113,34 +114,34 @@ If your contribution affects desktop packaging or Rust functionality, test the r
 
 Before opening a new issue:
 
-* Search existing issues to avoid duplicates
-* Use a clear and descriptive title
-* Include steps to reproduce the problem
-* Add screenshots, logs, or environment details when relevant
+- Search existing issues to avoid duplicates
+- Use a clear and descriptive title
+- Include steps to reproduce the problem
+- Add screenshots, logs, or environment details when relevant
 
 A good bug report should explain:
 
-* What you expected to happen
-* What actually happened
-* How to reproduce the issue
-* Which platform and version you used
+- What you expected to happen
+- What actually happened
+- How to reproduce the issue
+- Which platform and version you used
 
 ## Pull Request Guidelines
 
 When opening a pull request, please ensure that:
 
-* The pull request has a clear title
-* The description explains what was changed and why
-* Related issues are linked when applicable
-* The changes are limited to a single purpose where possible
-* The branch is up to date with the target branch before submission
+- The pull request has a clear title
+- The description explains what was changed and why
+- Related issues are linked when applicable
+- The changes are limited to a single purpose where possible
+- The branch is up to date with the target branch before submission
 
 A strong pull request should include:
 
-* A short summary of the change
-* Screenshots or recordings for UI updates
-* Testing notes
-* Any relevant context for reviewers
+- A short summary of the change
+- Screenshots or recordings for UI updates
+- Testing notes
+- Any relevant context for reviewers
 
 ## Commit Messages
 
@@ -148,10 +149,10 @@ Use concise and meaningful commit messages.
 
 Recommended style:
 
-* `feat: add member search`
-* `fix: resolve updater issue`
-* `docs: improve contribution guide`
-* `refactor: simplify event module`
+- `feat: add member search`
+- `fix: resolve updater issue`
+- `docs: improve contribution guide`
+- `refactor: simplify event module`
 
 ## Security and Secrets
 
@@ -165,10 +166,10 @@ Please keep discussions respectful, constructive, and professional.
 
 Be considerate in:
 
-* Issues
-* Pull requests
-* Code reviews
-* Documentation discussions
+- Issues
+- Pull requests
+- Code reviews
+- Documentation discussions
 
 This project follows a [code of conduct](CODE_OF_CONDUCT.md). All contributors are expected to follow it.
 
@@ -178,4 +179,4 @@ Maintainers may request changes before merging a pull request. Please respond to
 
 ## License
 
-**By contributing to CommDesk, you agree that your contributions will be made under the same [License](LICENSE) as the project.**
\ No newline at end of file
+**By contributing to CommDesk, you agree that your contributions will be made under the same [License](LICENSE) as the project.**
diff --git a/docs/AUTO_UPDATE_SETUP_GUIDE.md b/docs/AUTO_UPDATE_SETUP_GUIDE.md
index 81e8ca2..d154703 100644
--- a/docs/AUTO_UPDATE_SETUP_GUIDE.md
+++ b/docs/AUTO_UPDATE_SETUP_GUIDE.md
@@ -1,4 +1,4 @@
-# 🚀 CommDesk Auto-Update System 
+# 🚀 CommDesk Auto-Update System
 
 # Enterprise-Grade Auto-Update Infrastructure for Tauri, Snap, Flathub, AppImage, Windows & macOS
 
@@ -6,32 +6,31 @@ This document is the complete source of truth for implementing, deploying, secur
 
 It covers:
 
-* Tauri auto-updater
-* GitHub Releases integration
-* Snap auto-updates
-* Flathub auto-updates
-* Release signing
-* CI/CD automation
-* Rollback systems
-* Security verification
-* Production deployment
-* Monitoring & analytics
-* Enterprise release workflows
+- Tauri auto-updater
+- GitHub Releases integration
+- Snap auto-updates
+- Flathub auto-updates
+- Release signing
+- CI/CD automation
+- Rollback systems
+- Security verification
+- Production deployment
+- Monitoring & analytics
+- Enterprise release workflows
 
 Reference architecture and implementation details:
 
-
 ---
 
 # 🧠 What Is Auto-Update?
 
 Auto-update allows CommDesk to:
 
-* Detect new releases automatically
-* Download updates securely
-* Verify signatures
-* Install updates safely
-* Restart into the latest version
+- Detect new releases automatically
+- Download updates securely
+- Verify signatures
+- Install updates safely
+- Restart into the latest version
 
 without requiring users to manually reinstall the app.
 
@@ -93,11 +92,11 @@ Users
 
 Every update must be:
 
-* Signed
-* Verified
-* Version validated
-* Integrity checked
-* Securely downloaded
+- Signed
+- Verified
+- Version validated
+- Integrity checked
+- Securely downloaded
 
 ---
 
@@ -262,11 +261,11 @@ latest.json
 
 This latest.json is responsible for telling the Tauri updater:
 
-* what version is available
-* what notes to show the user
-* when the release was published
-* which download URL to use for each platform
-* which signature file to verify before installation
+- what version is available
+- what notes to show the user
+- when the release was published
+- which download URL to use for each platform
+- which signature file to verify before installation
 
 Before publishing latest.json, also create the matching signature file for each build artifact:
 
@@ -279,8 +278,6 @@ minisign -S \
 
 The resulting .sig file must be uploaded with the release and its signature content must be referenced inside latest.json.
 
-
-
 ---
 
 # Example
@@ -348,8 +345,7 @@ Restart app
 # React Example
 
 ```tsx id="jlwm8g"
-const { shouldUpdate, manifest } =
-await checkForUpdates();
+const { shouldUpdate, manifest } = await checkForUpdates();
 
 if (shouldUpdate) {
   await installUpdate();
@@ -361,11 +357,11 @@ if (shouldUpdate) {
 
 # Recommended Features
 
-* Update notification dialog
-* Release notes
-* Progress bar
-* Retry support
-* Restart button
+- Update notification dialog
+- Release notes
+- Progress bar
+- Retry support
+- Restart button
 
 ---
 
@@ -375,10 +371,10 @@ if (shouldUpdate) {
 
 Snapd automatically:
 
-* Checks every few hours
-* Downloads updates
-* Installs safely
-* Allows rollback
+- Checks every few hours
+- Downloads updates
+- Installs safely
+- Allows rollback
 
 ---
 
@@ -394,7 +390,7 @@ sudo apt install snapcraft
 
 ```yaml id="jlwm5c"
 name: commdesk
-version: '1.0.0'
+version: "1.0.0"
 
 grade: stable
 confinement: strict
@@ -547,12 +543,12 @@ User receives update
 
 GitHub Actions should:
 
-* Build app
-* Sign binaries
-* Generate latest.json
-* Upload GitHub release
-* Upload Snap
-* Build Flatpak
+- Build app
+- Sign binaries
+- Generate latest.json
+- Upload GitHub release
+- Upload Snap
+- Build Flatpak
 
 ---
 
@@ -679,11 +675,11 @@ CommDesk.old.AppImage
 
 Track:
 
-* Update success rate
-* Failed installs
-* Download stats
-* Adoption rate
-* Crash reports
+- Update success rate
+- Failed installs
+- Download stats
+- Adoption rate
+- Crash reports
 
 ---
 
@@ -691,7 +687,7 @@ Track:
 
 ```ts id="jlwm4y"
 trackUpdate("installed", {
-  version: "1.0.0"
+  version: "1.0.0",
 });
 ```
 
@@ -739,22 +735,22 @@ trackUpdate("installed", {
 
 ## Before Release
 
-* [ ] Version updated
-* [ ] CHANGELOG updated
-* [ ] Tests passing
-* [ ] Binaries signed
-* [ ] latest.json generated
-* [ ] GitHub release ready
+- [ ] Version updated
+- [ ] CHANGELOG updated
+- [ ] Tests passing
+- [ ] Binaries signed
+- [ ] latest.json generated
+- [ ] GitHub release ready
 
 ---
 
 ## After Release
 
-* [ ] GitHub release verified
-* [ ] Snap uploaded
-* [ ] Flathub updated
-* [ ] Update notification tested
-* [ ] Metrics monitored
+- [ ] GitHub release verified
+- [ ] Snap uploaded
+- [ ] Flathub updated
+- [ ] Update notification tested
+- [ ] Metrics monitored
 
 ---
 
@@ -764,10 +760,10 @@ trackUpdate("installed", {
 
 ## Causes
 
-* Invalid latest.json
-* Wrong signature
-* Incorrect version format
-* Broken URLs
+- Invalid latest.json
+- Wrong signature
+- Incorrect version format
+- Broken URLs
 
 ---
 
@@ -818,4 +814,3 @@ Users Receive Secure Updates
 ```
 
 ---
-
diff --git a/docs/FLATPAK_BUILD_GUIDE.md b/docs/FLATPAK_BUILD_GUIDE.md
index 4121549..63ed913 100644
--- a/docs/FLATPAK_BUILD_GUIDE.md
+++ b/docs/FLATPAK_BUILD_GUIDE.md
@@ -4,29 +4,29 @@
 
 CommDesk is designed as a modern large-scale desktop platform built using:
 
-* Tauri
-* Rust
-* React
-* TypeScript
-* Vite
+- Tauri
+- Rust
+- React
+- TypeScript
+- Vite
 
 This guide explains how to package, test, optimize, and distribute CommDesk for Linux using:
 
-* Flatpak
-* Snap
-* AppImage
-* Native Linux bundles
-* Enterprise-grade release workflows
+- Flatpak
+- Snap
+- AppImage
+- Native Linux bundles
+- Enterprise-grade release workflows
 
 ---
 
 # 📦 Supported Linux Distribution Formats
 
-| Format   | Best For                     | Sandbox  | Auto Update | Store Support   |
-| -------- | ---------------------------- | -------- | ----------- | --------------- |
-| Flatpak  | Universal Linux Distribution | ✅ Strong | ✅           | Flathub         |
-| Snap     | Ubuntu Ecosystem             | ✅ Strong | ✅           | Snap Store      |
-| AppImage | Portable Distribution        | ❌        | ❌ Manual    | Direct Download |
+| Format   | Best For                     | Sandbox   | Auto Update | Store Support   |
+| -------- | ---------------------------- | --------- | ----------- | --------------- |
+| Flatpak  | Universal Linux Distribution | ✅ Strong | ✅          | Flathub         |
+| Snap     | Ubuntu Ecosystem             | ✅ Strong | ✅          | Snap Store      |
+| AppImage | Portable Distribution        | ❌        | ❌ Manual   | Direct Download |
 | DEB      | Debian/Ubuntu                | ❌        | Manual/APT  | Native          |
 | RPM      | Fedora/RHEL                  | ❌        | Manual/DNF  | Native          |
 
@@ -40,11 +40,11 @@ This guide explains how to package, test, optimize, and distribute CommDesk for
 
 Best for:
 
-* Security
-* Sandboxing
-* Enterprise deployment
-* Cross-distro support
-* Flathub visibility
+- Security
+- Sandboxing
+- Enterprise deployment
+- Cross-distro support
+- Flathub visibility
 
 ---
 
@@ -54,10 +54,10 @@ Best for:
 
 Best for:
 
-* Portable usage
-* No installation required
-* Quick testing
-* Offline environments
+- Portable usage
+- No installation required
+- Quick testing
+- Offline environments
 
 ---
 
@@ -67,9 +67,9 @@ Best for:
 
 Best for:
 
-* Ubuntu ecosystem
-* Auto updates
-* Canonical Store distribution
+- Ubuntu ecosystem
+- Auto updates
+- Canonical Store distribution
 
 ---
 
@@ -175,8 +175,8 @@ cargo --version
 
 Recommended:
 
-* Node.js 20+
-* pnpm latest
+- Node.js 20+
+- pnpm latest
 
 Install:
 
@@ -210,11 +210,11 @@ commdesk/
 
 Flatpak provides:
 
-* Sandboxed execution
-* Cross-distribution support
-* Secure permissions
-* Runtime dependency isolation
-* Enterprise deployment compatibility
+- Sandboxed execution
+- Cross-distribution support
+- Secure permissions
+- Runtime dependency isolation
+- Enterprise deployment compatibility
 
 ---
 
@@ -271,11 +271,7 @@ org.commdesk.CommDesk.json
     {
       "name": "commdesk",
       "buildsystem": "simple",
-      "build-commands": [
-        "pnpm install",
-        "pnpm build",
-        "cargo build --release"
-      ],
+      "build-commands": ["pnpm install", "pnpm build", "cargo build --release"],
       "sources": [
         {
           "type": "dir",
@@ -390,11 +386,11 @@ flatpak run org.commdesk.CommDesk
 
 Snap provides:
 
-* Automatic updates
-* Ubuntu ecosystem integration
-* Canonical Store support
-* Sandboxing
-* Rollback support
+- Automatic updates
+- Ubuntu ecosystem integration
+- Canonical Store support
+- Sandboxing
+- Rollback support
 
 ---
 
@@ -421,7 +417,7 @@ mkdir snap
 ```yaml
 name: commdesk
 base: core24
-version: '1.0.0'
+version: "1.0.0"
 summary: CommDesk Community Management Platform
 description: |
   CommDesk is a modern community and event management platform.
@@ -484,10 +480,10 @@ snap run commdesk
 
 Best for:
 
-* Portable distribution
-* No installation
-* Easy testing
-* Direct downloads
+- Portable distribution
+- No installation
+- Easy testing
+- Direct downloads
 
 ---
 
@@ -591,32 +587,32 @@ build: {
 
 # Build Validation
 
-* [ ] TypeScript passes
-* [ ] Rust build passes
-* [ ] Flatpak launches
-* [ ] Snap launches
-* [ ] AppImage launches
-* [ ] GPU acceleration works
-* [ ] Network APIs work
-* [ ] File system permissions work
+- [ ] TypeScript passes
+- [ ] Rust build passes
+- [ ] Flatpak launches
+- [ ] Snap launches
+- [ ] AppImage launches
+- [ ] GPU acceleration works
+- [ ] Network APIs work
+- [ ] File system permissions work
 
 ---
 
 # Security Validation
 
-* [ ] Sandbox tested
-* [ ] No unnecessary permissions
-* [ ] Production env variables secured
-* [ ] Secrets removed from frontend
+- [ ] Sandbox tested
+- [ ] No unnecessary permissions
+- [ ] Production env variables secured
+- [ ] Secrets removed from frontend
 
 ---
 
 # Performance Validation
 
-* [ ] Cold start benchmark
-* [ ] Memory profiling
-* [ ] CPU usage profiling
-* [ ] Large dataset rendering test
+- [ ] Cold start benchmark
+- [ ] Memory profiling
+- [ ] CPU usage profiling
+- [ ] Large dataset rendering test
 
 ---
 
@@ -669,12 +665,12 @@ jobs:
 
 Ensure:
 
-* App icons added
-* Metadata complete
-* Screenshots prepared
-* License included
-* Permissions minimized
-* Stable builds verified
+- App icons added
+- Metadata complete
+- Screenshots prepared
+- License included
+- Permissions minimized
+- Stable builds verified
 
 ---
 
@@ -682,11 +678,11 @@ Ensure:
 
 | Asset        | Required |
 | ------------ | -------- |
-| App Icon     | ✅        |
-| Screenshots  | ✅        |
-| AppData XML  | ✅        |
-| LICENSE      | ✅        |
-| Desktop File | ✅        |
+| App Icon     | ✅       |
+| Screenshots  | ✅       |
+| AppData XML  | ✅       |
+| LICENSE      | ✅       |
+| Desktop File | ✅       |
 
 ---
 
@@ -698,11 +694,11 @@ Ensure:
 
 # 📚 Useful Resources
 
-* [Flatpak Documentation](https://docs.flatpak.org/?utm_source=chatgpt.com)
-* [Snapcraft Docs](https://snapcraft.io/docs?utm_source=chatgpt.com)
-* [Tauri Distribution Guide](https://tauri.app/distribute/?utm_source=chatgpt.com)
-* [AppImage Docs](https://docs.appimage.org/?utm_source=chatgpt.com)
-* [Flathub](https://flathub.org/?utm_source=chatgpt.com)
+- [Flatpak Documentation](https://docs.flatpak.org/?utm_source=chatgpt.com)
+- [Snapcraft Docs](https://snapcraft.io/docs?utm_source=chatgpt.com)
+- [Tauri Distribution Guide](https://tauri.app/distribute/?utm_source=chatgpt.com)
+- [AppImage Docs](https://docs.appimage.org/?utm_source=chatgpt.com)
+- [Flathub](https://flathub.org/?utm_source=chatgpt.com)
 
 ---
 
@@ -718,4 +714,3 @@ Ensure:
 | DEB/RPM      | Enterprise |
 
 ---
-
diff --git a/docs/PRODUCTION_DEPLOYMENT.md b/docs/PRODUCTION_DEPLOYMENT.md
index 296437e..103bd84 100644
--- a/docs/PRODUCTION_DEPLOYMENT.md
+++ b/docs/PRODUCTION_DEPLOYMENT.md
@@ -2,19 +2,18 @@
 
 ## Overview
 
-
 The goal is to transform CommDesk into a fully production-ready desktop platform capable of large-scale Linux distribution through:
 
-* Flatpak
-* Snap
-* AppImage
-* DEB
-* RPM
-* GitHub Releases
-* Flathub
-* Snap Store
+- Flatpak
+- Snap
+- AppImage
+- DEB
+- RPM
+- GitHub Releases
+- Flathub
+- Snap Store
 
-Reference documentation: 
+Reference documentation:
 
 ---
 
@@ -22,15 +21,15 @@ Reference documentation:
 
 ## Primary Goals
 
-* Add professional Linux distribution support
-* Introduce production deployment workflows
-* Add enterprise-grade release architecture
-* Standardize build systems
-* Implement secure auto-update infrastructure
-* Create scalable CI/CD pipelines
-* Add cross-platform packaging strategy
-* Improve release maintainability
-* Prepare CommDesk for public distribution
+- Add professional Linux distribution support
+- Introduce production deployment workflows
+- Add enterprise-grade release architecture
+- Standardize build systems
+- Implement secure auto-update infrastructure
+- Create scalable CI/CD pipelines
+- Add cross-platform packaging strategy
+- Improve release maintainability
+- Prepare CommDesk for public distribution
 
 ---
 
@@ -38,27 +37,25 @@ Reference documentation:
 
 ## Linux
 
-* Flatpak
-* Snap
-* AppImage
-* DEB
-* RPM
+- Flatpak
+- Snap
+- AppImage
+- DEB
+- RPM
 
 ## Windows
 
-* NSIS
-* MSI
-* Portable EXE
+- NSIS
+- MSI
+- Portable EXE
 
 ## macOS
 
-* DMG
-* App Bundle
+- DMG
+- App Bundle
 
 ---
 
-
-
 # 🟦 Flatpak Infrastructure
 
 ## Add Flatpak Manifest
@@ -71,13 +68,13 @@ org.commdesk.CommDesk.json
 
 ## Required Features
 
-* Sandboxed runtime
-* Flathub compatibility
-* GPU acceleration support
-* Network permissions
-* Wayland + X11 support
-* Rust SDK extensions
-* Node.js SDK extensions
+- Sandboxed runtime
+- Flathub compatibility
+- GPU acceleration support
+- Network permissions
+- Wayland + X11 support
+- Rust SDK extensions
+- Node.js SDK extensions
 
 ---
 
@@ -107,11 +104,11 @@ snap/snapcraft.yaml
 
 ## Required Features
 
-* Strict confinement
-* Network permissions
-* OpenGL support
-* Wayland/X11 support
-* Auto-update compatibility
+- Strict confinement
+- Network permissions
+- OpenGL support
+- Wayland/X11 support
+- Auto-update compatibility
 
 ---
 
@@ -139,12 +136,12 @@ src-tauri/target/release/bundle/appimage/
 
 Implement:
 
-* Tauri updater
-* GitHub Releases integration
-* Signed updates
-* Release manifests
-* Version verification
-* Secure update validation
+- Tauri updater
+- GitHub Releases integration
+- Signed updates
+- Release manifests
+- Version verification
+- Secure update validation
 
 ---
 
@@ -160,11 +157,11 @@ release.pub
 
 ## Required Features
 
-* Silent background downloads
-* Update notifications
-* Signature verification
-* Rollback safety
-* Cross-platform updates
+- Silent background downloads
+- Update notifications
+- Signature verification
+- Rollback safety
+- Cross-platform updates
 
 ---
 
@@ -174,23 +171,23 @@ release.pub
 
 ### Linux
 
-* Flatpak sandboxing
-* Snap confinement
-* Minimal filesystem access
+- Flatpak sandboxing
+- Snap confinement
+- Minimal filesystem access
 
 ### Updates
 
-* Minisign signatures
-* Binary verification
-* Release integrity validation
+- Minisign signatures
+- Binary verification
+- Release integrity validation
 
 ### Windows
 
-* Code signing support
+- Code signing support
 
 ### macOS
 
-* Apple notarization preparation
+- Apple notarization preparation
 
 ---
 
@@ -215,29 +212,29 @@ release.pub
 
 ### Validation
 
-* TypeScript checks
-* ESLint checks
-* Rust checks
-* Build verification
-* Packaging verification
+- TypeScript checks
+- ESLint checks
+- Rust checks
+- Build verification
+- Packaging verification
 
 ### Build Matrix
 
-* Ubuntu
-* Windows
-* macOS
+- Ubuntu
+- Windows
+- macOS
 
 ### Artifacts
 
 Upload:
 
-* AppImage
-* Flatpak bundle
-* Snap package
-* DEB
-* RPM
-* MSI
-* DMG
+- AppImage
+- Flatpak bundle
+- Snap package
+- DEB
+- RPM
+- MSI
+- DMG
 
 ---
 
@@ -272,9 +269,9 @@ scripts/update-version.sh
 
 Capabilities:
 
-* Update all version files
-* Validate consistency
-* Prevent release mismatch
+- Update all version files
+- Validate consistency
+- Prevent release mismatch
 
 ---
 
@@ -284,12 +281,12 @@ Capabilities:
 
 Required Sizes:
 
-* 32x32
-* 64x64
-* 128x128
-* 256x256
-* ICO
-* ICNS
+- 32x32
+- 64x64
+- 128x128
+- 256x256
+- ICO
+- ICNS
 
 ---
 
@@ -306,9 +303,9 @@ src-tauri/icons/
 
 Include:
 
-* Logo generation workflow
-* Export best practices
-* Platform-specific icon requirements
+- Logo generation workflow
+- Export best practices
+- Platform-specific icon requirements
 
 ---
 
@@ -330,10 +327,10 @@ playwright
 
 ### Production Validation
 
-* Flatpak sandbox tests
-* AppImage runtime tests
-* Snap permission tests
-* Auto-update tests
+- Flatpak sandbox tests
+- AppImage runtime tests
+- Snap permission tests
+- Auto-update tests
 
 ---
 
@@ -358,10 +355,10 @@ opt-level = "z"
 
 Add:
 
-* Code splitting
-* Lazy loading
-* Vendor chunking
-* Production minification
+- Code splitting
+- Lazy loading
+- Vendor chunking
+- Production minification
 
 ---
 
@@ -371,14 +368,14 @@ Add:
 
 ### Crash Reporting
 
-* Rust panic reporting
-* Frontend error tracking
+- Rust panic reporting
+- Frontend error tracking
 
 ### Update Analytics
 
-* Update adoption rate
-* Failed update tracking
-* Release stability metrics
+- Update adoption rate
+- Failed update tracking
+- Release stability metrics
 
 ---
 
@@ -386,14 +383,14 @@ Add:
 
 All deployment docs must include:
 
-* Prerequisites
-* Installation
-* Build commands
-* Release workflow
-* Security recommendations
-* Troubleshooting
-* CI/CD examples
-* Production best practices
+- Prerequisites
+- Installation
+- Build commands
+- Release workflow
+- Security recommendations
+- Troubleshooting
+- CI/CD examples
+- Production best practices
 
 ---
 
@@ -401,11 +398,11 @@ All deployment docs must include:
 
 ## DO NOT
 
-* Hardcode secrets
-* Commit private signing keys
-* Disable security checks
-* Use unrestricted filesystem permissions
-* Skip binary verification
+- Hardcode secrets
+- Commit private signing keys
+- Disable security checks
+- Use unrestricted filesystem permissions
+- Skip binary verification
 
 ---
 
@@ -413,37 +410,36 @@ All deployment docs must include:
 
 ## Packaging
 
-* [ ] Flatpak builds successfully
-* [ ] Snap builds successfully
-* [ ] AppImage builds successfully
-* [ ] DEB builds successfully
-* [ ] RPM builds successfully
+- [ ] Flatpak builds successfully
+- [ ] Snap builds successfully
+- [ ] AppImage builds successfully
+- [ ] DEB builds successfully
+- [ ] RPM builds successfully
 
 ---
 
 ## Security
 
-* [ ] Auto-update signing works
-* [ ] Signature verification works
-* [ ] Sandboxing validated
-* [ ] Minimal permissions enforced
+- [ ] Auto-update signing works
+- [ ] Signature verification works
+- [ ] Sandboxing validated
+- [ ] Minimal permissions enforced
 
 ---
 
 ## CI/CD
 
-* [ ] Multi-platform builds work
-* [ ] Release workflows automated
-* [ ] Artifact uploads work
-* [ ] Release tagging works
+- [ ] Multi-platform builds work
+- [ ] Release workflows automated
+- [ ] Artifact uploads work
+- [ ] Release tagging works
 
 ---
 
 ## Documentation
 
-* [ ] Linux packaging docs completed
-* [ ] Production deployment docs completed
-* [ ] Auto-update docs completed
-* [ ] Troubleshooting docs completed
-* [ ] Release workflow documented
-
+- [ ] Linux packaging docs completed
+- [ ] Production deployment docs completed
+- [ ] Auto-update docs completed
+- [ ] Troubleshooting docs completed
+- [ ] Release workflow documented
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/docs/TESTING_AND_QA.md b/docs/TESTING_AND_QA.md
index 7f25638..6c14d70 100644
--- a/docs/TESTING_AND_QA.md
+++ b/docs/TESTING_AND_QA.md
@@ -4,7 +4,7 @@
 
 This document defines the complete testing architecture, QA workflows, automation strategy, performance validation, security testing, and release validation system for CommDesk.
 
-Reference guide: 
+Reference guide:
 
 ---
 
@@ -12,20 +12,20 @@ Reference guide:
 
 CommDesk is a large-scale desktop application built using:
 
-* React
-* TypeScript
-* Tauri
-* Rust
-* Vite
+- React
+- TypeScript
+- Tauri
+- Rust
+- Vite
 
 The testing system must guarantee:
 
-* Stability
-* Scalability
-* Security
-* Performance
-* Cross-platform reliability
-* Release confidence
+- Stability
+- Scalability
+- Security
+- Performance
+- Cross-platform reliability
+- Release confidence
 
 ---
 
@@ -113,9 +113,7 @@ describe("EventCard", () => {
   it("should render title", () => {
     render(<EventCard event={mockEvent} />);
 
-    expect(
-      screen.getByText("Hackathon 2026")
-    ).toBeInTheDocument();
+    expect(screen.getByText("Hackathon 2026")).toBeInTheDocument();
   });
 });
 ```
@@ -152,11 +150,11 @@ pnpm test --coverage
 
 Validate:
 
-* API interaction
-* State management
-* React Query behavior
-* IPC communication
-* Feature coordination
+- API interaction
+- State management
+- React Query behavior
+- IPC communication
+- Feature coordination
 
 ---
 
@@ -168,9 +166,7 @@ describe("Dashboard Integration", () => {
     render(<Dashboard />);
 
     await waitFor(() => {
-      expect(
-        screen.getByText("Event 1")
-      ).toBeInTheDocument();
+      expect(screen.getByText("Event 1")).toBeInTheDocument();
     });
   });
 });
@@ -218,9 +214,9 @@ playwright.config.ts
 
 # Required Browser Targets
 
-* Chromium
-* Firefox
-* WebKit
+- Chromium
+- Firefox
+- WebKit
 
 ---
 
@@ -228,13 +224,13 @@ playwright.config.ts
 
 Validate:
 
-* Authentication
-* Navigation
-* Event creation
-* Community workflows
-* Dashboard interaction
-* Permissions
-* Error handling
+- Authentication
+- Navigation
+- Event creation
+- Community workflows
+- Dashboard interaction
+- Permissions
+- Error handling
 
 ---
 
@@ -246,16 +242,11 @@ test("should create event", async ({ page }) => {
 
   await page.click("[data-testid='btn-create-event']");
 
-  await page.fill(
-    "[data-testid='input-title']",
-    "Hackathon"
-  );
+  await page.fill("[data-testid='input-title']", "Hackathon");
 
   await page.click("[data-testid='btn-submit']");
 
-  await expect(
-    page.locator("text=Hackathon")
-  ).toBeVisible();
+  await expect(page.locator("text=Hackathon")).toBeVisible();
 });
 ```
 
@@ -353,12 +344,12 @@ journalctl --user \
 
 # Required Validation
 
-* Installer works
-* Desktop shortcut created
-* Start menu integration works
-* Taskbar icon renders
-* Auto-update works
-* Uninstall works cleanly
+- Installer works
+- Desktop shortcut created
+- Start menu integration works
+- Taskbar icon renders
+- Auto-update works
+- Uninstall works cleanly
 
 ---
 
@@ -374,11 +365,11 @@ pnpm tauri build --target x86_64-pc-windows-gnu
 
 # Required Validation
 
-* DMG mounts correctly
-* App bundle launches
-* Dock icon renders
-* Code signing valid
-* Notarization ready
+- DMG mounts correctly
+- App bundle launches
+- Dock icon renders
+- Code signing valid
+- Notarization ready
 
 ---
 
@@ -447,12 +438,12 @@ watch -n 1 'ps aux | grep commdesk'
 
 # Validate
 
-* 10,000+ tasks
-* 5,000+ events
-* Massive dashboards
-* Large activity feeds
-* Infinite scrolling
-* Search performance
+- 10,000+ tasks
+- 5,000+ events
+- Massive dashboards
+- Large activity feeds
+- Infinite scrolling
+- Search performance
 
 ---
 
@@ -486,13 +477,13 @@ npm audit --audit-level=moderate
 
 # Required Security Checks
 
-* Sandbox validation
-* Permission minimization
-* IPC validation
-* Unsafe eval prevention
-* CSP verification
-* Dependency vulnerabilities
-* Rust unsafe block review
+- Sandbox validation
+- Permission minimization
+- IPC validation
+- Unsafe eval prevention
+- CSP verification
+- Dependency vulnerabilities
+- Rust unsafe block review
 
 ---
 
@@ -500,11 +491,11 @@ npm audit --audit-level=moderate
 
 Before every release validate:
 
-* Existing workflows still work
-* No UI regressions
-* No performance regressions
-* Database compatibility maintained
-* Auto-update compatibility maintained
+- Existing workflows still work
+- No UI regressions
+- No performance regressions
+- Database compatibility maintained
+- Auto-update compatibility maintained
 
 ---
 
@@ -547,13 +538,13 @@ Create:
 
 | Validation        | Required |
 | ----------------- | -------- |
-| TypeScript        | ✅        |
-| ESLint            | ✅        |
-| Unit Tests        | ✅        |
-| Integration Tests | ✅        |
-| E2E Tests         | ✅        |
-| Production Build  | ✅        |
-| Linux Packaging   | ✅        |
+| TypeScript        | ✅       |
+| ESLint            | ✅       |
+| Unit Tests        | ✅       |
+| Integration Tests | ✅       |
+| E2E Tests         | ✅       |
+| Production Build  | ✅       |
+| Linux Packaging   | ✅       |
 
 ---
 
@@ -587,12 +578,12 @@ Create:
 
 Validate:
 
-* Keyboard navigation
-* Screen reader support
-* Focus management
-* ARIA labels
-* Contrast ratios
-* Reduced motion support
+- Keyboard navigation
+- Screen reader support
+- Focus management
+- ARIA labels
+- Contrast ratios
+- Reduced motion support
 
 ---
 
@@ -602,39 +593,39 @@ Validate:
 
 ## Core Validation
 
-* [ ] Unit tests pass
-* [ ] Integration tests pass
-* [ ] E2E tests pass
-* [ ] TypeScript passes
-* [ ] ESLint passes
+- [ ] Unit tests pass
+- [ ] Integration tests pass
+- [ ] E2E tests pass
+- [ ] TypeScript passes
+- [ ] ESLint passes
 
 ---
 
 ## Platform Validation
 
-* [ ] Flatpak works
-* [ ] Snap works
-* [ ] AppImage works
-* [ ] Windows installer works
-* [ ] macOS DMG works
+- [ ] Flatpak works
+- [ ] Snap works
+- [ ] AppImage works
+- [ ] Windows installer works
+- [ ] macOS DMG works
 
 ---
 
 ## Performance Validation
 
-* [ ] Startup < 3 sec
-* [ ] No memory leaks
-* [ ] No major CPU spikes
-* [ ] Large datasets render smoothly
+- [ ] Startup < 3 sec
+- [ ] No memory leaks
+- [ ] No major CPU spikes
+- [ ] Large datasets render smoothly
 
 ---
 
 ## Security Validation
 
-* [ ] No high vulnerabilities
-* [ ] Sandboxing works
-* [ ] Auto-update signatures valid
-* [ ] No unsafe permissions
+- [ ] No high vulnerabilities
+- [ ] Sandboxing works
+- [ ] Auto-update signatures valid
+- [ ] No unsafe permissions
 
 ---
 
@@ -649,4 +640,3 @@ Validate:
 | Perf            | Linux profiling           |
 | Valgrind        | Memory validation         |
 | Codecov         | Coverage reporting        |
-
diff --git a/latest.json b/latest.json
index e2e2f46..9460cf5 100644
--- a/latest.json
+++ b/latest.json
@@ -20,4 +20,4 @@
       "url": ""
     }
   }
-}
\ No newline at end of file
+}
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..e4972b1 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,13 @@
   },
   "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",
     "@tauri-apps/plugin-process": "2.3.1",
     "@tauri-apps/plugin-updater": "2.10.1",
+    "axios": "^1.16.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -34,11 +36,13 @@
     "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",
     "tailwind-merge": "^3.5.0",
-    "zod": "^4.4.3"
+    "zod": "^4.4.3",
+    "zustand": "^5.0.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ddd8af..e25753c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@tauri-apps/plugin-updater':
         specifier: 2.10.1
         version: 2.10.1
+      axios:
+        specifier: ^1.16.1
+        version: 1.16.1
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -77,6 +80,9 @@ importers:
       zod:
         specifier: ^4.4.3
         version: 4.4.3
+      zustand:
+        specifier: ^5.0.13
+        version: 5.0.13(@types/react@19.2.14)(immer@11.1.8)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6))
     devDependencies:
       '@eslint/js':
         specifier: ^9.39.4
@@ -90,6 +96,15 @@ importers:
       '@tauri-apps/cli':
         specifier: 2.10.1
         version: 2.10.1
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/markdown-to-jsx':
         specifier: ^7.0.1
         version: 7.0.1(react@19.2.6)
@@ -117,6 +132,9 @@ importers:
       globals:
         specifier: ^17.6.0
         version: 17.6.0
+      jsdom:
+        specifier: ^29.1.1
+        version: 29.1.1(@noble/hashes@1.8.0)
       prettier:
         specifier: ^3.8.3
         version: 3.8.3
@@ -138,13 +156,34 @@ importers:
       vite:
         specifier: ^7.3.3
         version: 7.3.3(@types/node@25.6.2)(jiti@2.7.0)(lightningcss@1.32.0)
+      vitest:
+        specifier: ^4.1.6
+        version: 4.1.6(@types/node@25.6.2)(jsdom@29.1.1(@noble/hashes@1.8.0))(msw@2.14.5(@types/node@25.6.2)(typescript@5.8.3))(vite@7.3.3(@types/node@25.6.2)(jiti@2.7.0)(lightningcss@1.32.0))
 
 packages:
 
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+
   '@antfu/ni@25.0.0':
     resolution: {integrity: sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA==}
     hasBin: true
 
+  '@asamuzakjp/css-color@5.1.11':
+    resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    resolution: {integrity: sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/generational-cache@1.0.1':
+    resolution: {integrity: sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -274,6 +313,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.29.2':
+    resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.28.6':
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
@@ -286,6 +329,46 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
+  '@csstools/color-helpers@6.0.2':
+    resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
+    engines: {node: '>=20.19.0'}
+
+  '@csstools/css-calc@3.2.0':
+    resolution: {integrity: sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-color-parser@4.1.0':
+    resolution: {integrity: sha512-U0KhLYmy2GVj6q4T3WaAe6NPuFYCPQoE3b0dRGxejWDgcPp8TP7S5rVdM5ZrFaqu4N67X8YaPBw14dQSYx3IyQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.3':
+    resolution: {integrity: sha512-SH60bMfrRCJF3morcdk57WklujF4Jr/EsQUzqkarfHXEFcAR1gg7fS/chAE922Sehgzc1/+Tz5H3Ypa1HiEKrg==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
+
   '@date-fns/tz@1.4.1':
     resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
 
@@ -493,6 +576,15 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@exodus/bytes@1.15.0':
+    resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
   '@floating-ui/core@1.7.5':
     resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
 
@@ -1697,9 +1789,41 @@ packages:
   '@tauri-apps/plugin-updater@2.10.1':
     resolution: {integrity: sha512-NFYMg+tWOZPJdzE/PpFj2qfqwAWwNS3kXrb1tm1gnBJ9mYzZ4WDRrwy8udzWoAnfGCHLuePNLY1WVCNHnh3eRA==}
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@ts-morph/common@0.27.0':
     resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -1712,6 +1836,9 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/d3-array@3.2.2':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
@@ -1739,6 +1866,9 @@ packages:
   '@types/d3-timer@3.0.2':
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -1840,6 +1970,35 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
+  '@vitest/expect@4.1.6':
+    resolution: {integrity: sha512-7EHDquPthALSV0jhhjgEW8FXaviMx7rSqu8W6oqCoAuOhKov814P99QDV1pxMA3QPv21YudvJngIhjrNI4opLg==}
+
+  '@vitest/mocker@4.1.6':
+    resolution: {integrity: sha512-MCFc63czMjEInOlcY2cpQCvCN+KgbAn+60xu9cMgP4sKaLC5JNAKw7JH8QdAnoAC88hW1IiSNZ+GgVXlN1UcMQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.1.6':
+    resolution: {integrity: sha512-h5SxD/IzNhZYnrSZRsUZQIC+vD0GY8cUvq0iwsmkFKixRCKLLWqCXa/FIQ4S1R+sI+PGoojkHsdNrbZiM9Qpgw==}
+
+  '@vitest/runner@4.1.6':
+    resolution: {integrity: sha512-nOPCmn2+yD0ZNmKdsXGv/UxMMWbMuKeD6GyYncNwdkYDxpQvrPSKYj2rWuDjC2Y4b6w6hjip5dBKFzEUuZe3vA==}
+
+  '@vitest/snapshot@4.1.6':
+    resolution: {integrity: sha512-YhsdE6xAVfTDmzjxL2ZDUvjj+ZsgyOKe+TdQzqkD72wIOmHka8NuGQ6NpTNZv9D2Z63fbwWKJPeVpEw4EQgYxw==}
+
+  '@vitest/spy@4.1.6':
+    resolution: {integrity: sha512-JFKxMx6udhwKh/Ldo270e17QX710vgunMkuPAvXjHSvC6oqLWAHhVhjg/I71q0u0CBSErIODV1Kjv0FQNSWjdg==}
+
+  '@vitest/utils@4.1.6':
+    resolution: {integrity: sha512-FxIY+U81R3LGKCxaHHFRQ5+g6/iRgGLmeHWdp2Amj4ljQRrEIWHmZyDfDYBRZlpyqA7qKxtS9DD1dhk8RnRIVQ==}
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -1854,6 +2013,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -1884,6 +2047,10 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
   ansis@4.2.0:
     resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
     engines: {node: '>=14'}
@@ -1895,10 +2062,27 @@ packages:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.16.1:
+    resolution: {integrity: sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1911,6 +2095,9 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   body-parser@2.2.2:
     resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
     engines: {node: '>=18'}
@@ -1954,6 +2141,10 @@ packages:
   caniuse-lite@1.0.30001792:
     resolution: {integrity: sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1995,6 +2186,10 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@11.1.0:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
@@ -2046,6 +2241,13 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2102,6 +2304,10 @@ packages:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
 
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   date-fns-jalali@4.1.0-0:
     resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
 
@@ -2120,6 +2326,9 @@ packages:
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
   dedent@1.7.2:
     resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
     peerDependencies:
@@ -2147,10 +2356,18 @@ packages:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -2162,6 +2379,12 @@ packages:
     resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
   dotenv@17.4.2:
     resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
     engines: {node: '>=12'}
@@ -2194,6 +2417,10 @@ packages:
     resolution: {integrity: sha512-xe9vQb5kReirPUxgQrXA3ihgbCqssmTiM7cOZ+Gzu+VeGWgpV98lLZvp0dl4yriyAePcewxGUs9UpKD8PET9KQ==}
     engines: {node: '>=10.13.0'}
 
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -2209,10 +2436,17 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@2.1.0:
+    resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
   es-toolkit@1.46.1:
     resolution: {integrity: sha512-5eNtXOs3tbfxXOj04tjjseeWkRWaoCjdEI+96DgwzZoe6c9juL49pXlzAFTI72aWC9Y8p7168g6XIKjh7k6pyQ==}
 
@@ -2296,6 +2530,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -2323,6 +2560,10 @@ packages:
     resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
     engines: {node: ^18.19.0 || >=20.5.0}
 
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
   express-rate-limit@8.5.1:
     resolution: {integrity: sha512-5O6KYmyJEpuPJV5hNTXKbAHWRqrzyu+OI3vUnSd2kXFubIVpG7ezpgxQy76Zo5GQZtrQBg86hF+CM/NX+cioiQ==}
     engines: {node: '>= 16'}
@@ -2401,6 +2642,19 @@ packages:
   flatted@3.4.2:
     resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
 
+  follow-redirects@1.16.0:
+    resolution: {integrity: sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
   formdata-polyfill@4.0.10:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
     engines: {node: '>=12.20.0'}
@@ -2502,6 +2756,10 @@ packages:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
 
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
   hasown@2.0.3:
     resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
     engines: {node: '>= 0.4'}
@@ -2519,10 +2777,18 @@ packages:
     resolution: {integrity: sha512-RWzP96k/yv0PQfyXnWjs6zot20TqfpfsNXhOnev8d1InAxubW93L11/oNUc3tQqn2G0bSdAOBpX+2uDFHV7kdQ==}
     engines: {node: '>=16.9.0'}
 
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
 
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
@@ -2561,6 +2827,10 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -2624,6 +2894,9 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
@@ -2672,6 +2945,15 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
+  jsdom@29.1.1:
+    resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -2806,6 +3088,10 @@ packages:
     resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
     engines: {node: '>=18'}
 
+  lru-cache@11.3.6:
+    resolution: {integrity: sha512-Gf/KoL3C/MlI7Bt0PGI9I+TeTC/I6r/csU58N4BSNc4lppLBeKsOdFYkK+dX0ABDUMJNfCHTyPpzwwO21Awd3A==}
+    engines: {node: 20 || >=22}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -2814,6 +3100,10 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -2839,6 +3129,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
   media-typer@1.1.0:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
@@ -2858,10 +3151,18 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
   mime-db@1.54.0:
     resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
     engines: {node: '>= 0.6'}
 
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   mime-types@3.0.2:
     resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
     engines: {node: '>=18'}
@@ -2874,6 +3175,10 @@ packages:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   minimatch@10.2.5:
     resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
     engines: {node: 18 || 20 || >=22}
@@ -2951,6 +3256,9 @@ packages:
     resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
     engines: {node: '>= 10'}
 
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -3004,6 +3312,9 @@ packages:
     resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
     engines: {node: '>=18'}
 
+  parse5@8.0.1:
+    resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -3029,6 +3340,9 @@ packages:
   path-to-regexp@8.4.2:
     resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -3069,6 +3383,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   pretty-ms@9.3.0:
     resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
     engines: {node: '>=18'}
@@ -3081,6 +3399,10 @@ packages:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
 
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -3135,6 +3457,9 @@ packages:
     peerDependencies:
       react: '*'
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-is@19.2.5:
     resolution: {integrity: sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==}
 
@@ -3217,6 +3542,10 @@ packages:
       react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   redux-thunk@3.1.0:
     resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
     peerDependencies:
@@ -3270,6 +3599,10 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -3327,6 +3660,9 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
@@ -3345,10 +3681,16 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
   statuses@2.0.2:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  std-env@4.1.0:
+    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
+
   stdin-discarder@0.2.2:
     resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
     engines: {node: '>=18'}
@@ -3388,6 +3730,10 @@ packages:
     resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
     engines: {node: '>=18'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -3396,6 +3742,9 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   tagged-tag@1.0.0:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
@@ -3413,6 +3762,9 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
   tinyexec@1.1.2:
     resolution: {integrity: sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==}
     engines: {node: '>=18'}
@@ -3421,6 +3773,10 @@ packages:
     resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.0.30:
     resolution: {integrity: sha512-uiHN8PIB1VmWyS98eZYja4xzlYqeFZVjb4OuYlJQnZAuJhMw4PbKQOKgHKhBdJR3FE/t5mUQ1Kd80++B+qhD1Q==}
 
@@ -3440,6 +3796,10 @@ packages:
     resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
     engines: {node: '>=16'}
 
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
   ts-api-utils@2.5.0:
     resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
@@ -3486,6 +3846,10 @@ packages:
   undici-types@7.19.2:
     resolution: {integrity: sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==}
 
+  undici@7.25.0:
+    resolution: {integrity: sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==}
+    engines: {node: '>=20.18.1'}
+
   unicorn-magic@0.3.0:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
@@ -3589,10 +3953,67 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.1.6:
+    resolution: {integrity: sha512-6lvjbS3p9b4CrdCmguzbh2/4uoXhGE2q71R4OX5sqF9R1bo9Xd6fGrMAfvp5wnCzlBnFVdCOp6onuTQVbo8iUQ==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.6
+      '@vitest/browser-preview': 4.1.6
+      '@vitest/browser-webdriverio': 4.1.6
+      '@vitest/coverage-istanbul': 4.1.6
+      '@vitest/coverage-v8': 4.1.6
+      '@vitest/ui': 4.1.6
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
   web-streams-polyfill@3.3.3:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
 
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -3603,6 +4024,11 @@ packages:
     engines: {node: ^16.13.0 || >=18.0.0}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -3618,6 +4044,13 @@ packages:
     resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
     engines: {node: '>=20'}
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -3662,8 +4095,28 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zustand@5.0.13:
+    resolution: {integrity: sha512-efI2tVaVQPqtOh114loML/Z80Y4NP3yc+Ff0fYiZJPauNeWZeIp/bRFD7I9bfmCOYBh/PHxlglQ9+wvlwnPikQ==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
+  '@adobe/css-tools@4.4.4': {}
+
   '@antfu/ni@25.0.0':
     dependencies:
       ansis: 4.2.0
@@ -3671,6 +4124,26 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.1.2
 
+  '@asamuzakjp/css-color@5.1.11':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+
+  '@asamuzakjp/generational-cache@1.0.1': {}
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -3844,6 +4317,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/runtime@7.29.2': {}
+
   '@babel/template@7.28.6':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -3867,6 +4342,34 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+
+  '@csstools/color-helpers@6.0.2': {}
+
+  '@csstools/css-calc@3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-color-parser@4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.0.2
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.3(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+
+  '@csstools/css-tokenizer@4.0.0': {}
+
   '@date-fns/tz@1.4.1': {}
 
   '@dotenvx/dotenvx@1.65.0':
@@ -4010,6 +4513,10 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@exodus/bytes@1.15.0(@noble/hashes@1.8.0)':
+    optionalDependencies:
+      '@noble/hashes': 1.8.0
+
   '@floating-ui/core@1.7.5':
     dependencies:
       '@floating-ui/utils': 0.2.11
@@ -5149,12 +5656,48 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.10.1
 
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.29.2
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@testing-library/dom': 10.4.1
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
   '@ts-morph/common@0.27.0':
     dependencies:
       fast-glob: 3.3.3
       minimatch: 10.2.5
       path-browserify: 1.0.1
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.3
@@ -5176,6 +5719,11 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/d3-array@3.2.2': {}
 
   '@types/d3-color@3.1.3': {}
@@ -5200,6 +5748,8 @@ snapshots:
 
   '@types/d3-timer@3.0.2': {}
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree@1.0.8': {}
 
   '@types/estree@1.0.9': {}
@@ -5340,6 +5890,48 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/expect@4.1.6':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.6
+      '@vitest/utils': 4.1.6
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
+
+  '@vitest/mocker@4.1.6(msw@2.14.5(@types/node@25.6.2)(typescript@5.8.3))(vite@7.3.3(@types/node@25.6.2)(jiti@2.7.0)(lightningcss@1.32.0))':
+    dependencies:
+      '@vitest/spy': 4.1.6
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      msw: 2.14.5(@types/node@25.6.2)(typescript@5.8.3)
+      vite: 7.3.3(@types/node@25.6.2)(jiti@2.7.0)(lightningcss@1.32.0)
+
+  '@vitest/pretty-format@4.1.6':
+    dependencies:
+      tinyrainbow: 3.1.0
+
+  '@vitest/runner@4.1.6':
+    dependencies:
+      '@vitest/utils': 4.1.6
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.6':
+    dependencies:
+      '@vitest/pretty-format': 4.1.6
+      '@vitest/utils': 4.1.6
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.6': {}
+
+  '@vitest/utils@4.1.6':
+    dependencies:
+      '@vitest/pretty-format': 4.1.6
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.2
@@ -5351,6 +5943,12 @@ snapshots:
 
   acorn@8.16.0: {}
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   agent-base@7.1.4: {}
 
   ajv-formats@3.0.1(ajv@8.20.0):
@@ -5379,6 +5977,8 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ansi-styles@5.2.0: {}
+
   ansis@4.2.0: {}
 
   argparse@2.0.1: {}
@@ -5387,16 +5987,40 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  assertion-error@2.0.1: {}
+
   ast-types@0.16.1:
     dependencies:
       tslib: 2.8.1
 
+  asynckit@0.4.0: {}
+
+  axios@1.16.1:
+    dependencies:
+      follow-redirects: 1.16.0
+      form-data: 4.0.5
+      https-proxy-agent: 5.0.1
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
 
   baseline-browser-mapping@2.10.29: {}
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   body-parser@2.2.2:
     dependencies:
       bytes: 3.1.2
@@ -5452,6 +6076,8 @@ snapshots:
 
   caniuse-lite@1.0.30001792: {}
 
+  chai@6.2.2: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -5487,6 +6113,10 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@11.1.0: {}
 
   commander@14.0.3: {}
@@ -5525,6 +6155,13 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
+  css.escape@1.5.1: {}
+
   cssesc@3.0.0: {}
 
   csstype@3.2.3: {}
@@ -5569,6 +6206,13 @@ snapshots:
 
   data-uri-to-buffer@4.0.1: {}
 
+  data-urls@7.0.0(@noble/hashes@1.8.0):
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1(@noble/hashes@1.8.0)
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   date-fns-jalali@4.1.0-0: {}
 
   date-fns@4.1.0: {}
@@ -5579,6 +6223,8 @@ snapshots:
 
   decimal.js-light@2.5.1: {}
 
+  decimal.js@10.6.0: {}
+
   dedent@1.7.2: {}
 
   deep-is@0.1.4: {}
@@ -5594,14 +6240,22 @@ snapshots:
 
   define-lazy-prop@3.0.0: {}
 
+  delayed-stream@1.0.0: {}
+
   depd@2.0.0: {}
 
+  dequal@2.0.3: {}
+
   detect-libc@2.1.2: {}
 
   detect-node-es@1.1.0: {}
 
   diff@8.0.4: {}
 
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
   dotenv@17.4.2: {}
 
   dunder-proto@1.0.1:
@@ -5632,6 +6286,8 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.3
 
+  entities@8.0.0: {}
+
   env-paths@2.2.1: {}
 
   error-ex@1.3.4:
@@ -5642,10 +6298,19 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@2.1.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
 
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.3
+
   es-toolkit@1.46.1: {}
 
   esbuild@0.27.7:
@@ -5772,6 +6437,10 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
   esutils@2.0.3: {}
 
   etag@1.8.1: {}
@@ -5811,6 +6480,8 @@ snapshots:
       strip-final-newline: 4.0.0
       yoctocolors: 2.1.2
 
+  expect-type@1.3.0: {}
+
   express-rate-limit@8.5.1(express@5.2.1):
     dependencies:
       express: 5.2.1
@@ -5923,6 +6594,16 @@ snapshots:
 
   flatted@3.4.2: {}
 
+  follow-redirects@1.16.0: {}
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.3
+      mime-types: 2.1.35
+
   formdata-polyfill@4.0.10:
     dependencies:
       fetch-blob: 3.2.0
@@ -6003,6 +6684,10 @@ snapshots:
 
   has-symbols@1.1.0: {}
 
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
   hasown@2.0.3:
     dependencies:
       function-bind: 1.1.2
@@ -6020,6 +6705,12 @@ snapshots:
 
   hono@4.12.18: {}
 
+  html-encoding-sniffer@6.0.0(@noble/hashes@1.8.0):
+    dependencies:
+      '@exodus/bytes': 1.15.0(@noble/hashes@1.8.0)
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -6028,6 +6719,13 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
@@ -6058,6 +6756,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  indent-string@4.0.0: {}
+
   inherits@2.0.4: {}
 
   internmap@2.0.3: {}
@@ -6094,6 +6794,8 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
+  is-potential-custom-element-name@1.0.1: {}
+
   is-promise@4.0.0: {}
 
   is-regexp@3.1.0: {}
@@ -6124,6 +6826,32 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsdom@29.1.1(@noble/hashes@1.8.0):
+    dependencies:
+      '@asamuzakjp/css-color': 5.1.11
+      '@asamuzakjp/dom-selector': 7.1.1
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.3(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.0(@noble/hashes@1.8.0)
+      css-tree: 3.2.1
+      data-urls: 7.0.0(@noble/hashes@1.8.0)
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0(@noble/hashes@1.8.0)
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.3.6
+      parse5: 8.0.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.1
+      undici: 7.25.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1(@noble/hashes@1.8.0)
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -6221,6 +6949,8 @@ snapshots:
       chalk: 5.6.2
       is-unicode-supported: 1.3.0
 
+  lru-cache@11.3.6: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -6229,6 +6959,8 @@ snapshots:
     dependencies:
       react: 19.2.6
 
+  lz-string@1.5.0: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -6239,6 +6971,8 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdn-data@2.27.1: {}
+
   media-typer@1.1.0: {}
 
   merge-descriptors@2.0.0: {}
@@ -6252,8 +6986,14 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.2
 
+  mime-db@1.52.0: {}
+
   mime-db@1.54.0: {}
 
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   mime-types@3.0.2:
     dependencies:
       mime-db: 1.54.0
@@ -6262,6 +7002,8 @@ snapshots:
 
   mimic-function@5.0.1: {}
 
+  min-indent@1.0.1: {}
+
   minimatch@10.2.5:
     dependencies:
       brace-expansion: 5.0.6
@@ -6337,6 +7079,8 @@ snapshots:
 
   object-treeify@1.1.33: {}
 
+  obug@2.1.1: {}
+
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -6408,6 +7152,10 @@ snapshots:
 
   parse-ms@4.0.0: {}
 
+  parse5@8.0.1:
+    dependencies:
+      entities: 8.0.0
+
   parseurl@1.3.3: {}
 
   path-browserify@1.0.1: {}
@@ -6422,6 +7170,8 @@ snapshots:
 
   path-to-regexp@8.4.2: {}
 
+  pathe@2.0.3: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
@@ -6452,6 +7202,12 @@ snapshots:
 
   prettier@3.8.3: {}
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   pretty-ms@9.3.0:
     dependencies:
       parse-ms: 4.0.0
@@ -6466,6 +7222,8 @@ snapshots:
       forwarded: 0.2.0
       ipaddr.js: 1.9.1
 
+  proxy-from-env@2.1.0: {}
+
   punycode@2.3.1: {}
 
   qs@6.15.1:
@@ -6567,6 +7325,8 @@ snapshots:
     dependencies:
       react: 19.2.6
 
+  react-is@17.0.2: {}
+
   react-is@19.2.5: {}
 
   react-redux@9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1):
@@ -6651,6 +7411,11 @@ snapshots:
       - '@types/react'
       - redux
 
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   redux-thunk@3.1.0(redux@5.0.1):
     dependencies:
       redux: 5.0.1
@@ -6723,6 +7488,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   scheduler@0.27.0: {}
 
   semver@6.3.1: {}
@@ -6838,6 +7607,8 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  siginfo@2.0.0: {}
+
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
@@ -6848,8 +7619,12 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  stackback@0.0.2: {}
+
   statuses@2.0.2: {}
 
+  std-env@4.1.0: {}
+
   stdin-discarder@0.2.2: {}
 
   strict-event-emitter@0.5.1: {}
@@ -6886,12 +7661,18 @@ snapshots:
 
   strip-final-newline@4.0.0: {}
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   strip-json-comments@3.1.1: {}
 
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
+  symbol-tree@3.2.4: {}
+
   tagged-tag@1.0.0: {}
 
   tailwind-merge@3.5.0: {}
@@ -6902,6 +7683,8 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinybench@2.9.0: {}
+
   tinyexec@1.1.2: {}
 
   tinyglobby@0.2.16:
@@ -6909,6 +7692,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyrainbow@3.1.0: {}
+
   tldts-core@7.0.30: {}
 
   tldts@7.0.30:
@@ -6925,6 +7710,10 @@ snapshots:
     dependencies:
       tldts: 7.0.30
 
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   ts-api-utils@2.5.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
@@ -6973,6 +7762,8 @@ snapshots:
 
   undici-types@7.19.2: {}
 
+  undici@7.25.0: {}
+
   unicorn-magic@0.3.0: {}
 
   universalify@2.0.1: {}
@@ -7047,8 +7838,52 @@ snapshots:
       jiti: 2.7.0
       lightningcss: 1.32.0
 
+  vitest@4.1.6(@types/node@25.6.2)(jsdom@29.1.1(@noble/hashes@1.8.0))(msw@2.14.5(@types/node@25.6.2)(typescript@5.8.3))(vite@7.3.3(@types/node@25.6.2)(jiti@2.7.0)(lightningcss@1.32.0)):
+    dependencies:
+      '@vitest/expect': 4.1.6
+      '@vitest/mocker': 4.1.6(msw@2.14.5(@types/node@25.6.2)(typescript@5.8.3))(vite@7.3.3(@types/node@25.6.2)(jiti@2.7.0)(lightningcss@1.32.0))
+      '@vitest/pretty-format': 4.1.6
+      '@vitest/runner': 4.1.6
+      '@vitest/snapshot': 4.1.6
+      '@vitest/spy': 4.1.6
+      '@vitest/utils': 4.1.6
+      es-module-lexer: 2.1.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 4.1.0
+      tinybench: 2.9.0
+      tinyexec: 1.1.2
+      tinyglobby: 0.2.16
+      tinyrainbow: 3.1.0
+      vite: 7.3.3(@types/node@25.6.2)(jiti@2.7.0)(lightningcss@1.32.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.6.2
+      jsdom: 29.1.1(@noble/hashes@1.8.0)
+    transitivePeerDependencies:
+      - msw
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
   web-streams-polyfill@3.3.3: {}
 
+  webidl-conversions@8.0.1: {}
+
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1(@noble/hashes@1.8.0):
+    dependencies:
+      '@exodus/bytes': 1.15.0(@noble/hashes@1.8.0)
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -7057,6 +7892,11 @@ snapshots:
     dependencies:
       isexe: 3.1.5
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   word-wrap@1.2.5: {}
 
   wrap-ansi@7.0.0:
@@ -7072,6 +7912,10 @@ snapshots:
       is-wsl: 3.1.1
       powershell-utils: 0.1.0
 
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
@@ -7107,3 +7951,10 @@ snapshots:
   zod@3.25.76: {}
 
   zod@4.4.3: {}
+
+  zustand@5.0.13(@types/react@19.2.14)(immer@11.1.8)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6)):
+    optionalDependencies:
+      '@types/react': 19.2.14
+      immer: 11.1.8
+      react: 19.2.6
+      use-sync-external-store: 1.6.0(react@19.2.6)
diff --git a/src/App.css b/src/App.css
index 6610d51..dcd5ee2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -251,7 +251,6 @@ body {
 
 /* ─── CommDesk utility classes ───────────────────────────────────────────── */
 @layer utilities {
-
   /* Cards */
   .cd-card {
     background-color: var(--cd-surface);
@@ -621,4 +620,4 @@ html {
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background-color: var(--cd-primary);
-}
\ No newline at end of file
+}
diff --git a/src/App.tsx b/src/App.tsx
index c39f7ca..1b3ac18 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,9 @@
 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";
@@ -16,15 +14,12 @@ function App() {
     void startAutoUpdater();
   }, []);
 
-
   return (
     <ThemeProvider>
       <BrowserRouter>
+        <OrgRoute />
 
-       <OrgRoute />
-
-       <MemberRoutes />
-        
+        <MemberRoutes />
       </BrowserRouter>
     </ThemeProvider>
   );
diff --git a/src/Component/ui/Button.tsx b/src/Component/ui/Button.tsx
index ce6a5b7..22a6ce9 100644
--- a/src/Component/ui/Button.tsx
+++ b/src/Component/ui/Button.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-
 type ButtonProps = {
   text: string;
   icon?: React.ReactNode;
+  type?: "button" | "submit" | "reset";
   width?: string;
   height?: string;
   onClick: () => void;
@@ -15,6 +15,7 @@ type ButtonProps = {
 const Button = ({
   text,
   icon,
+  type = "button",
   onClick,
   disabled,
   width,
@@ -34,6 +35,7 @@ const Button = ({
 
   return (
     <button
+      type={type}
       onClick={onClick}
       disabled={disabled}
       className={`cd-btn ${variantClass} ${className}`}
diff --git a/src/Component/ui/UniversalDatePicker.tsx b/src/Component/ui/UniversalDatePicker.tsx
index 4a445e5..39088fd 100644
--- a/src/Component/ui/UniversalDatePicker.tsx
+++ b/src/Component/ui/UniversalDatePicker.tsx
@@ -99,8 +99,7 @@ export const UniversalDatePicker = forwardRef<HTMLInputElement, UniversalDatePic
           className={`w-full border-2 rounded-lg px-3 py-2 bg-transparent outline-none text-lg ${inputClassName}`}
           style={{
             borderColor: error ? theme.danger.default : theme.bg.surfaceSecondary,
-            color: theme.text.inverse
-    
+            color: theme.text.inverse,
           }}
         />
 
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/Auth/v1/Constant/Auth.Endpoint.Constant.ts b/src/features/Auth/v1/Constant/Auth.Endpoint.Constant.ts
new file mode 100644
index 0000000..3386f8c
--- /dev/null
+++ b/src/features/Auth/v1/Constant/Auth.Endpoint.Constant.ts
@@ -0,0 +1,8 @@
+const AUTH_ENDPOINTS = {
+  LOGIN: "/signIn",
+  REGISTER: "/auth/register",
+  REFRESH: "/auth/refresh",
+  GET_ORGANIZATION_BY_ID: "/get-community-by-auth-id",
+};
+
+export default AUTH_ENDPOINTS;
diff --git a/src/features/Auth/v1/Pages/LoginPage.tsx b/src/features/Auth/v1/Pages/LoginPage.tsx
index 9d72488..423a8f1 100644
--- a/src/features/Auth/v1/Pages/LoginPage.tsx
+++ b/src/features/Auth/v1/Pages/LoginPage.tsx
@@ -1,8 +1,49 @@
 import { MdEmail } from "react-icons/md";
 import { RiLockPasswordFill } from "react-icons/ri";
-import { Link } from "react-router";
+import { Link, useNavigate } from "react-router";
+
+import { useAuth } from "../hooks/useAuth";
+import Input from "@/Component/ui/Input";
+import { useCallback } from "react";
 
 const LoginPage = () => {
+  const { loginMutation } = useAuth();
+
+  const navigate = useNavigate();
+
+  const handleLogin = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const formData = new FormData(e.currentTarget);
+
+      const email = formData.get("email") as string;
+      const password = formData.get("password") as string;
+
+      try {
+        const response = await loginMutation.mutateAsync({
+          email,
+          password,
+        });
+
+        let Role = response.data.role;
+        console.log("User role:", Role);
+
+        if (Role === "organization") {
+          navigate("/org/dashboard");
+          return;
+        }
+
+        console.log("Login successful:", response);
+
+        // redirect / save token / navigate
+      } catch (error) {
+        console.error("Login failed:", error);
+      }
+    },
+    [loginMutation],
+  );
+
   return (
     <div className="w-screen h-screen  flex ">
       <div className="left w-1/2 bg-cover bg-center relative">
@@ -21,7 +62,7 @@ const LoginPage = () => {
         <div className="w-[80%]">
           <h2 className="text-3xl  mb-2 inter text-gray-700">Sign in</h2>
           <p className="text-gray-500 mb-6 inter">Please login to your account to continue.</p>
-          <form className="space-y-4 mt-[7vh]">
+          <form className="space-y-4 mt-[7vh]" onSubmit={handleLogin}>
             <div className="flex flex-col gap-2 text-md">
               <label
                 htmlFor="email"
@@ -29,11 +70,11 @@ const LoginPage = () => {
               >
                 <MdEmail className="inline mr-2" /> Work Email
               </label>
-              <input
-                type="email"
-                id="email"
+              <Input
+                name="email"
                 className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                 placeholder="Enter your email"
+                type="email"
               />
             </div>
             <div className="flex flex-col gap-2">
@@ -49,20 +90,19 @@ const LoginPage = () => {
                   Reset Password?
                 </Link>
               </label>
-              <input
-                type="password"
-                id="password"
+
+              <Input
+                name="password"
                 className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                 placeholder="Enter your password"
+                type="password"
               />
             </div>
             <button
               type="submit"
               className="w-full bg-[#4f46e5] text-white py-2  hover:bg-blue-600 transition duration-200 inter py-[1.5vh] text-lg"
             >
-              <Link to="/org/dashboard" className="w-full h-full block">
-                Sign In
-              </Link>
+              Sign In
             </button>
 
             <div className="flex justify-end">
diff --git a/src/features/Auth/v1/Pages/SignUpPage.tsx b/src/features/Auth/v1/Pages/SignUpPage.tsx
index 3568204..2735cac 100644
--- a/src/features/Auth/v1/Pages/SignUpPage.tsx
+++ b/src/features/Auth/v1/Pages/SignUpPage.tsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 import { ArrowLeft, ArrowRight, Loader2 } from "lucide-react";
 
 import { useSignupForm, STEP_FIELDS, SignupFormData } from "../hooks/useSignupForm";
-import { submitCommunitySignup } from "../api/signup";
+import { submitCommunitySignup } from "../utils/signup";
 import StepProgress from "../components/signup/StepProgress";
 import CommunityStep from "../components/signup/CommunityStep";
 import ContactStep from "../components/signup/ContactStep";
diff --git a/src/features/Auth/v1/Store/Auth.Store.ts b/src/features/Auth/v1/Store/Auth.Store.ts
new file mode 100644
index 0000000..453db3c
--- /dev/null
+++ b/src/features/Auth/v1/Store/Auth.Store.ts
@@ -0,0 +1,28 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+import { AuthState, User } from "../Types/Auth.type";
+
+const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      token: null,
+      user: null,
+
+      setAuthData: (user: User) =>
+        set({
+          user,
+        }),
+
+      clearAuthData: () =>
+        set({
+          user: null,
+        }),
+    }),
+    {
+      name: "auth-storage",
+    },
+  ),
+);
+
+export default useAuthStore;
diff --git a/src/features/Auth/v1/Store/Organization.Store.ts b/src/features/Auth/v1/Store/Organization.Store.ts
new file mode 100644
index 0000000..2da8ef9
--- /dev/null
+++ b/src/features/Auth/v1/Store/Organization.Store.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { CommunitySchema } from "../Types/Organization.Type";
+
+
+const useOrganizationStore = create<{
+  organization: CommunitySchema | null;
+  setOrganization: (organization: CommunitySchema) => void;
+}>()(
+  persist(
+    (set) => ({
+      organization: null,
+      setOrganization: (organization: CommunitySchema) =>
+        set({
+          organization,
+        }),
+    }),
+    {
+      name: "organization-storage",
+    },
+  ),
+);
+
+export default useOrganizationStore;
diff --git a/src/features/Auth/v1/Types/Auth.type.ts b/src/features/Auth/v1/Types/Auth.type.ts
new file mode 100644
index 0000000..7956fd8
--- /dev/null
+++ b/src/features/Auth/v1/Types/Auth.type.ts
@@ -0,0 +1,14 @@
+export interface User {
+  _id: string;
+
+  email: string;
+  role: string;
+}
+
+export interface AuthState {
+  // token: string | null;
+  user: User | null;
+
+  setAuthData: (user: User) => void;
+  clearAuthData: () => void;
+}
diff --git a/src/features/Auth/v1/Types/Organization.Type.ts b/src/features/Auth/v1/Types/Organization.Type.ts
new file mode 100644
index 0000000..4f99cb5
--- /dev/null
+++ b/src/features/Auth/v1/Types/Organization.Type.ts
@@ -0,0 +1,20 @@
+export type CommunitySchema = {
+  CommunityName: string;
+  Bio: string;
+  Slug: string;
+  Website: string;
+  Country: string;
+  City: string;
+  OfficialEmail: string;
+  ContactPhone: string;
+  LogoUrl: string;
+
+  SocialLinks: {
+    github?: string;
+    discord?: string;
+    twitter?: string;
+    linkedin?: string;
+    youtube?: string;
+    instagram?: string;
+  };
+};
diff --git a/src/features/Auth/v1/components/signup/CommunityStep.tsx b/src/features/Auth/v1/components/signup/CommunityStep.tsx
index 5426bc4..fe49f11 100644
--- a/src/features/Auth/v1/components/signup/CommunityStep.tsx
+++ b/src/features/Auth/v1/components/signup/CommunityStep.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { Upload, X, AlertCircle } from "lucide-react";
 import { SignupFormData } from "../../hooks/useSignupForm";
-import { uploadCommunityLogo } from "../../api/signup";
+import { uploadCommunityLogo } from "../../utils/signup";
 
 export default function CommunityStep() {
   const {
diff --git a/src/features/Auth/v1/components/signup/ReviewStep.tsx b/src/features/Auth/v1/components/signup/ReviewStep.tsx
index f7bb107..d147301 100644
--- a/src/features/Auth/v1/components/signup/ReviewStep.tsx
+++ b/src/features/Auth/v1/components/signup/ReviewStep.tsx
@@ -10,7 +10,7 @@ import {
   Github,
   Facebook,
   User,
-  Lock
+  Lock,
 } from "lucide-react";
 import { SignupFormData } from "../../hooks/useSignupForm";
 
diff --git a/src/features/Auth/v1/hooks/useAuth.ts b/src/features/Auth/v1/hooks/useAuth.ts
new file mode 100644
index 0000000..76a86c2
--- /dev/null
+++ b/src/features/Auth/v1/hooks/useAuth.ts
@@ -0,0 +1,89 @@
+import api from "@/utils/axios.utils";
+import { useMutation } from "@tanstack/react-query";
+
+import AUTH_ENDPOINTS from "../Constant/Auth.Endpoint.Constant";
+import useAuthStore from "../Store/Auth.Store";
+import useOrganizationStore from "../Store/Organization.Store";
+
+const baseUrl =
+  import.meta.env.VITE_API_BASE_URL || "http://localhost:8000/api/v1";
+
+// =========================
+// GET ORGANIZATION
+// =========================
+
+const useGetOrganizationMutation = () => {
+  return useMutation({
+    mutationKey: ["organization"],
+
+    mutationFn: async (_id: string) => {
+      const response = await api.get(
+        `${baseUrl}${AUTH_ENDPOINTS.GET_ORGANIZATION_BY_ID}?ownerId=${_id}`
+      );
+
+      return response.data;
+    },
+
+    onSuccess: (response) => {
+      useOrganizationStore.getState().setOrganization(response.data);
+    },
+
+    onError: (error) => {
+      console.error("Failed to fetch organization:", error);
+    },
+  });
+};
+
+// =========================
+// LOGIN
+// =========================
+
+const useLoginMutation = () => {
+  const organizationMutation = useGetOrganizationMutation();
+
+  return useMutation({
+    mutationKey: ["login"],
+
+    mutationFn: async (credentials: {
+      email: string;
+      password: string;
+    }) => {
+      const response = await api.post(
+        `${baseUrl}${AUTH_ENDPOINTS.LOGIN}`,
+        credentials
+      );
+
+      return response.data;
+    },
+
+    onSuccess: async (response) => {
+      const user = response.data;
+
+      console.log("Login successful:", user);
+
+      // Save auth first
+      useAuthStore.getState().setAuthData(user);
+
+      // Fetch organization if needed
+      if (user.role === "organization") {
+        await organizationMutation.mutateAsync(user._id);
+      }
+    },
+
+    onError: (error) => {
+      console.error("Login failed:", error);
+    },
+  });
+};
+
+// =========================
+// AUTH HOOK
+// =========================
+
+export const useAuth = () => {
+  const loginMutation = useLoginMutation();
+
+  return {
+    loginMutation,
+  };
+};
\ No newline at end of file
diff --git a/src/features/Auth/v1/api/signup.ts b/src/features/Auth/v1/utils/signup.ts
similarity index 100%
rename from src/features/Auth/v1/api/signup.ts
rename to src/features/Auth/v1/utils/signup.ts
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/Partners_And_Sponsors_Card.tsx b/src/features/Events/v1/Components/Partners_And_Sponsors_Card.tsx
index 8dd5b9f..a16dc5c 100644
--- a/src/features/Events/v1/Components/Partners_And_Sponsors_Card.tsx
+++ b/src/features/Events/v1/Components/Partners_And_Sponsors_Card.tsx
@@ -1,4 +1,3 @@
-
 import React, { memo } from "react";
 import { CATEGORY_ACCENT_RULES, CategoryAccent, DEFAULT_ACCENT } from "../Constants/Event.constant";
 import { theme } from "@/theme";
@@ -31,7 +30,6 @@ const Partners_And_Sponsors_Card = ({
   name = "Partner/Sponsor Name",
   category = "Official Partner",
 }: PartnersAndSponsorsCardProps) => {
-
   const [hasImageError, setHasImageError] = React.useState(false);
 
   React.useEffect(() => {
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/Capacity_And_Registration.tsx b/src/features/Events/v1/Sections/Capacity_And_Registration.tsx
index 77bf46a..915ee74 100644
--- a/src/features/Events/v1/Sections/Capacity_And_Registration.tsx
+++ b/src/features/Events/v1/Sections/Capacity_And_Registration.tsx
@@ -6,8 +6,6 @@ import DropDown from "@/Component/ui/DropDown";
 import { theme } from "@/theme";
 
 const Capacity_And_Registration = () => {
-
-
   let [eventData, setEventData] = React.useState({
     MaxAttendees: "",
     TicketType: "Free",
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/Events/v1/Sections/Settings.tsx b/src/features/Events/v1/Sections/Settings.tsx
index ba9facf..b4e446f 100644
--- a/src/features/Events/v1/Sections/Settings.tsx
+++ b/src/features/Events/v1/Sections/Settings.tsx
@@ -1,10 +1,8 @@
-
 import { IoSettingsSharp } from "react-icons/io5";
 import EventSetting from "../Components/EventSetting";
 import { theme } from "@/theme";
 
 const Settings = () => {
-
   return (
     <div
       className="flex flex-col w-full  p-4 border-2 rounded-lg  "
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/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index a80cf95..bfbd147 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -1,12 +1,28 @@
 import { RiContactsBookFill } from "react-icons/ri";
-import { MdAssignment, MdDashboard, MdEvent, MdGroup, MdSettings, MdWork, MdWebhook } from "react-icons/md";
+import {
+  MdAssignment,
+  MdDashboard,
+  MdEvent,
+  MdGroup,
+  MdSettings,
+  MdWork,
+  MdWebhook,
+} from "react-icons/md";
 import { useTheme } from "@/theme";
 import { ThemeToggle } from "@/Component/ui/ThemeToggle";
 
 import SideBarLink from "../Components/SideBarLink";
-import { dashboardData } from "@/features/Member/v1/mock/dashboardData";
+
+import useAuthStore from "@/features/Auth/v1/Store/Auth.Store";
+
+import useOrganizationStore from "@/features/Auth/v1/Store/Organization.Store";
 
 const SideBar = () => {
+  const user = useAuthStore((state) => state.user);
+  const organization = useOrganizationStore((state) => state.organization);
+
+  console.log("User in SideBar:", user);
+  console.log("Organization in SideBar:", organization);
   const { theme } = useTheme();
 
   return (
@@ -67,16 +83,16 @@ const SideBar = () => {
             style={{ backgroundColor: theme.bg.surfaceSecondary }}
           >
             <img
-              src="https://randomuser.me/api/portraits/men/1.jpg"
+              src={organization?.LogoUrl || "/defaultProfile.png"}
               alt="Profile"
               className="w-9 h-9 rounded-full object-cover shrink-0"
             />
             <div className="min-w-0 flex-1 flex flex-col justify-center gap-0.5">
               <p className="text-sm font-semibold truncate" style={{ color: theme.text.primary }}>
-                {dashboardData.user.name}
+                {organization?.CommunityName}
               </p>
               <p className="text-xs truncate font-medium" style={{ color: theme.primary.default }}>
-                {dashboardData.user.role}
+                {user?.role}
               </p>
             </div>
           </div>
diff --git a/src/features/Tasks/v1/Task.types.ts b/src/features/Tasks/v1/Task.types.ts
index 4b0ee5f..2c25f92 100644
--- a/src/features/Tasks/v1/Task.types.ts
+++ b/src/features/Tasks/v1/Task.types.ts
@@ -120,4 +120,4 @@ export interface ReviewSubmissionPayload {
   decision: ReviewDecision;
   score?: number;
   feedback?: string;
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/common/Avatar.tsx b/src/features/Tasks/v1/components/common/Avatar.tsx
index 6656584..c9ac099 100644
--- a/src/features/Tasks/v1/components/common/Avatar.tsx
+++ b/src/features/Tasks/v1/components/common/Avatar.tsx
@@ -13,9 +13,15 @@ interface AvatarProps {
 
 // Color map for initials fallback — derived from name char code
 const BG_COLORS = [
-  "bg-indigo-500", "bg-pink-500", "bg-orange-500",
-  "bg-emerald-500", "bg-sky-500", "bg-violet-500",
-  "bg-rose-500",   "bg-amber-500","bg-teal-500",
+  "bg-indigo-500",
+  "bg-pink-500",
+  "bg-orange-500",
+  "bg-emerald-500",
+  "bg-sky-500",
+  "bg-violet-500",
+  "bg-rose-500",
+  "bg-amber-500",
+  "bg-teal-500",
 ];
 
 function getColor(name: string): string {
@@ -24,31 +30,47 @@ function getColor(name: string): string {
 }
 
 function getInitials(name: string): string {
-  return name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
+  return name
+    .split(" ")
+    .map((w) => w[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
 }
 
 const SIZE_MAP = {
-  xs: { outer: "w-6 h-6",   text: "text-[9px]",  dot: "w-1.5 h-1.5 -right-0 -bottom-0",   ring: "ring-1" },
-  sm: { outer: "w-7 h-7",   text: "text-[10px]", dot: "w-2 h-2 -right-0 -bottom-0",        ring: "ring-2" },
-  md: { outer: "w-9 h-9",   text: "text-xs",     dot: "w-2.5 h-2.5 right-0 bottom-0",      ring: "ring-2" },
-  lg: { outer: "w-12 h-12", text: "text-sm",     dot: "w-3 h-3 right-0.5 bottom-0.5",      ring: "ring-2" },
+  xs: {
+    outer: "w-6 h-6",
+    text: "text-[9px]",
+    dot: "w-1.5 h-1.5 -right-0 -bottom-0",
+    ring: "ring-1",
+  },
+  sm: { outer: "w-7 h-7", text: "text-[10px]", dot: "w-2 h-2 -right-0 -bottom-0", ring: "ring-2" },
+  md: { outer: "w-9 h-9", text: "text-xs", dot: "w-2.5 h-2.5 right-0 bottom-0", ring: "ring-2" },
+  lg: { outer: "w-12 h-12", text: "text-sm", dot: "w-3 h-3 right-0.5 bottom-0.5", ring: "ring-2" },
 };
 
 const STATUS_COLOR = {
-  online:  "bg-emerald-400",
+  online: "bg-emerald-400",
   offline: "bg-gray-300",
-  busy:    "bg-red-400",
+  busy: "bg-red-400",
 };
 
 export default function Avatar({
-  name, src, role, size = "sm",
-  showTooltip = true, status = null, ring = false, ringColor = "ring-[var(--cd-surface)]",
+  name,
+  src,
+  role,
+  size = "sm",
+  showTooltip = true,
+  status = null,
+  ring = false,
+  ringColor = "ring-[var(--cd-surface)]",
 }: AvatarProps) {
   const [imgError, setImgError] = useState(false);
-  const [hovered, setHovered]   = useState(false);
+  const [hovered, setHovered] = useState(false);
   const sz = SIZE_MAP[size];
   const initials = getInitials(name);
-  const bgColor  = getColor(name);
+  const bgColor = getColor(name);
 
   return (
     <div
@@ -57,12 +79,14 @@ export default function Avatar({
       onMouseLeave={() => setHovered(false)}
     >
       {/* Avatar circle */}
-      <div className={`
+      <div
+        className={`
         ${sz.outer} rounded-full overflow-hidden
         ${ring ? `${sz.ring} ${ringColor}` : ""}
         shadow-sm transition-transform duration-150
         ${showTooltip ? "group-hover:scale-110 group-hover:shadow-md cursor-pointer" : ""}
-      `}>
+      `}
+      >
         {!imgError ? (
           <img
             src={src}
@@ -72,7 +96,9 @@ export default function Avatar({
           />
         ) : (
           /* Initials fallback */
-          <div className={`w-full h-full flex items-center justify-center font-bold ${sz.text} text-white ${bgColor}`}>
+          <div
+            className={`w-full h-full flex items-center justify-center font-bold ${sz.text} text-white ${bgColor}`}
+          >
             {initials}
           </div>
         )}
@@ -111,7 +137,7 @@ interface AvatarGroupProps {
 }
 
 export function AvatarGroup({ members, max = 3, size = "sm" }: AvatarGroupProps) {
-  const visible  = members.slice(0, max);
+  const visible = members.slice(0, max);
   const overflow = members.length - max;
   const sz = SIZE_MAP[size];
 
@@ -137,7 +163,9 @@ export function AvatarGroup({ members, max = 3, size = "sm" }: AvatarGroupProps)
             borderColor: "var(--cd-surface)",
           }}
         >
-          <span className={`${sz.text} font-bold`} style={{ color: "var(--cd-text-2)" }}>+{overflow}</span>
+          <span className={`${sz.text} font-bold`} style={{ color: "var(--cd-text-2)" }}>
+            +{overflow}
+          </span>
         </div>
       )}
     </div>
diff --git a/src/features/Tasks/v1/components/common/CommentsSection.tsx b/src/features/Tasks/v1/components/common/CommentsSection.tsx
index 5df2bb0..5eccfd0 100644
--- a/src/features/Tasks/v1/components/common/CommentsSection.tsx
+++ b/src/features/Tasks/v1/components/common/CommentsSection.tsx
@@ -3,7 +3,9 @@ import { formatDistanceToNow, parseISO } from "date-fns";
 import { Loader2, MessageCircle, Send } from "lucide-react";
 import { useComments, useAddComment } from "../../hooks/useComments";
 
-interface Props { taskId: string; }
+interface Props {
+  taskId: string;
+}
 
 export default function CommentsSection({ taskId }: Props) {
   const { data: comments = [], isLoading } = useComments(taskId);
@@ -12,7 +14,10 @@ export default function CommentsSection({ taskId }: Props) {
   const [error, setError] = useState("");
 
   const handleSubmit = async () => {
-    if (!text.trim()) { setError("Comment cannot be empty."); return; }
+    if (!text.trim()) {
+      setError("Comment cannot be empty.");
+      return;
+    }
     setError("");
     await addComment.mutateAsync({ taskId, text: text.trim() });
     setText("");
@@ -34,13 +39,19 @@ export default function CommentsSection({ taskId }: Props) {
         <p className="text-xs text-[var(--cd-text-muted)]">Loading comments…</p>
       ) : comments.length === 0 ? (
         <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-[var(--cd-border-subtle)] bg-[var(--cd-surface-2)] px-4 py-10">
-          <p className="text-xs text-[var(--cd-text-muted)] text-center font-medium">No comments yet. Be the first to start the conversation!</p>
+          <p className="text-xs text-[var(--cd-text-muted)] text-center font-medium">
+            No comments yet. Be the first to start the conversation!
+          </p>
         </div>
       ) : (
         <div className="flex flex-col gap-4">
           {comments.map((c) => (
             <div key={c.id} className="flex gap-3 items-start">
-              <img src={c.avatar} alt={c.author} className="h-9 w-9 shrink-0 rounded-full border border-[var(--cd-border-subtle)] object-cover" />
+              <img
+                src={c.avatar}
+                alt={c.author}
+                className="h-9 w-9 shrink-0 rounded-full border border-[var(--cd-border-subtle)] object-cover"
+              />
               <div className="flex-1 rounded-xl border border-[var(--cd-border-subtle)] bg-[var(--cd-surface)] px-4 py-3">
                 <div className="flex items-center justify-between gap-2 mb-1.5">
                   <span className="text-xs font-semibold text-[var(--cd-text)]">{c.author}</span>
@@ -60,9 +71,15 @@ export default function CommentsSection({ taskId }: Props) {
         <div className="flex gap-3">
           <textarea
             value={text}
-            onChange={(e) => { setText(e.target.value); if (error) setError(""); }}
+            onChange={(e) => {
+              setText(e.target.value);
+              if (error) setError("");
+            }}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void handleSubmit(); }
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                void handleSubmit();
+              }
             }}
             rows={2}
             placeholder="Write a comment… (Enter to send)"
@@ -74,7 +91,11 @@ export default function CommentsSection({ taskId }: Props) {
             disabled={addComment.isPending || !text.trim()}
             className="flex h-11 w-11 items-center justify-center self-end rounded-lg bg-[var(--cd-primary)] text-white transition-colors hover:opacity-90 disabled:opacity-40"
           >
-            {addComment.isPending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
+            {addComment.isPending ? (
+              <Loader2 size={16} className="animate-spin" />
+            ) : (
+              <Send size={16} />
+            )}
           </button>
         </div>
         {error && <p className="text-[11px] font-medium text-[var(--cd-danger)]">{error}</p>}
@@ -82,5 +103,3 @@ export default function CommentsSection({ taskId }: Props) {
     </div>
   );
 }
-
-
diff --git a/src/features/Tasks/v1/components/common/ConfirmModal.tsx b/src/features/Tasks/v1/components/common/ConfirmModal.tsx
index 81e7dfe..03b94b1 100644
--- a/src/features/Tasks/v1/components/common/ConfirmModal.tsx
+++ b/src/features/Tasks/v1/components/common/ConfirmModal.tsx
@@ -1,5 +1,13 @@
 import { useEffect, useRef } from "react";
-import { AlertTriangle, X, Loader2, CheckCircle2, Info, AlertCircle, LucideIcon } from "lucide-react";
+import {
+  AlertTriangle,
+  X,
+  Loader2,
+  CheckCircle2,
+  Info,
+  AlertCircle,
+  LucideIcon,
+} from "lucide-react";
 
 type ModalVariant = "danger" | "success" | "warning" | "info";
 
@@ -80,7 +88,7 @@ export default function ConfirmModal({
       />
 
       {/* Dialog */}
-      <div 
+      <div
         className="relative z-10 w-full max-w-md rounded-2xl shadow-2xl border overflow-hidden animate-in fade-in zoom-in-95 duration-150"
         style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
       >
@@ -94,10 +102,12 @@ export default function ConfirmModal({
 
         <div className="p-6 pt-8">
           <div className="flex flex-col items-center text-center gap-4">
-            <div className={`shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center ${config.bg}`}>
+            <div
+              className={`shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center ${config.bg}`}
+            >
               <Icon size={28} className={config.text} />
             </div>
-            
+
             <div className="flex flex-col gap-2">
               <h3 className="text-xl font-bold text-[var(--cd-text)] leading-tight">{title}</h3>
               <p className="text-[var(--cd-text-2)] leading-relaxed">{message}</p>
diff --git a/src/features/Tasks/v1/components/common/EmptyState.tsx b/src/features/Tasks/v1/components/common/EmptyState.tsx
index 95a75c7..baac691 100644
--- a/src/features/Tasks/v1/components/common/EmptyState.tsx
+++ b/src/features/Tasks/v1/components/common/EmptyState.tsx
@@ -5,16 +5,40 @@ import type { ReactNode } from "react";
 function NoEventIllustration() {
   return (
     <svg width="96" height="80" viewBox="0 0 96 80" fill="none" className="mb-1">
-      <rect x="8" y="12" width="80" height="56" rx="8" fill="#F1F5F9" stroke="#CBD5E1" strokeWidth="1.5"/>
-      <rect x="8" y="12" width="80" height="16" rx="8" fill="#E2E8F0" stroke="#CBD5E1" strokeWidth="1.5"/>
-      <rect x="20" y="8" width="8" height="12" rx="4" fill="#94A3B8"/>
-      <rect x="68" y="8" width="8" height="12" rx="4" fill="#94A3B8"/>
-      <rect x="20" y="38" width="20" height="8" rx="3" fill="#CBD5E1"/>
-      <rect x="48" y="38" width="28" height="8" rx="3" fill="#E2E8F0"/>
-      <rect x="20" y="52" width="28" height="8" rx="3" fill="#E2E8F0"/>
-      <rect x="56" y="52" width="20" height="8" rx="3" fill="#CBD5E1"/>
-      <circle cx="76" cy="60" r="14" fill="#DBEAFE" stroke="#93C5FD" strokeWidth="1.5"/>
-      <path d="M76 54v6l3 3" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <rect
+        x="8"
+        y="12"
+        width="80"
+        height="56"
+        rx="8"
+        fill="#F1F5F9"
+        stroke="#CBD5E1"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="8"
+        y="12"
+        width="80"
+        height="16"
+        rx="8"
+        fill="#E2E8F0"
+        stroke="#CBD5E1"
+        strokeWidth="1.5"
+      />
+      <rect x="20" y="8" width="8" height="12" rx="4" fill="#94A3B8" />
+      <rect x="68" y="8" width="8" height="12" rx="4" fill="#94A3B8" />
+      <rect x="20" y="38" width="20" height="8" rx="3" fill="#CBD5E1" />
+      <rect x="48" y="38" width="28" height="8" rx="3" fill="#E2E8F0" />
+      <rect x="20" y="52" width="28" height="8" rx="3" fill="#E2E8F0" />
+      <rect x="56" y="52" width="20" height="8" rx="3" fill="#CBD5E1" />
+      <circle cx="76" cy="60" r="14" fill="#DBEAFE" stroke="#93C5FD" strokeWidth="1.5" />
+      <path
+        d="M76 54v6l3 3"
+        stroke="#3B82F6"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   );
 }
@@ -22,15 +46,30 @@ function NoEventIllustration() {
 function NoTasksIllustration() {
   return (
     <svg width="96" height="80" viewBox="0 0 96 80" fill="none" className="mb-1">
-      <rect x="16" y="8" width="64" height="64" rx="10" fill="#F8FAFC" stroke="#E2E8F0" strokeWidth="1.5"/>
-      <rect x="28" y="24" width="40" height="6" rx="3" fill="#E2E8F0"/>
-      <rect x="28" y="36" width="28" height="6" rx="3" fill="#EEF2FF"/>
-      <rect x="28" y="48" width="34" height="6" rx="3" fill="#E2E8F0"/>
-      <circle cx="24" cy="27" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1"/>
-      <circle cx="24" cy="39" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1"/>
-      <circle cx="24" cy="51" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1"/>
-      <circle cx="70" cy="58" r="14" fill="#DCFCE7" stroke="#86EFAC" strokeWidth="1.5"/>
-      <path d="M65 58l3 3 6-6" stroke="#16A34A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <rect
+        x="16"
+        y="8"
+        width="64"
+        height="64"
+        rx="10"
+        fill="#F8FAFC"
+        stroke="#E2E8F0"
+        strokeWidth="1.5"
+      />
+      <rect x="28" y="24" width="40" height="6" rx="3" fill="#E2E8F0" />
+      <rect x="28" y="36" width="28" height="6" rx="3" fill="#EEF2FF" />
+      <rect x="28" y="48" width="34" height="6" rx="3" fill="#E2E8F0" />
+      <circle cx="24" cy="27" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1" />
+      <circle cx="24" cy="39" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1" />
+      <circle cx="24" cy="51" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1" />
+      <circle cx="70" cy="58" r="14" fill="#DCFCE7" stroke="#86EFAC" strokeWidth="1.5" />
+      <path
+        d="M65 58l3 3 6-6"
+        stroke="#16A34A"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   );
 }
@@ -38,10 +77,19 @@ function NoTasksIllustration() {
 function ErrorIllustration() {
   return (
     <svg width="96" height="80" viewBox="0 0 96 80" fill="none" className="mb-1">
-      <rect x="12" y="16" width="72" height="48" rx="8" fill="#FFF1F2" stroke="#FECDD3" strokeWidth="1.5"/>
-      <path d="M48 30v14" stroke="#F43F5E" strokeWidth="2.5" strokeLinecap="round"/>
-      <circle cx="48" cy="50" r="2" fill="#F43F5E"/>
-      <path d="M28 16L20 8M68 16l8-8" stroke="#FECDD3" strokeWidth="1.5" strokeLinecap="round"/>
+      <rect
+        x="12"
+        y="16"
+        width="72"
+        height="48"
+        rx="8"
+        fill="#FFF1F2"
+        stroke="#FECDD3"
+        strokeWidth="1.5"
+      />
+      <path d="M48 30v14" stroke="#F43F5E" strokeWidth="2.5" strokeLinecap="round" />
+      <circle cx="48" cy="50" r="2" fill="#F43F5E" />
+      <path d="M28 16L20 8M68 16l8-8" stroke="#FECDD3" strokeWidth="1.5" strokeLinecap="round" />
     </svg>
   );
 }
@@ -49,11 +97,19 @@ function ErrorIllustration() {
 function NoResultsIllustration() {
   return (
     <svg width="96" height="80" viewBox="0 0 96 80" fill="none" className="mb-1">
-      <circle cx="44" cy="36" r="24" fill="#F8FAFC" stroke="#E2E8F0" strokeWidth="1.5"/>
-      <circle cx="44" cy="36" r="14" fill="#EFF6FF" stroke="#BFDBFE" strokeWidth="1"/>
-      <path d="M36 36h16M44 28v16" stroke="#93C5FD" strokeWidth="1.5" strokeLinecap="round"/>
-      <path d="M62 54l12 12" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round"/>
-      <rect x="28" y="28" width="32" height="3" rx="1.5" fill="#BFDBFE" transform="rotate(45 28 28)"/>
+      <circle cx="44" cy="36" r="24" fill="#F8FAFC" stroke="#E2E8F0" strokeWidth="1.5" />
+      <circle cx="44" cy="36" r="14" fill="#EFF6FF" stroke="#BFDBFE" strokeWidth="1" />
+      <path d="M36 36h16M44 28v16" stroke="#93C5FD" strokeWidth="1.5" strokeLinecap="round" />
+      <path d="M62 54l12 12" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round" />
+      <rect
+        x="28"
+        y="28"
+        width="32"
+        height="3"
+        rx="1.5"
+        fill="#BFDBFE"
+        transform="rotate(45 28 28)"
+      />
     </svg>
   );
 }
@@ -68,10 +124,10 @@ interface EmptyStateProps {
 }
 
 const illustrations: Record<string, () => React.JSX.Element> = {
-  "no-event":   NoEventIllustration,
-  "no-tasks":   NoTasksIllustration,
+  "no-event": NoEventIllustration,
+  "no-tasks": NoTasksIllustration,
   "no-results": NoResultsIllustration,
-  "error":      ErrorIllustration,
+  error: ErrorIllustration,
 };
 
 export default function EmptyState({
diff --git a/src/features/Tasks/v1/components/common/PriorityBadge.tsx b/src/features/Tasks/v1/components/common/PriorityBadge.tsx
index 617d0b5..03faf4a 100644
--- a/src/features/Tasks/v1/components/common/PriorityBadge.tsx
+++ b/src/features/Tasks/v1/components/common/PriorityBadge.tsx
@@ -8,9 +8,7 @@ interface Props {
 
 export default function PriorityBadge({ priority, size = "md" }: Props) {
   const cfg = PRIORITY_CONFIG[priority];
-  const cls = size === "sm"
-    ? "px-1.5 py-0.5 text-[10px] gap-1"
-    : "px-2 py-1 text-xs gap-1.5";
+  const cls = size === "sm" ? "px-1.5 py-0.5 text-[10px] gap-1" : "px-2 py-1 text-xs gap-1.5";
   return (
     <span
       className={`inline-flex items-center rounded-md font-medium ${cls} ${cfg.badgeBg} ${cfg.badgeText}`}
diff --git a/src/features/Tasks/v1/components/common/SkeletonLoader.tsx b/src/features/Tasks/v1/components/common/SkeletonLoader.tsx
index dd2e415..778999a 100644
--- a/src/features/Tasks/v1/components/common/SkeletonLoader.tsx
+++ b/src/features/Tasks/v1/components/common/SkeletonLoader.tsx
@@ -84,7 +84,7 @@ function DetailSkeleton() {
   return (
     <div className="flex flex-1 overflow-hidden">
       {/* Left panel */}
-      <div 
+      <div
         className="w-[420px] shrink-0 border-r p-6 flex flex-col gap-5"
         style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
       >
@@ -152,6 +152,6 @@ type SkeletonType = "table" | "detail" | "form";
 
 export default function SkeletonLoader({ type = "table" }: { type?: SkeletonType }) {
   if (type === "detail") return <DetailSkeleton />;
-  if (type === "form")   return <FormSkeleton />;
+  if (type === "form") return <FormSkeleton />;
   return <TableSkeleton />;
 }
diff --git a/src/features/Tasks/v1/components/common/StatusBadge.tsx b/src/features/Tasks/v1/components/common/StatusBadge.tsx
index 1cf2afe..16ac05a 100644
--- a/src/features/Tasks/v1/components/common/StatusBadge.tsx
+++ b/src/features/Tasks/v1/components/common/StatusBadge.tsx
@@ -8,9 +8,7 @@ interface Props {
 
 export default function StatusBadge({ status, size = "md" }: Props) {
   const cfg = STATUS_CONFIG[status];
-  const cls = size === "sm"
-    ? "px-1.5 py-0.5 text-[10px] gap-1"
-    : "px-2 py-1 text-xs gap-1.5";
+  const cls = size === "sm" ? "px-1.5 py-0.5 text-[10px] gap-1" : "px-2 py-1 text-xs gap-1.5";
   return (
     <span
       className={`inline-flex items-center rounded-md font-medium ${cls} ${cfg.bg} ${cfg.text}`}
diff --git a/src/features/Tasks/v1/components/common/ToastNotification.tsx b/src/features/Tasks/v1/components/common/ToastNotification.tsx
index 5f4bfab..f8663f5 100644
--- a/src/features/Tasks/v1/components/common/ToastNotification.tsx
+++ b/src/features/Tasks/v1/components/common/ToastNotification.tsx
@@ -128,17 +128,14 @@ export function ToastContainer({
 export function useToast() {
   const [toasts, setToasts] = useState<Toast[]>([]);
 
-  const addToast = useCallback(
-    (variant: ToastVariant, title: string, message?: string) => {
-      const id = `toast-${Date.now()}-${Math.random()}`;
-      setToasts((prev) => [...prev, { id, variant, title, message }]);
-    },
-    []
-  );
+  const addToast = useCallback((variant: ToastVariant, title: string, message?: string) => {
+    const id = `toast-${Date.now()}-${Math.random()}`;
+    setToasts((prev) => [...prev, { id, variant, title, message }]);
+  }, []);
 
   const dismiss = useCallback((id: string) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
 
   return { toasts, addToast, dismiss };
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/event/EventDropdown.tsx b/src/features/Tasks/v1/components/event/EventDropdown.tsx
index fe07c83..989ba5e 100644
--- a/src/features/Tasks/v1/components/event/EventDropdown.tsx
+++ b/src/features/Tasks/v1/components/event/EventDropdown.tsx
@@ -3,7 +3,11 @@ import { ChevronDown, Search, CalendarDays, Loader2, X } from "lucide-react";
 import { format, parseISO } from "date-fns";
 import { FaRocket, FaCode, FaGlobe, FaBolt, FaPalette, FaUsers } from "react-icons/fa";
 import { useEvents } from "../../hooks/useEvents";
-import { EVENT_TYPE_CONFIG, EVENT_STATUS_CONFIG, SELECTED_EVENT_KEY } from "../../constants/task.constants";
+import {
+  EVENT_TYPE_CONFIG,
+  EVENT_STATUS_CONFIG,
+  SELECTED_EVENT_KEY,
+} from "../../constants/task.constants";
 import type { EventOption } from "../../Task.types";
 
 interface Props {
@@ -26,7 +30,7 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
     (event) =>
       query.trim() === "" ||
       event.name.toLowerCase().includes(query.toLowerCase()) ||
-      event.subtitle.toLowerCase().includes(query.toLowerCase())
+      event.subtitle.toLowerCase().includes(query.toLowerCase()),
   );
 
   const handleSelect = useCallback(
@@ -37,7 +41,7 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
       setQuery("");
       setHighlighted(0);
     },
-    [onSelect]
+    [onSelect],
   );
 
   const handleClear = (event: React.MouseEvent) => {
@@ -87,7 +91,11 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
   }, [highlighted]);
 
   return (
-    <div ref={containerRef} className="relative w-full max-w-[432px] sm:w-[432px] shrink-0" onKeyDown={handleKeyDown}>
+    <div
+      ref={containerRef}
+      className="relative w-full max-w-[432px] sm:w-[432px] shrink-0"
+      onKeyDown={handleKeyDown}
+    >
       <button
         onClick={() => {
           setHighlighted(0);
@@ -103,7 +111,11 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
         aria-expanded={open}
       >
         {isLoading ? (
-          <Loader2 size={15} className="animate-spin shrink-0" style={{ color: "var(--cd-text-muted)" }} />
+          <Loader2
+            size={15}
+            className="animate-spin shrink-0"
+            style={{ color: "var(--cd-text-muted)" }}
+          />
         ) : (
           <CalendarDays size={15} className="shrink-0" style={{ color: "var(--cd-primary)" }} />
         )}
@@ -119,7 +131,9 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
               {(() => {
                 const cfg = EVENT_TYPE_CONFIG[selectedEvent.type];
                 return (
-                  <span className={`shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-md ${cfg.bg} ${cfg.text}`}>
+                  <span
+                    className={`shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-md ${cfg.bg} ${cfg.text}`}
+                  >
                     {cfg.label}
                   </span>
                 );
@@ -136,7 +150,9 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
               role="button"
               tabIndex={0}
               onClick={handleClear}
-              onKeyDown={(event) => event.key === "Enter" && handleClear(event as unknown as React.MouseEvent)}
+              onKeyDown={(event) =>
+                event.key === "Enter" && handleClear(event as unknown as React.MouseEvent)
+              }
               className="p-0.5 rounded transition"
               style={{ color: "var(--cd-text-muted)" }}
               aria-label="Clear selection"
@@ -161,7 +177,10 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
             boxShadow: "0 8px 24px var(--cd-shadow-md)",
           }}
         >
-          <div className="flex items-center gap-2 px-3 py-2.5 border-b" style={{ borderColor: "var(--cd-border)" }}>
+          <div
+            className="flex items-center gap-2 px-3 py-2.5 border-b"
+            style={{ borderColor: "var(--cd-border)" }}
+          >
             <Search size={14} className="shrink-0" style={{ color: "var(--cd-text-muted)" }} />
             <input
               ref={searchRef}
@@ -203,7 +222,8 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
                     onClick={() => handleSelect(event)}
                     onMouseEnter={(mouseEvent) => {
                       setHighlighted(index);
-                      (mouseEvent.currentTarget as HTMLLIElement).style.backgroundColor = "var(--cd-primary-subtle)";
+                      (mouseEvent.currentTarget as HTMLLIElement).style.backgroundColor =
+                        "var(--cd-primary-subtle)";
                     }}
                     onMouseLeave={(mouseEvent) => {
                       (mouseEvent.currentTarget as HTMLLIElement).style.backgroundColor = isActive
@@ -212,7 +232,8 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
                     }}
                     className="flex items-start gap-3 px-3 py-3 cursor-pointer transition-colors"
                     style={{
-                      backgroundColor: isActive || isHighlighted ? "var(--cd-primary-subtle)" : "transparent",
+                      backgroundColor:
+                        isActive || isHighlighted ? "var(--cd-primary-subtle)" : "transparent",
                     }}
                   >
                     {/* Event Icon */}
@@ -221,7 +242,8 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
                     >
                       {(() => {
                         const name = event.name.toLowerCase();
-                        if (name.includes("ai hackathon") || name.includes("ai challenge")) return <FaRocket size={16} />;
+                        if (name.includes("ai hackathon") || name.includes("ai challenge"))
+                          return <FaRocket size={16} />;
                         if (name.includes("web3")) return <FaCode size={16} />;
                         if (name.includes("open source")) return <FaGlobe size={18} />;
                         if (name.includes("speed code")) return <FaBolt size={16} />;
@@ -239,27 +261,42 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
                         >
                           {event.name}
                         </span>
-                        <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded-md ${typeCfg.bg} ${typeCfg.text}`}>
+                        <span
+                          className={`text-[10px] font-bold px-1.5 py-0.5 rounded-md ${typeCfg.bg} ${typeCfg.text}`}
+                        >
                           {typeCfg.label}
                         </span>
                       </div>
 
                       <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-                        <span className="text-xs truncate" style={{ color: "var(--cd-text-muted)" }}>
+                        <span
+                          className="text-xs truncate"
+                          style={{ color: "var(--cd-text-muted)" }}
+                        >
                           {event.subtitle}
                         </span>
                         <span style={{ color: "var(--cd-border)" }}>·</span>
-                        <span className="text-[10px] shrink-0" style={{ color: "var(--cd-text-muted)" }}>
-                          {format(parseISO(event.startDate), "MMM d")} - {format(parseISO(event.endDate), "MMM d, yyyy")}
+                        <span
+                          className="text-[10px] shrink-0"
+                          style={{ color: "var(--cd-text-muted)" }}
+                        >
+                          {format(parseISO(event.startDate), "MMM d")} -{" "}
+                          {format(parseISO(event.endDate), "MMM d, yyyy")}
                         </span>
                       </div>
                     </div>
 
-                    <span className={`shrink-0 flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-full ${statusCfg.bg} ${statusCfg.text}`}>
+                    <span
+                      className={`shrink-0 flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-full ${statusCfg.bg} ${statusCfg.text}`}
+                    >
                       {statusCfg.pulse ? (
                         <span className="relative flex h-1.5 w-1.5">
-                          <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${statusCfg.dot}`} />
-                          <span className={`relative inline-flex rounded-full h-1.5 w-1.5 ${statusCfg.dot}`} />
+                          <span
+                            className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${statusCfg.dot}`}
+                          />
+                          <span
+                            className={`relative inline-flex rounded-full h-1.5 w-1.5 ${statusCfg.dot}`}
+                          />
                         </span>
                       ) : (
                         <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
@@ -272,11 +309,17 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
             </ul>
           )}
 
-          <div className="border-t px-3 py-2 flex items-center justify-between gap-3" style={{ borderColor: "var(--cd-border)" }}>
+          <div
+            className="border-t px-3 py-2 flex items-center justify-between gap-3"
+            style={{ borderColor: "var(--cd-border)" }}
+          >
             <span className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>
               {filtered.length} event{filtered.length !== 1 ? "s" : ""}
             </span>
-            <span className="text-[10px] hidden sm:inline" style={{ color: "var(--cd-text-muted)" }}>
+            <span
+              className="text-[10px] hidden sm:inline"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
               Use arrows, Enter, Esc
             </span>
           </div>
diff --git a/src/features/Tasks/v1/components/submission/ReviewPanel.tsx b/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
index 2874686..3d85b07 100644
--- a/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
+++ b/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
@@ -53,7 +53,10 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
   };
 
   const handleSubmit = async () => {
-    if (!feedback.trim()) { setError("Please add feedback for the submitter."); return; }
+    if (!feedback.trim()) {
+      setError("Please add feedback for the submitter.");
+      return;
+    }
     setError("");
     try {
       await mutateAsync({
@@ -67,20 +70,30 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
   };
 
   return (
-    <div className="overflow-hidden rounded-xl border transition-colors duration-200"
+    <div
+      className="overflow-hidden rounded-xl border transition-colors duration-200"
       style={{
         backgroundColor: "var(--cd-surface)",
         borderColor: "var(--cd-border-subtle)",
-        boxShadow: "none"
-      }}>
+        boxShadow: "none",
+      }}
+    >
       {/* Header */}
-      <div className="flex items-center justify-between border-b px-4 py-3"
-        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}>
+      <div
+        className="flex items-center justify-between border-b px-4 py-3"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
+      >
         <div className="flex items-center gap-2">
           <MessageSquare size={15} style={{ color: "var(--cd-primary)" }} />
-          <span className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>Submit Review</span>
+          <span className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
+            Submit Review
+          </span>
         </div>
-        <button onClick={onCancel} className="rounded-lg p-1 transition-colors hover:bg-[var(--cd-hover)]" style={{ color: "var(--cd-text-muted)" }}>
+        <button
+          onClick={onCancel}
+          className="rounded-lg p-1 transition-colors hover:bg-[var(--cd-hover)]"
+          style={{ color: "var(--cd-text-muted)" }}
+        >
           <X size={15} />
         </button>
       </div>
@@ -88,16 +101,31 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
       <div className="flex flex-col gap-5 p-5">
         {/* Decision */}
         <div className="flex flex-col gap-2">
-          <label className="text-[11px] font-semibold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>Decision</label>
-          <div className="flex overflow-hidden rounded-lg border p-1 gap-1" style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "var(--cd-border-subtle)" }}>
-            <button onClick={() => setDecision("approved")}
+          <label
+            className="text-[11px] font-semibold uppercase tracking-wider"
+            style={{ color: "var(--cd-text-muted)" }}
+          >
+            Decision
+          </label>
+          <div
+            className="flex overflow-hidden rounded-lg border p-1 gap-1"
+            style={{
+              backgroundColor: "var(--cd-surface-2)",
+              borderColor: "var(--cd-border-subtle)",
+            }}
+          >
+            <button
+              onClick={() => setDecision("approved")}
               className={`flex-1 flex items-center justify-center gap-2 rounded-md py-2.5 text-sm font-medium transition-colors
-                ${decision === "approved" ? "bg-[var(--cd-success)] text-white" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}>
+                ${decision === "approved" ? "bg-[var(--cd-success)] text-white" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}
+            >
               <CheckCircle2 size={14} /> Approve
             </button>
-            <button onClick={() => setDecision("rejected")}
+            <button
+              onClick={() => setDecision("rejected")}
               className={`flex-1 flex items-center justify-center gap-2 rounded-md py-2.5 text-sm font-medium transition-colors
-                ${decision === "rejected" ? "bg-[var(--cd-danger)] text-white" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}>
+                ${decision === "rejected" ? "bg-[var(--cd-danger)] text-white" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}
+            >
               <XCircle size={14} /> Reject
             </button>
           </div>
@@ -106,14 +134,24 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
         {/* Score */}
         <div className="flex flex-col gap-3">
           <div className="flex items-center justify-between">
-            <label className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>
+            <label
+              className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
               <Star size={11} style={{ color: "var(--cd-warning)" }} /> Score (optional)
             </label>
-            <label className="flex cursor-pointer select-none items-center gap-1.5 text-xs font-medium" style={{ color: "var(--cd-text-muted)" }}>
-              <div onClick={() => setUseScore((v) => !v)}
+            <label
+              className="flex cursor-pointer select-none items-center gap-1.5 text-xs font-medium"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              <div
+                onClick={() => setUseScore((v) => !v)}
                 className="relative w-8 h-4 rounded-full cursor-pointer transition-colors"
-                style={{ backgroundColor: useScore ? "var(--cd-primary)" : "var(--cd-surface-3)" }}>
-                <span className={`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${useScore ? "translate-x-4" : "translate-x-0.5"}`} />
+                style={{ backgroundColor: useScore ? "var(--cd-primary)" : "var(--cd-surface-3)" }}
+              >
+                <span
+                  className={`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${useScore ? "translate-x-4" : "translate-x-0.5"}`}
+                />
               </div>
               Enable
             </label>
@@ -126,13 +164,24 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
                 {/* Slider */}
                 <div className="flex-1 flex flex-col gap-2">
                   <input
-                    type="range" min={0} max={100} step={1} value={score}
+                    type="range"
+                    min={0}
+                    max={100}
+                    step={1}
+                    value={score}
                     onChange={handleSlider}
                     className="w-full h-2 rounded-full cursor-pointer accent-[var(--cd-primary)]"
                     style={{ background: "var(--cd-surface-3)" }}
                   />
-                  <div className="flex justify-between text-[9px] font-bold" style={{ color: "var(--cd-text-muted)" }}>
-                    <span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
+                  <div
+                    className="flex justify-between text-[9px] font-bold"
+                    style={{ color: "var(--cd-text-muted)" }}
+                  >
+                    <span>0</span>
+                    <span>25</span>
+                    <span>50</span>
+                    <span>75</span>
+                    <span>100</span>
                   </div>
                 </div>
 
@@ -140,7 +189,9 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
                 <div className="flex flex-col items-center gap-0.5 shrink-0">
                   <div className="flex items-center gap-1.5">
                     <input
-                      type="number" min={0} max={100}
+                      type="number"
+                      min={0}
+                      max={100}
                       value={scoreInput}
                       onChange={handleManualInput}
                       onBlur={handleManualBlur}
@@ -148,19 +199,30 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
                       style={{
                         backgroundColor: "var(--cd-warning-subtle)",
                         color: "var(--cd-warning)",
-                        borderColor: "var(--cd-warning-subtle)"
+                        borderColor: "var(--cd-warning-subtle)",
                       }}
                     />
-                    <span className="text-xs font-bold" style={{ color: "var(--cd-text-muted)" }}>/100</span>
+                    <span className="text-xs font-bold" style={{ color: "var(--cd-text-muted)" }}>
+                      /100
+                    </span>
                   </div>
-                  <span className={`text-[10px] font-black uppercase tracking-tighter ${info.color}`}>{info.text}</span>
+                  <span
+                    className={`text-[10px] font-black uppercase tracking-tighter ${info.color}`}
+                  >
+                    {info.text}
+                  </span>
                 </div>
               </div>
 
               {/* Color progress bar */}
-              <div className="w-full h-2 rounded-full overflow-hidden" style={{ backgroundColor: "var(--cd-surface-3)" }}>
-                <div className={`h-full rounded-full transition-all duration-500 ${info.bar}`}
-                  style={{ width: `${score}%` }} />
+              <div
+                className="w-full h-2 rounded-full overflow-hidden"
+                style={{ backgroundColor: "var(--cd-surface-3)" }}
+              >
+                <div
+                  className={`h-full rounded-full transition-all duration-500 ${info.bar}`}
+                  style={{ width: `${score}%` }}
+                />
               </div>
             </div>
           )}
@@ -168,37 +230,63 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
 
         {/* Feedback */}
         <div className="flex flex-col gap-2">
-          <label className="text-[11px] font-semibold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>
+          <label
+            className="text-[11px] font-semibold uppercase tracking-wider"
+            style={{ color: "var(--cd-text-muted)" }}
+          >
             Feedback <span style={{ color: "var(--cd-danger)" }}>*</span>
           </label>
           <textarea
             value={feedback}
-            onChange={(e) => { setFeedback(e.target.value); if (error) setError(""); }}
-            rows={4} placeholder={decision === "approved" ? "Great work! Explain what they did well…" : "Explain what needs to be improved…"}
+            onChange={(e) => {
+              setFeedback(e.target.value);
+              if (error) setError("");
+            }}
+            rows={4}
+            placeholder={
+              decision === "approved"
+                ? "Great work! Explain what they did well…"
+                : "Explain what needs to be improved…"
+            }
             className="w-full resize-none rounded-lg border px-4 py-3 text-sm outline-none transition-colors"
             style={{
               backgroundColor: "var(--cd-surface-2)",
               color: "var(--cd-text)",
               borderColor: error ? "var(--cd-danger)" : "var(--cd-border)",
-              boxShadow: error ? "0 0 0 2px var(--cd-danger-subtle)" : "none"
+              boxShadow: error ? "0 0 0 2px var(--cd-danger-subtle)" : "none",
             }}
           />
           <div className="flex items-center justify-between">
-            {error && <p className="text-xs font-bold" style={{ color: "var(--cd-danger)" }}>⚠ {error}</p>}
-            <p className="text-[10px] font-bold ml-auto" style={{ color: "var(--cd-text-muted)" }}>{feedback.length}/500</p>
+            {error && (
+              <p className="text-xs font-bold" style={{ color: "var(--cd-danger)" }}>
+                ⚠ {error}
+              </p>
+            )}
+            <p className="text-[10px] font-bold ml-auto" style={{ color: "var(--cd-text-muted)" }}>
+              {feedback.length}/500
+            </p>
           </div>
         </div>
 
         {/* Actions */}
-        <div className="flex items-center justify-end gap-3 border-t pt-3" style={{ borderColor: "var(--cd-border-subtle)" }}>
-          <button onClick={onCancel} disabled={isPending}
+        <div
+          className="flex items-center justify-end gap-3 border-t pt-3"
+          style={{ borderColor: "var(--cd-border-subtle)" }}
+        >
+          <button
+            onClick={onCancel}
+            disabled={isPending}
             className="h-9 rounded-lg border px-4 text-sm font-medium transition-colors hover:bg-[var(--cd-hover)] disabled:opacity-40"
-            style={{ color: "var(--cd-text-2)", borderColor: "var(--cd-border)" }}>
+            style={{ color: "var(--cd-text-2)", borderColor: "var(--cd-border)" }}
+          >
             Cancel
           </button>
-          <button onClick={handleSubmit} disabled={isPending}
+          <button
+            onClick={handleSubmit}
+            disabled={isPending}
             className={`flex h-9 items-center gap-2 rounded-lg px-5 text-sm font-semibold text-white transition-colors disabled:opacity-60
-              ${decision === "approved" ? "bg-[var(--cd-success)]" : "bg-[var(--cd-danger)]"}`}>
+              ${decision === "approved" ? "bg-[var(--cd-success)]" : "bg-[var(--cd-danger)]"}`}
+          >
             {isPending && <Loader2 size={14} className="animate-spin" />}
             {decision === "approved" ? "Approve" : "Reject"} Submission
           </button>
diff --git a/src/features/Tasks/v1/components/submission/SubmissionCard.tsx b/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
index a8305c6..def4477 100644
--- a/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
+++ b/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
@@ -20,33 +20,50 @@ export default function SubmissionCard({ submission, onReview }: Props) {
     <div
       className={`
         flex flex-col gap-4 rounded-xl border p-4 transition-colors duration-200 sm:p-5
-        ${review?.decision === "approved"
-          ? "border-[var(--cd-success-subtle)] bg-[var(--cd-success-subtle)]"
-          : review?.decision === "rejected"
-          ? "border-[var(--cd-danger-subtle)] bg-[var(--cd-danger-subtle)]"
-          : "bg-[var(--cd-surface)] border-[var(--cd-border-subtle)] hover:bg-[var(--cd-hover)]"}
+        ${
+          review?.decision === "approved"
+            ? "border-[var(--cd-success-subtle)] bg-[var(--cd-success-subtle)]"
+            : review?.decision === "rejected"
+              ? "border-[var(--cd-danger-subtle)] bg-[var(--cd-danger-subtle)]"
+              : "bg-[var(--cd-surface)] border-[var(--cd-border-subtle)] hover:bg-[var(--cd-hover)]"
+        }
       `}
     >
       {/* ── Member row ───────────────────────────────────────────────────────── */}
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-3 min-w-0">
-          <Avatar name={member.name} src={member.avatar} role={member.role} size="md" showTooltip={false} />
+          <Avatar
+            name={member.name}
+            src={member.avatar}
+            role={member.role}
+            size="md"
+            showTooltip={false}
+          />
           <div className="min-w-0">
-            <p className="truncate text-sm font-semibold" style={{ color: "var(--cd-text)" }}>{member.name}</p>
-            <p className="text-xs truncate" style={{ color: "var(--cd-text-muted)" }}>{member.role}</p>
+            <p className="truncate text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
+              {member.name}
+            </p>
+            <p className="text-xs truncate" style={{ color: "var(--cd-text-muted)" }}>
+              {member.role}
+            </p>
           </div>
         </div>
 
         <div className="flex items-center gap-2 shrink-0">
           {/* Timestamp */}
-          <span className="flex items-center gap-1 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+          <span
+            className="flex items-center gap-1 text-xs"
+            style={{ color: "var(--cd-text-muted)" }}
+          >
             <Clock size={10} />
             {formatDistanceToNow(parseISO(submission.submittedAt), { addSuffix: true })}
           </span>
 
           {/* Review status chip */}
           {reviewCfg ? (
-            <span className={`flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] font-medium ${reviewCfg.bg} ${reviewCfg.text} ${reviewCfg.border}`}>
+            <span
+              className={`flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] font-medium ${reviewCfg.bg} ${reviewCfg.text} ${reviewCfg.border}`}
+            >
               {review!.decision === "approved" ? <CheckCircle2 size={10} /> : <XCircle size={10} />}
               {reviewCfg.label}
             </span>
@@ -69,9 +86,15 @@ export default function SubmissionCard({ submission, onReview }: Props) {
             className="group/link flex items-center gap-2 rounded-lg border border-[var(--cd-border-subtle)] bg-[var(--cd-surface-2)] px-3 py-2.5 text-sm font-medium transition-colors hover:bg-[var(--cd-hover)]"
             style={{ color: "var(--cd-text)" }}
           >
-            <Github size={14} className="text-[var(--cd-text-muted)] group-hover/link:text-[var(--cd-primary)]" />
+            <Github
+              size={14}
+              className="text-[var(--cd-text-muted)] group-hover/link:text-[var(--cd-primary)]"
+            />
             <span className="flex-1 truncate">{submission.githubUrl.replace("https://", "")}</span>
-            <ExternalLink size={11} className="opacity-40 group-hover/link:opacity-100 transition" />
+            <ExternalLink
+              size={11}
+              className="opacity-40 group-hover/link:opacity-100 transition"
+            />
           </a>
         )}
         {submission.fileUrl && (
@@ -85,7 +108,10 @@ export default function SubmissionCard({ submission, onReview }: Props) {
           >
             <FileUp size={14} />
             <span className="flex-1 truncate">{submission.fileUrl}</span>
-            <ExternalLink size={11} className="opacity-60 group-hover/link:opacity-100 transition" />
+            <ExternalLink
+              size={11}
+              className="opacity-60 group-hover/link:opacity-100 transition"
+            />
           </a>
         )}
         {submission.linkUrl && (
@@ -99,7 +125,10 @@ export default function SubmissionCard({ submission, onReview }: Props) {
           >
             <ExternalLink size={14} />
             <span className="flex-1 truncate">{submission.linkUrl}</span>
-            <ExternalLink size={11} className="opacity-60 group-hover/link:opacity-100 transition" />
+            <ExternalLink
+              size={11}
+              className="opacity-60 group-hover/link:opacity-100 transition"
+            />
           </a>
         )}
       </div>
@@ -115,20 +144,27 @@ export default function SubmissionCard({ submission, onReview }: Props) {
 
       {/* ── Review details (Existing) ────────────────────────────────────────── */}
       {review && !isReviewing && (
-        <div className={`flex flex-col gap-2.5 rounded-lg border p-4 ${reviewCfg!.bg} ${reviewCfg!.border}`}>
+        <div
+          className={`flex flex-col gap-2.5 rounded-lg border p-4 ${reviewCfg!.bg} ${reviewCfg!.border}`}
+        >
           <div className="flex items-center justify-between">
             <span className={`text-sm font-semibold ${reviewCfg!.text}`}>
               {review.decision === "approved" ? "Approved" : "Rejected"} by {review.reviewedBy}
             </span>
             {review.score !== undefined && (
-              <span className="flex items-center gap-1 rounded-md border border-[var(--cd-warning-subtle)] bg-[var(--cd-surface)] px-2 py-1 text-xs font-medium" style={{ color: "var(--cd-warning)" }}>
+              <span
+                className="flex items-center gap-1 rounded-md border border-[var(--cd-warning-subtle)] bg-[var(--cd-surface)] px-2 py-1 text-xs font-medium"
+                style={{ color: "var(--cd-warning)" }}
+              >
                 <Star size={11} fill="currentColor" />
                 {review.score}/100
               </span>
             )}
           </div>
           {review.feedback && (
-            <p className="text-sm leading-relaxed opacity-90" style={{ color: "var(--cd-text)" }}>{review.feedback}</p>
+            <p className="text-sm leading-relaxed opacity-90" style={{ color: "var(--cd-text)" }}>
+              {review.feedback}
+            </p>
           )}
         </div>
       )}
diff --git a/src/features/Tasks/v1/components/submission/SubmissionList.tsx b/src/features/Tasks/v1/components/submission/SubmissionList.tsx
index 0cd5a46..fc52927 100644
--- a/src/features/Tasks/v1/components/submission/SubmissionList.tsx
+++ b/src/features/Tasks/v1/components/submission/SubmissionList.tsx
@@ -14,15 +14,15 @@ interface Props {
 type SortKey = "newest" | "oldest" | "pending";
 
 const SORT_OPTIONS: { value: SortKey; label: string; dot: string }[] = [
-  { value: "newest",  label: "Newest first",  dot: "bg-indigo-500"  },
-  { value: "oldest",  label: "Oldest first",  dot: "bg-gray-400"    },
-  { value: "pending", label: "Pending first", dot: "bg-amber-400"   },
+  { value: "newest", label: "Newest first", dot: "bg-indigo-500" },
+  { value: "oldest", label: "Oldest first", dot: "bg-gray-400" },
+  { value: "pending", label: "Pending first", dot: "bg-amber-400" },
 ];
 
 // ─── Reusable portal dropdown (same pattern as TaskFilters) ───────────────────
 function SortDropdown({ sort, onChange }: { sort: SortKey; onChange: (v: SortKey) => void }) {
   const [open, setOpen] = useState(false);
-  const btnRef   = useRef<HTMLButtonElement>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
   const [style, setStyle] = useState<React.CSSProperties>({});
 
@@ -44,19 +44,24 @@ function SortDropdown({ sort, onChange }: { sort: SortKey; onChange: (v: SortKey
     const PANEL_H = 160;
     const below = window.innerHeight - rect.bottom;
     if (below < PANEL_H && rect.top > below) {
-      setStyle({ position: "fixed", left: rect.left, bottom: window.innerHeight - rect.top + 6, zIndex: 9999 });
+      setStyle({
+        position: "fixed",
+        left: rect.left,
+        bottom: window.innerHeight - rect.top + 6,
+        zIndex: 9999,
+      });
     } else {
       setStyle({ position: "fixed", left: rect.left, top: rect.bottom + 6, zIndex: 9999 });
     }
   }, [open]);
 
-  const current = SORT_OPTIONS.find(o => o.value === sort)!;
+  const current = SORT_OPTIONS.find((o) => o.value === sort)!;
 
   return (
     <div className="relative shrink-0">
       <button
         ref={btnRef}
-        onClick={() => setOpen(o => !o)}
+        onClick={() => setOpen((o) => !o)}
         className="flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-colors select-none hover:bg-[var(--cd-hover)]"
         style={{
           backgroundColor: "var(--cd-surface-2)",
@@ -66,41 +71,59 @@ function SortDropdown({ sort, onChange }: { sort: SortKey; onChange: (v: SortKey
       >
         <ArrowUpDown size={11} className="opacity-80" />
         {current.label}
-        <ChevronDown size={11} className={`transition-transform duration-200 ${open ? "rotate-180" : ""} opacity-80`} />
+        <ChevronDown
+          size={11}
+          className={`transition-transform duration-200 ${open ? "rotate-180" : ""} opacity-80`}
+        />
       </button>
 
-      {open && createPortal(
-        <div
-          ref={panelRef}
-          style={{
-            ...style,
-            backgroundColor: "var(--cd-surface)",
-            borderColor: "var(--cd-border)",
-            boxShadow: "0 18px 48px -24px var(--cd-shadow-md)",
-          }}
-          className="min-w-[160px] overflow-hidden rounded-lg border py-1"
-        >
-          {SORT_OPTIONS.map(opt => (
-            <button
-              key={opt.value}
-              onMouseDown={(e) => { e.preventDefault(); onChange(opt.value); setOpen(false); }}
-              className={`w-full flex items-center gap-2.5 px-3.5 py-2.5 text-xs font-semibold text-left transition-colors
+      {open &&
+        createPortal(
+          <div
+            ref={panelRef}
+            style={{
+              ...style,
+              backgroundColor: "var(--cd-surface)",
+              borderColor: "var(--cd-border)",
+              boxShadow: "0 18px 48px -24px var(--cd-shadow-md)",
+            }}
+            className="min-w-[160px] overflow-hidden rounded-lg border py-1"
+          >
+            {SORT_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  onChange(opt.value);
+                  setOpen(false);
+                }}
+                className={`w-full flex items-center gap-2.5 px-3.5 py-2.5 text-xs font-semibold text-left transition-colors
                 ${opt.value === sort ? "bg-[var(--cd-hover)] text-[var(--cd-primary-text)]" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]"}`}
-            >
-              <span className={`w-2 h-2 rounded-full shrink-0 ${opt.dot}`} />
-              <span className="flex-1">{opt.label}</span>
-              {opt.value === sort && <Check size={12} className="text-[var(--cd-primary)] shrink-0" />}
-            </button>
-          ))}
-        </div>,
-        document.body
-      )}
+              >
+                <span className={`w-2 h-2 rounded-full shrink-0 ${opt.dot}`} />
+                <span className="flex-1">{opt.label}</span>
+                {opt.value === sort && (
+                  <Check size={12} className="text-[var(--cd-primary)] shrink-0" />
+                )}
+              </button>
+            ))}
+          </div>,
+          document.body,
+        )}
     </div>
   );
 }
 
 // ─── Toggle switch ────────────────────────────────────────────────────────────
-function Toggle({ value, onChange, label }: { value: boolean; onChange: (v: boolean) => void; label: string }) {
+function Toggle({
+  value,
+  onChange,
+  label,
+}: {
+  value: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+}) {
   return (
     <label className="flex items-center gap-2 cursor-pointer select-none group">
       <div
@@ -108,9 +131,15 @@ function Toggle({ value, onChange, label }: { value: boolean; onChange: (v: bool
         className="relative h-5 w-9 rounded-full transition-colors duration-200"
         style={{ backgroundColor: value ? "var(--cd-primary)" : "var(--cd-surface-3)" }}
       >
-        <span className="absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200" style={{ transform: value ? "translateX(16px)" : "translateX(2px)" }} />
+        <span
+          className="absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200"
+          style={{ transform: value ? "translateX(16px)" : "translateX(2px)" }}
+        />
       </div>
-      <span className="text-xs font-semibold transition-colors" style={{ color: value ? "var(--cd-primary-text)" : "var(--cd-text-muted)" }}>
+      <span
+        className="text-xs font-semibold transition-colors"
+        style={{ color: value ? "var(--cd-primary-text)" : "var(--cd-text-muted)" }}
+      >
         {label}
       </span>
     </label>
@@ -119,16 +148,18 @@ function Toggle({ value, onChange, label }: { value: boolean; onChange: (v: bool
 
 // ─── Main ─────────────────────────────────────────────────────────────────────
 export default function SubmissionList({ submissions, isLoading, onReview }: Props) {
-  const [sort,         setSort]         = useState<SortKey>("newest");
+  const [sort, setSort] = useState<SortKey>("newest");
   const [showReviewed, setShowReviewed] = useState(true);
 
   if (isLoading) return <SkeletonLoader type="form" />;
 
   const sorted = [...submissions]
-    .filter(s => showReviewed || !s.review)
+    .filter((s) => showReviewed || !s.review)
     .sort((a, b) => {
-      if (sort === "newest") return new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime();
-      if (sort === "oldest") return new Date(a.submittedAt).getTime() - new Date(b.submittedAt).getTime();
+      if (sort === "newest")
+        return new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime();
+      if (sort === "oldest")
+        return new Date(a.submittedAt).getTime() - new Date(b.submittedAt).getTime();
       return (a.review ? 1 : 0) - (b.review ? 1 : 0); // pending first
     });
 
@@ -138,22 +169,29 @@ export default function SubmissionList({ submissions, isLoading, onReview }: Pro
       <div className="flex flex-wrap items-center justify-between gap-3">
         {/* Title + count */}
         <div className="flex items-center gap-2">
-          <h3 className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>Submissions</h3>
-          <span className="rounded-md px-1.5 py-0.5 text-[11px] font-medium"
-            style={{ 
-              backgroundColor: submissions.length > 0 ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
-              color: submissions.length > 0 ? "var(--cd-primary-text)" : "var(--cd-text-muted)"
-            }}>
+          <h3 className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
+            Submissions
+          </h3>
+          <span
+            className="rounded-md px-1.5 py-0.5 text-[11px] font-medium"
+            style={{
+              backgroundColor:
+                submissions.length > 0 ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
+              color: submissions.length > 0 ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+            }}
+          >
             {submissions.length}
           </span>
-          {submissions.filter(s => !s.review).length > 0 && (
-            <span className="rounded-md border px-1.5 py-0.5 text-[11px] font-medium"
+          {submissions.filter((s) => !s.review).length > 0 && (
+            <span
+              className="rounded-md border px-1.5 py-0.5 text-[11px] font-medium"
               style={{
                 backgroundColor: "var(--cd-warning-subtle)",
                 color: "var(--cd-warning)",
-                borderColor: "var(--cd-warning-subtle)"
-              }}>
-              {submissions.filter(s => !s.review).length} pending
+                borderColor: "var(--cd-warning-subtle)",
+              }}
+            >
+              {submissions.filter((s) => !s.review).length} pending
             </span>
           )}
         </div>
@@ -168,10 +206,15 @@ export default function SubmissionList({ submissions, isLoading, onReview }: Pro
       {/* ── List ────────────────────────────────────────────────────────────── */}
       {sorted.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-14 text-center">
-          <div className="w-12 h-12 rounded-2xl flex items-center justify-center mb-3" style={{ backgroundColor: "var(--cd-surface-2)" }}>
+          <div
+            className="w-12 h-12 rounded-2xl flex items-center justify-center mb-3"
+            style={{ backgroundColor: "var(--cd-surface-2)" }}
+          >
             <Inbox size={20} style={{ color: "var(--cd-text-muted)" }} />
           </div>
-          <p className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>No submissions yet</p>
+          <p className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
+            No submissions yet
+          </p>
           <p className="text-xs mt-1 max-w-[200px]" style={{ color: "var(--cd-text-muted)" }}>
             {showReviewed
               ? "Assignees haven't submitted anything for this task."
@@ -180,7 +223,7 @@ export default function SubmissionList({ submissions, isLoading, onReview }: Pro
         </div>
       ) : (
         <div className="flex flex-col gap-3">
-          {sorted.map(sub => (
+          {sorted.map((sub) => (
             <SubmissionCard key={sub.id} submission={sub} onReview={onReview} />
           ))}
         </div>
diff --git a/src/features/Tasks/v1/components/task/TaskCardList.tsx b/src/features/Tasks/v1/components/task/TaskCardList.tsx
index e41926c..d3682fd 100644
--- a/src/features/Tasks/v1/components/task/TaskCardList.tsx
+++ b/src/features/Tasks/v1/components/task/TaskCardList.tsx
@@ -1,8 +1,17 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
-  Plus, Eye, Pencil, Trash2, SearchX,
-  Github, FileUp, Layers, Link, ChevronLeft, ChevronRight,
+  Plus,
+  Eye,
+  Pencil,
+  Trash2,
+  SearchX,
+  Github,
+  FileUp,
+  Layers,
+  Link,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 import { formatDistanceToNow, isPast, parseISO } from "date-fns";
 import { AvatarGroup } from "../common/Avatar";
@@ -23,33 +32,39 @@ interface Props {
 }
 
 const SUB_ICON: Record<string, React.ReactNode> = {
-  file:   <FileUp size={11} />,
+  file: <FileUp size={11} />,
   github: <Github size={11} />,
-  link:   <Link size={11} />,
-  all:    <Layers size={11} />,
-  both:   <Layers size={11} />,
+  link: <Link size={11} />,
+  all: <Layers size={11} />,
+  both: <Layers size={11} />,
 };
 
 export default function TaskCardList({
-  tasks, isLoading, onDelete, onCreateTask, hasFilters, onResetFilters,
+  tasks,
+  isLoading,
+  onDelete,
+  onCreateTask,
+  hasFilters,
+  onResetFilters,
 }: Props) {
-  const navigate   = useNavigate();
+  const navigate = useNavigate();
   const [page, setPage] = useState(1);
-  const PAGE_SIZE  = 10;
+  const PAGE_SIZE = 10;
   const totalPages = Math.ceil(tasks.length / PAGE_SIZE);
-  const paginated  = tasks.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+  const paginated = tasks.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
 
-  if (isLoading) return (
-    <div className="flex flex-col gap-3 p-4">
-      {Array.from({ length: 4 }).map((_, i) => (
-        <div
-          key={i}
-          className="h-40 rounded-xl animate-pulse"
-          style={{ backgroundColor: "var(--cd-surface-2)" }}
-        />
-      ))}
-    </div>
-  );
+  if (isLoading)
+    return (
+      <div className="flex flex-col gap-3 p-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-40 rounded-xl animate-pulse"
+            style={{ backgroundColor: "var(--cd-surface-2)" }}
+          />
+        ))}
+      </div>
+    );
 
   if (tasks.length === 0) {
     return hasFilters ? (
@@ -88,10 +103,10 @@ export default function TaskCardList({
       {/* ── Card list ────────────────────────────────────── */}
       <div className="flex flex-col gap-3">
         {paginated.map((task) => {
-          const subCfg     = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
-          const priCfg     = PRIORITY_CONFIG[task.priority];
+          const subCfg = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
+          const priCfg = PRIORITY_CONFIG[task.priority];
           const deadlineDt = parseISO(task.deadline);
-          const isOverdue  = isPast(deadlineDt) && task.status !== "completed";
+          const isOverdue = isPast(deadlineDt) && task.status !== "completed";
 
           return (
             <div
@@ -107,7 +122,10 @@ export default function TaskCardList({
             >
               {/* Top row: title + actions */}
               <div className="mb-3 flex items-start justify-between gap-3">
-                <h3 className="min-w-0 flex-1 text-sm font-semibold leading-5" style={{ color: "var(--cd-text)" }}>
+                <h3
+                  className="min-w-0 flex-1 text-sm font-semibold leading-5"
+                  style={{ color: "var(--cd-text)" }}
+                >
                   {task.title}
                 </h3>
                 <div
@@ -136,7 +154,10 @@ export default function TaskCardList({
               </div>
 
               {/* Description */}
-              <p className="mb-3 line-clamp-2 text-xs leading-5" style={{ color: "var(--cd-text-muted)" }}>
+              <p
+                className="mb-3 line-clamp-2 text-xs leading-5"
+                style={{ color: "var(--cd-text-muted)" }}
+              >
                 {task.description}
               </p>
 
@@ -149,7 +170,10 @@ export default function TaskCardList({
                   {task.technologies.length > 4 && (
                     <span
                       className="rounded-md px-1.5 py-0.5 text-[10px] font-medium"
-                      style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text-muted)" }}
+                      style={{
+                        backgroundColor: "var(--cd-surface-2)",
+                        color: "var(--cd-text-muted)",
+                      }}
                     >
                       +{task.technologies.length - 4}
                     </span>
@@ -164,7 +188,8 @@ export default function TaskCardList({
                 <span
                   className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[10px] font-medium ${subCfg.bg} ${subCfg.text}`}
                 >
-                  {SUB_ICON[task.submissionType]}{subCfg.label}
+                  {SUB_ICON[task.submissionType]}
+                  {subCfg.label}
                 </span>
                 {task.isMandatory && (
                   <span className="rounded-md bg-[var(--cd-surface-2)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--cd-text-2)]">
@@ -174,11 +199,19 @@ export default function TaskCardList({
               </div>
 
               {/* Bottom: members + deadline + points */}
-              <div className="flex items-center justify-between gap-3 border-t pt-3" style={{ borderColor: "var(--cd-border-subtle)" }}>
+              <div
+                className="flex items-center justify-between gap-3 border-t pt-3"
+                style={{ borderColor: "var(--cd-border-subtle)" }}
+              >
                 <AvatarGroup members={task.assignedTo} max={4} size="xs" />
                 <div className="flex items-center gap-3">
                   {task.points !== undefined && (
-                    <span className="text-[10px] font-medium" style={{ color: "var(--cd-text-muted)" }}>{task.points} pts</span>
+                    <span
+                      className="text-[10px] font-medium"
+                      style={{ color: "var(--cd-text-muted)" }}
+                    >
+                      {task.points} pts
+                    </span>
                   )}
                   <span
                     className={`text-[10px] font-semibold ${isOverdue ? "text-red-500" : ""}`}
@@ -241,7 +274,10 @@ export default function TaskCardList({
 
 // ── Small action button ───────────────────────────────────────────────────────
 function ActionBtn({
-  icon, label, onClick, color,
+  icon,
+  label,
+  onClick,
+  color,
 }: {
   icon: React.ReactNode;
   label: string;
@@ -250,8 +286,8 @@ function ActionBtn({
 }) {
   const hover = {
     indigo: "hover:bg-[var(--cd-primary-subtle)] hover:text-[var(--cd-primary-text)]",
-    gray:   "hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]",
-    red:    "hover:bg-[var(--cd-danger-subtle)] hover:text-[var(--cd-danger)]",
+    gray: "hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]",
+    red: "hover:bg-[var(--cd-danger-subtle)] hover:text-[var(--cd-danger)]",
   };
   return (
     <button
diff --git a/src/features/Tasks/v1/components/task/TaskFilters.tsx b/src/features/Tasks/v1/components/task/TaskFilters.tsx
index 2f89713..8064dd0 100644
--- a/src/features/Tasks/v1/components/task/TaskFilters.tsx
+++ b/src/features/Tasks/v1/components/task/TaskFilters.tsx
@@ -11,24 +11,71 @@ interface Props {
   filteredCount: number;
 }
 
-const STATUS_DOTS: Record<string, string> = { all: "bg-gray-400", todo: "bg-gray-500", "in-progress": "bg-indigo-500", completed: "bg-emerald-500" };
-const TIME_DOTS: Record<string, string> = { all: "bg-gray-400", upcoming: "bg-sky-500", past: "bg-red-500", completed: "bg-emerald-500" };
-const PRIORITY_DOTS: Record<string, string> = { all: "bg-gray-400", high: "bg-red-500", medium: "bg-amber-400", low: "bg-sky-400" };
+const STATUS_DOTS: Record<string, string> = {
+  all: "bg-gray-400",
+  todo: "bg-gray-500",
+  "in-progress": "bg-indigo-500",
+  completed: "bg-emerald-500",
+};
+const TIME_DOTS: Record<string, string> = {
+  all: "bg-gray-400",
+  upcoming: "bg-sky-500",
+  past: "bg-red-500",
+  completed: "bg-emerald-500",
+};
+const PRIORITY_DOTS: Record<string, string> = {
+  all: "bg-gray-400",
+  high: "bg-red-500",
+  medium: "bg-amber-400",
+  low: "bg-sky-400",
+};
 
 const STATUS_STYLES: Record<string, { bg: string; color: string; border: string }> = {
   todo: { bg: "var(--cd-surface-3)", color: "var(--cd-text-2)", border: "var(--cd-border)" },
-  "in-progress": { bg: "rgba(97, 95, 255, 0.16)", color: "#A7C7FF", border: "rgba(97, 95, 255, 0.38)" },
-  completed: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)", border: "var(--cd-success-subtle)" },
+  "in-progress": {
+    bg: "rgba(97, 95, 255, 0.16)",
+    color: "#A7C7FF",
+    border: "rgba(97, 95, 255, 0.38)",
+  },
+  completed: {
+    bg: "var(--cd-success-subtle)",
+    color: "var(--cd-success)",
+    border: "var(--cd-success-subtle)",
+  },
 };
 const TIME_STYLES: Record<string, { bg: string; color: string; border: string }> = {
-  upcoming: { bg: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)", border: "var(--cd-primary-subtle)" },
-  past: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)", border: "var(--cd-danger-subtle)" },
-  completed: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)", border: "var(--cd-success-subtle)" },
+  upcoming: {
+    bg: "var(--cd-primary-subtle)",
+    color: "var(--cd-primary-text)",
+    border: "var(--cd-primary-subtle)",
+  },
+  past: {
+    bg: "var(--cd-danger-subtle)",
+    color: "var(--cd-danger)",
+    border: "var(--cd-danger-subtle)",
+  },
+  completed: {
+    bg: "var(--cd-success-subtle)",
+    color: "var(--cd-success)",
+    border: "var(--cd-success-subtle)",
+  },
 };
 const PRIORITY_STYLES: Record<string, { bg: string; color: string; border: string }> = {
-  high: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)", border: "var(--cd-danger-subtle)" },
-  medium: { bg: "var(--cd-warning-subtle)", color: "var(--cd-warning)", border: "var(--cd-warning-subtle)" },
-  low: { bg: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)", border: "var(--cd-primary-subtle)" },
+  high: {
+    bg: "var(--cd-danger-subtle)",
+    color: "var(--cd-danger)",
+    border: "var(--cd-danger-subtle)",
+  },
+  medium: {
+    bg: "var(--cd-warning-subtle)",
+    color: "var(--cd-warning)",
+    border: "var(--cd-warning-subtle)",
+  },
+  low: {
+    bg: "var(--cd-primary-subtle)",
+    color: "var(--cd-primary-text)",
+    border: "var(--cd-primary-subtle)",
+  },
 };
 
 // ─── Dropdown state hook ──────────────────────────────────────────────────────
@@ -49,7 +96,12 @@ function useDropdown() {
 }
 
 // ─── Portal panel ─────────────────────────────────────────────────────────────
-function DropdownPortal({ btnRef, panelRef, open, children }: {
+function DropdownPortal({
+  btnRef,
+  panelRef,
+  open,
+  children,
+}: {
   btnRef: React.RefObject<HTMLButtonElement | null>;
   panelRef: React.RefObject<HTMLDivElement | null>;
   open: boolean;
@@ -61,9 +113,13 @@ function DropdownPortal({ btnRef, panelRef, open, children }: {
     const rect = btnRef.current.getBoundingClientRect();
     const below = window.innerHeight - rect.bottom;
     if (below < 240 && rect.top > below)
-      setStyle({ position: "fixed", left: rect.left, bottom: window.innerHeight - rect.top + 6, zIndex: 9999 });
-    else
-      setStyle({ position: "fixed", left: rect.left, top: rect.bottom + 6, zIndex: 9999 });
+      setStyle({
+        position: "fixed",
+        left: rect.left,
+        bottom: window.innerHeight - rect.top + 6,
+        zIndex: 9999,
+      });
+    else setStyle({ position: "fixed", left: rect.left, top: rect.bottom + 6, zIndex: 9999 });
   }, [open, btnRef]);
   if (!open) return null;
   return createPortal(
@@ -79,12 +135,19 @@ function DropdownPortal({ btnRef, panelRef, open, children }: {
     >
       {children}
     </div>,
-    document.body
+    document.body,
   );
 }
 
 // ─── Generic pill dropdown ────────────────────────────────────────────────────
-function PillDropdown<T extends string>({ label: pillLabel, value, options, onChange, dotMap, styleMap }: {
+function PillDropdown<T extends string>({
+  label: pillLabel,
+  value,
+  options,
+  onChange,
+  dotMap,
+  styleMap,
+}: {
   label: string;
   value: T;
   options: { value: T; label: string }[];
@@ -95,7 +158,11 @@ function PillDropdown<T extends string>({ label: pillLabel, value, options, onCh
   const { open, setOpen, btnRef, panelRef } = useDropdown();
   const isActive = value !== options[0].value;
   const current = options.find((o) => o.value === value)?.label ?? pillLabel;
-  const activeStyle = styleMap[value] ?? { bg: "var(--cd-primary)", color: "#fff", border: "var(--cd-primary)" };
+  const activeStyle = styleMap[value] ?? {
+    bg: "var(--cd-primary)",
+    color: "#fff",
+    border: "var(--cd-primary)",
+  };
 
   return (
     <div className="relative shrink-0">
@@ -109,7 +176,11 @@ function PillDropdown<T extends string>({ label: pillLabel, value, options, onCh
           borderColor: isActive ? activeStyle.border : "var(--cd-border)",
         }}
       >
-        {isActive && <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dotMap[value] ?? "bg-white"} opacity-80`} />}
+        {isActive && (
+          <span
+            className={`w-1.5 h-1.5 rounded-full shrink-0 ${dotMap[value] ?? "bg-white"} opacity-80`}
+          />
+        )}
         {current}
         <ChevronDown
           size={11}
@@ -122,7 +193,11 @@ function PillDropdown<T extends string>({ label: pillLabel, value, options, onCh
         {options.map((opt) => (
           <button
             key={opt.value}
-            onMouseDown={(e) => { e.preventDefault(); onChange(opt.value); setOpen(false); }}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onChange(opt.value);
+              setOpen(false);
+            }}
             className="w-full flex items-center gap-2.5 px-3.5 py-2 text-xs font-semibold text-left transition-colors"
             style={{
               backgroundColor: opt.value === value ? "var(--cd-surface-2)" : "transparent",
@@ -137,9 +212,13 @@ function PillDropdown<T extends string>({ label: pillLabel, value, options, onCh
                 (e.currentTarget as HTMLElement).style.backgroundColor = "transparent";
             }}
           >
-            <span className={`w-2 h-2 rounded-full shrink-0 ${dotMap[opt.value] ?? "bg-gray-300"}`} />
+            <span
+              className={`w-2 h-2 rounded-full shrink-0 ${dotMap[opt.value] ?? "bg-gray-300"}`}
+            />
             <span className="flex-1">{opt.label}</span>
-            {opt.value === value && <Check size={12} style={{ color: "var(--cd-primary)" }} className="shrink-0" />}
+            {opt.value === value && (
+              <Check size={12} style={{ color: "var(--cd-primary)" }} className="shrink-0" />
+            )}
           </button>
         ))}
       </DropdownPortal>
@@ -148,7 +227,13 @@ function PillDropdown<T extends string>({ label: pillLabel, value, options, onCh
 }
 
 // ─── Member multi-select ──────────────────────────────────────────────────────
-function MemberFilter({ selected, onChange }: { selected: string[]; onChange: (ids: string[]) => void }) {
+function MemberFilter({
+  selected,
+  onChange,
+}: {
+  selected: string[];
+  onChange: (ids: string[]) => void;
+}) {
   const { open, setOpen, btnRef, panelRef } = useDropdown();
   const isActive = selected.length > 0;
   const toggle = (id: string) =>
@@ -171,13 +256,21 @@ function MemberFilter({ selected, onChange }: { selected: string[]; onChange: (i
             {selected.slice(0, 2).map((id) => {
               const m = mockMembers.find((x) => x.id === id);
               return m ? (
-                <img key={id} src={m.avatar} alt={m.name} className="w-4 h-4 rounded-full border border-white object-cover" />
+                <img
+                  key={id}
+                  src={m.avatar}
+                  alt={m.name}
+                  className="w-4 h-4 rounded-full border border-white object-cover"
+                />
               ) : null;
             })}
           </span>
         )}
         {isActive ? `${selected.length} Member${selected.length > 1 ? "s" : ""}` : "Members"}
-        <ChevronDown size={11} className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
+        <ChevronDown
+          size={11}
+          className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+        />
       </button>
 
       <DropdownPortal btnRef={btnRef} panelRef={panelRef} open={open}>
@@ -186,25 +279,44 @@ function MemberFilter({ selected, onChange }: { selected: string[]; onChange: (i
           return (
             <button
               key={m.id}
-              onMouseDown={(e) => { e.preventDefault(); toggle(m.id); }}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                toggle(m.id);
+              }}
               className="w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors"
               style={{ backgroundColor: isSel ? "var(--cd-primary-subtle)" : "transparent" }}
               onMouseEnter={(e) =>
-                ((e.currentTarget as HTMLElement).style.backgroundColor = isSel ? "var(--cd-primary-subtle)" : "var(--cd-hover)")
+                ((e.currentTarget as HTMLElement).style.backgroundColor = isSel
+                  ? "var(--cd-primary-subtle)"
+                  : "var(--cd-hover)")
               }
               onMouseLeave={(e) =>
-                ((e.currentTarget as HTMLElement).style.backgroundColor = isSel ? "var(--cd-primary-subtle)" : "transparent")
+                ((e.currentTarget as HTMLElement).style.backgroundColor = isSel
+                  ? "var(--cd-primary-subtle)"
+                  : "transparent")
               }
             >
-              <img src={m.avatar} alt={m.name} className="w-6 h-6 rounded-full object-cover shrink-0" />
+              <img
+                src={m.avatar}
+                alt={m.name}
+                className="w-6 h-6 rounded-full object-cover shrink-0"
+              />
               <div className="flex-1 min-w-0">
-                <p className="text-xs font-semibold truncate" style={{ color: isSel ? "var(--cd-primary-text)" : "var(--cd-text)" }}>
+                <p
+                  className="text-xs font-semibold truncate"
+                  style={{ color: isSel ? "var(--cd-primary-text)" : "var(--cd-text)" }}
+                >
                   {m.name}
                 </p>
-                <p className="text-[10px] truncate" style={{ color: "var(--cd-text-muted)" }}>{m.role}</p>
+                <p className="text-[10px] truncate" style={{ color: "var(--cd-text-muted)" }}>
+                  {m.role}
+                </p>
               </div>
               {isSel && (
-                <div className="w-4 h-4 rounded-full flex items-center justify-center shrink-0" style={{ backgroundColor: "var(--cd-primary)" }}>
+                <div
+                  className="w-4 h-4 rounded-full flex items-center justify-center shrink-0"
+                  style={{ backgroundColor: "var(--cd-primary)" }}
+                >
                   <Check size={9} className="text-white" />
                 </div>
               )}
@@ -215,11 +327,18 @@ function MemberFilter({ selected, onChange }: { selected: string[]; onChange: (i
           <>
             <div className="border-t my-1" style={{ borderColor: "var(--cd-border)" }} />
             <button
-              onMouseDown={(e) => { e.preventDefault(); onChange([]); }}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                onChange([]);
+              }}
               className="w-full px-3 py-1.5 text-xs font-semibold text-left"
               style={{ color: "var(--cd-danger)" }}
-              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = "var(--cd-danger-subtle)")}
-              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = "transparent")}
+              onMouseEnter={(e) =>
+                ((e.currentTarget as HTMLElement).style.backgroundColor = "var(--cd-danger-subtle)")
+              }
+              onMouseLeave={(e) =>
+                ((e.currentTarget as HTMLElement).style.backgroundColor = "transparent")
+              }
             >
               Clear all
             </button>
@@ -231,7 +350,12 @@ function MemberFilter({ selected, onChange }: { selected: string[]; onChange: (i
 }
 
 // ─── Smart search with suggestions ───────────────────────────────────────────
-function SmartSearch({ value, onChange, filteredCount, tasks }: {
+function SmartSearch({
+  value,
+  onChange,
+  filteredCount,
+  tasks,
+}: {
   value: string;
   onChange: (v: string) => void;
   filteredCount: number;
@@ -246,13 +370,17 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
   // Suggestions logic
   const suggestions = (() => {
     const q = value.toLowerCase().trim();
-    const items: { id: string; label: string; type: "title" | "tech" | "member" | "status" | "recent" }[] = [];
+    const items: {
+      id: string;
+      label: string;
+      type: "title" | "tech" | "member" | "status" | "recent";
+    }[] = [];
 
     if (q === "") {
       // 0. Quick/Popular Suggestions when empty
       // Popular tech
       const popularTech = ["React", "TypeScript", "Tailwind", "Python", "Figma"];
-      popularTech.forEach(t => items.push({ id: `pop-${t}`, label: t, type: "tech" }));
+      popularTech.forEach((t) => items.push({ id: `pop-${t}`, label: t, type: "tech" }));
 
       // Common statuses
       items.push({ id: "status-todo", label: "Todo", type: "status" });
@@ -262,7 +390,7 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
     }
 
     // 1. Task Titles
-    tasks.forEach(t => {
+    tasks.forEach((t) => {
       if (t.title.toLowerCase().includes(q)) {
         items.push({ id: `t-${t.id}`, label: t.title, type: "title" });
       }
@@ -270,8 +398,8 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
 
     // 2. Tech Tags (Unique)
     const techSet = new Set<string>();
-    tasks.forEach(t => {
-      t.technologies?.forEach(tech => {
+    tasks.forEach((t) => {
+      t.technologies?.forEach((tech) => {
         if (tech.label.toLowerCase().includes(q) && !techSet.has(tech.id)) {
           techSet.add(tech.id);
           items.push({ id: `tech-${tech.id}`, label: tech.label, type: "tech" });
@@ -281,8 +409,8 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
 
     // 3. Members (Unique)
     const memSet = new Set<string>();
-    tasks.forEach(t => {
-      t.assignedTo.forEach(m => {
+    tasks.forEach((t) => {
+      t.assignedTo.forEach((m) => {
         if (m.name.toLowerCase().includes(q) && !memSet.has(m.id)) {
           memSet.add(m.id);
           items.push({ id: `m-${m.id}`, label: m.name, type: "member" });
@@ -301,11 +429,20 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
         className="flex h-9 w-full min-w-[220px] items-center gap-2 rounded-lg border pl-3 pr-2 transition-all sm:min-w-[280px]"
         style={{
           backgroundColor: focused || open ? "var(--cd-surface)" : "var(--cd-surface-2)",
-          borderColor: focused || open ? "var(--cd-primary)" : value ? "var(--cd-primary)" : "var(--cd-border)",
+          borderColor:
+            focused || open
+              ? "var(--cd-primary)"
+              : value
+                ? "var(--cd-primary)"
+                : "var(--cd-border)",
           boxShadow: focused || open ? "0 0 0 3px var(--cd-primary-subtle)" : "none",
         }}
       >
-        <Search size={13} className="shrink-0 transition-colors" style={{ color: focused || open || value ? "var(--cd-primary)" : "var(--cd-text-muted)" }} />
+        <Search
+          size={13}
+          className="shrink-0 transition-colors"
+          style={{ color: focused || open || value ? "var(--cd-primary)" : "var(--cd-text-muted)" }}
+        />
 
         <input
           value={value}
@@ -336,7 +473,14 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
         )}
 
         {value && (
-          <button onClick={() => { onChange(""); setOpen(false); }} className="shrink-0 transition-colors hover:text-[var(--cd-text)]" style={{ color: "var(--cd-text-muted)" }}>
+          <button
+            onClick={() => {
+              onChange("");
+              setOpen(false);
+            }}
+            className="shrink-0 transition-colors hover:text-[var(--cd-text)]"
+            style={{ color: "var(--cd-text-muted)" }}
+          >
             <X size={12} />
           </button>
         )}
@@ -348,7 +492,10 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
           style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
         >
           <div className="flex items-center justify-between px-2.5 py-1.5 mb-1">
-            <p className="text-[9px] font-black uppercase tracking-widest" style={{ color: "var(--cd-text-muted)" }}>
+            <p
+              className="text-[9px] font-black uppercase tracking-widest"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
               {value ? "Search Results" : "Quick Discovery"}
             </p>
             {!value && <Star size={10} className="text-[var(--cd-warning)]" />}
@@ -360,14 +507,27 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
             {suggestions.map((s) => (
               <button
                 key={s.id}
-                onClick={() => { onChange(s.label); setOpen(false); }}
+                onClick={() => {
+                  onChange(s.label);
+                  setOpen(false);
+                }}
                 className="w-full flex items-center justify-between gap-3 rounded-lg p-1.5 text-left transition-colors hover:bg-[var(--cd-hover)] group"
               >
                 <div className="flex items-center gap-2.5 flex-1 min-w-0">
-                  <div className="w-1.5 h-1.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity" style={{ backgroundColor: "var(--cd-primary)" }} />
-                  <span className="text-[11px] font-semibold truncate" style={{ color: "var(--cd-text)" }}>{s.label}</span>
+                  <div
+                    className="w-1.5 h-1.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity"
+                    style={{ backgroundColor: "var(--cd-primary)" }}
+                  />
+                  <span
+                    className="text-[11px] font-semibold truncate"
+                    style={{ color: "var(--cd-text)" }}
+                  >
+                    {s.label}
+                  </span>
                 </div>
-                <span className="px-1.5 py-0.5 rounded-md text-[8px] font-black uppercase tracking-tighter bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)] group-hover:bg-[var(--cd-primary-subtle)] group-hover:text-[var(--cd-primary-text)] transition-colors">{s.type}</span>
+                <span className="px-1.5 py-0.5 rounded-md text-[8px] font-black uppercase tracking-tighter bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)] group-hover:bg-[var(--cd-primary-subtle)] group-hover:text-[var(--cd-primary-text)] transition-colors">
+                  {s.type}
+                </span>
               </button>
             ))}
           </div>
@@ -382,10 +542,18 @@ interface TaskFiltersBarProps extends Props {
   tasks: Task[];
 }
 
-export default function TaskFiltersBar({ filters, onChange, totalCount, filteredCount, tasks }: TaskFiltersBarProps) {
+export default function TaskFiltersBar({
+  filters,
+  onChange,
+  totalCount,
+  filteredCount,
+  tasks,
+}: TaskFiltersBarProps) {
   const [localSearch, setLocalSearch] = useState(filters.search);
   const onChangeRef = useRef(onChange);
-  useEffect(() => { onChangeRef.current = onChange; });
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
 
   useEffect(() => {
     if (localSearch === filters.search) return;
@@ -396,8 +564,11 @@ export default function TaskFiltersBar({ filters, onChange, totalCount, filtered
   }, [localSearch, filters]);
 
   const hasActive =
-    filters.status !== "all" || filters.priority !== "all" ||
-    filters.time !== "all" || filters.members.length > 0 || filters.search !== "";
+    filters.status !== "all" ||
+    filters.priority !== "all" ||
+    filters.time !== "all" ||
+    filters.members.length > 0 ||
+    filters.search !== "";
   const resetAll = () => {
     setLocalSearch("");
     onChange({ status: "all", priority: "all", time: "all", members: [], search: "" });
@@ -413,7 +584,11 @@ export default function TaskFiltersBar({ filters, onChange, totalCount, filtered
     >
       <div className="mx-auto flex w-full max-w-[1440px] flex-wrap items-center gap-3 px-5 py-4 sm:px-8 lg:px-10">
         {/* Simple Icon */}
-        <SlidersHorizontal size={14} style={{ color: "var(--cd-text-muted)" }} className="shrink-0 mr-1" />
+        <SlidersHorizontal
+          size={14}
+          style={{ color: "var(--cd-text-muted)" }}
+          className="shrink-0 mr-1"
+        />
 
         <div className="flex items-center gap-2 flex-wrap">
           <PillDropdown<TaskStatus | "all">
@@ -458,7 +633,10 @@ export default function TaskFiltersBar({ filters, onChange, totalCount, filtered
             ]}
           />
 
-          <MemberFilter selected={filters.members} onChange={(ids) => onChange({ ...filters, members: ids })} />
+          <MemberFilter
+            selected={filters.members}
+            onChange={(ids) => onChange({ ...filters, members: ids })}
+          />
         </div>
 
         <div className="min-w-[220px] flex-1">
@@ -488,7 +666,8 @@ export default function TaskFiltersBar({ filters, onChange, totalCount, filtered
           {hasActive ? (
             <span className="flex items-center gap-1">
               <span className="w-1 h-1 rounded-full bg-[var(--cd-primary)]" />
-              Showing <span className="text-[var(--cd-text)] font-bold">{filteredCount}</span> filtered results from {totalCount} total tasks
+              Showing <span className="text-[var(--cd-text)] font-bold">{filteredCount}</span>{" "}
+              filtered results from {totalCount} total tasks
             </span>
           ) : (
             `Total tasks: ${totalCount}`
diff --git a/src/features/Tasks/v1/components/task/TaskForm.tsx b/src/features/Tasks/v1/components/task/TaskForm.tsx
index 4627b08..18165c7 100644
--- a/src/features/Tasks/v1/components/task/TaskForm.tsx
+++ b/src/features/Tasks/v1/components/task/TaskForm.tsx
@@ -1,8 +1,18 @@
 import { useRef, useState, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import {
-  ChevronDown, Calendar, Star, Loader2,
-  AlertCircle, Github, FileUp, Layers, Users, Link, X, Check
+  ChevronDown,
+  Calendar,
+  Star,
+  Loader2,
+  AlertCircle,
+  Github,
+  FileUp,
+  Layers,
+  Users,
+  Link,
+  X,
+  Check,
 } from "lucide-react";
 import Avatar from "../common/Avatar";
 import TechBadge from "../common/TechBadge";
@@ -10,13 +20,27 @@ import { useEvents } from "../../hooks/useEvents";
 import { useCreateTask, useUpdateTask } from "../../hooks/useTasks";
 import { mockMembers } from "../../mock/taskMockData";
 import { TECH_OPTIONS } from "../../constants/tech.constants";
-import type { Task, TaskPriority, SubmissionType, TechTag, CreateTaskPayload, EventOption } from "../../Task.types";
-
-interface Props { mode: "create" | "edit"; task?: Task; }
+import type {
+  Task,
+  TaskPriority,
+  SubmissionType,
+  TechTag,
+  CreateTaskPayload,
+  EventOption,
+} from "../../Task.types";
+
+interface Props {
+  mode: "create" | "edit";
+  task?: Task;
+}
 
 interface Errors {
-  eventId?: string; title?: string; description?: string;
-  assignedTo?: string; deadline?: string; points?: string;
+  eventId?: string;
+  title?: string;
+  description?: string;
+  assignedTo?: string;
+  deadline?: string;
+  points?: string;
 }
 
 function validate(form: Partial<CreateTaskPayload>): Errors {
@@ -31,31 +55,75 @@ function validate(form: Partial<CreateTaskPayload>): Errors {
   return e;
 }
 
-function Field({ label, required, error, children, hint }: {
-  label: string; required?: boolean; error?: string; children: React.ReactNode; hint?: string;
+function Field({
+  label,
+  required,
+  error,
+  children,
+  hint,
+}: {
+  label: string;
+  required?: boolean;
+  error?: string;
+  children: React.ReactNode;
+  hint?: string;
 }) {
   return (
     <div className="flex flex-col gap-2 group/field">
       <div className="flex items-center justify-between">
-        <label className="text-[10px] font-black uppercase tracking-widest transition-colors group-focus-within/field:text-[var(--cd-primary)]" style={{ color: "var(--cd-text-muted)" }}>
+        <label
+          className="text-[10px] font-black uppercase tracking-widest transition-colors group-focus-within/field:text-[var(--cd-primary)]"
+          style={{ color: "var(--cd-text-muted)" }}
+        >
           {label} {required && <span className="text-[var(--cd-danger)] ml-0.5">*</span>}
         </label>
       </div>
       <div className="relative">{children}</div>
-      {hint && !error && <p className="text-[11px] font-medium opacity-60 px-1" style={{ color: "var(--cd-text-muted)" }}>{hint}</p>}
-      {error && <p className="flex items-center gap-1.5 text-[11px] font-bold px-1 mt-0.5" style={{ color: "var(--cd-danger)" }}><AlertCircle size={12} />{error}</p>}
+      {hint && !error && (
+        <p
+          className="text-[11px] font-medium opacity-60 px-1"
+          style={{ color: "var(--cd-text-muted)" }}
+        >
+          {hint}
+        </p>
+      )}
+      {error && (
+        <p
+          className="flex items-center gap-1.5 text-[11px] font-bold px-1 mt-0.5"
+          style={{ color: "var(--cd-danger)" }}
+        >
+          <AlertCircle size={12} />
+          {error}
+        </p>
+      )}
     </div>
   );
 }
 
-function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
+function Section({
+  title,
+  icon: Icon,
+  children,
+}: {
+  title: string;
+  icon: React.ElementType;
+  children: React.ReactNode;
+}) {
   return (
-    <div className="flex flex-col gap-5 rounded-xl border bg-[var(--cd-surface)] p-5 transition-colors sm:p-6" style={{ borderColor: "var(--cd-border-subtle)" }}>
-      <div className="flex items-center gap-3 border-b pb-4" style={{ borderColor: "var(--cd-border-subtle)" }}>
+    <div
+      className="flex flex-col gap-5 rounded-xl border bg-[var(--cd-surface)] p-5 transition-colors sm:p-6"
+      style={{ borderColor: "var(--cd-border-subtle)" }}
+    >
+      <div
+        className="flex items-center gap-3 border-b pb-4"
+        style={{ borderColor: "var(--cd-border-subtle)" }}
+      >
         <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--cd-primary-subtle)] text-[var(--cd-primary)]">
           <Icon size={17} />
         </div>
-        <h2 className="text-sm font-semibold tracking-tight" style={{ color: "var(--cd-text)" }}>{title}</h2>
+        <h2 className="text-sm font-semibold tracking-tight" style={{ color: "var(--cd-text)" }}>
+          {title}
+        </h2>
       </div>
       <div className="grid grid-cols-1 gap-5">{children}</div>
     </div>
@@ -68,7 +136,13 @@ function inputCls(error?: string) {
 }
 
 // ─── Tech tag picker ──────────────────────────────────────────────────────────
-function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (tags: TechTag[]) => void }) {
+function TechPicker({
+  selected,
+  onChange,
+}: {
+  selected: TechTag[];
+  onChange: (tags: TechTag[]) => void;
+}) {
   const [search, setSearch] = useState("");
   const selectedIds = new Set(selected.map((t) => t.id));
 
@@ -80,11 +154,12 @@ function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (ta
     }
   };
 
-  const filtered = search.trim() === ""
-    ? []
-    : TECH_OPTIONS.filter((t) =>
-      t.label.toLowerCase().includes(search.toLowerCase()) && !selectedIds.has(t.id)
-    );
+  const filtered =
+    search.trim() === ""
+      ? []
+      : TECH_OPTIONS.filter(
+          (t) => t.label.toLowerCase().includes(search.toLowerCase()) && !selectedIds.has(t.id),
+        );
 
   return (
     <div className="flex flex-col gap-3">
@@ -125,7 +200,11 @@ function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (ta
         {search.trim() !== "" && filtered.length === 0 && (
           <div
             className="absolute z-10 top-full left-0 right-0 mt-1.5 p-3 rounded-xl border shadow-lg text-xs"
-            style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+            style={{
+              backgroundColor: "var(--cd-surface)",
+              borderColor: "var(--cd-border)",
+              color: "var(--cd-text-muted)",
+            }}
           >
             No matching technologies found for "{search}"
           </div>
@@ -157,15 +236,26 @@ function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (ta
   );
 }
 
-function EventPicker({ value, onChange, events, error }: { value: string; onChange: (id: string) => void; events: EventOption[]; error?: string }) {
+function EventPicker({
+  value,
+  onChange,
+  events,
+  error,
+}: {
+  value: string;
+  onChange: (id: string) => void;
+  events: EventOption[];
+  error?: string;
+}) {
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
-  const selectedEvent = events.find(e => e.id === value);
+  const selectedEvent = events.find((e) => e.id === value);
 
-  const filtered = events.filter(e =>
-    e.name.toLowerCase().includes(search.toLowerCase()) ||
-    e.status.toLowerCase().includes(search.toLowerCase())
+  const filtered = events.filter(
+    (e) =>
+      e.name.toLowerCase().includes(search.toLowerCase()) ||
+      e.status.toLowerCase().includes(search.toLowerCase()),
   );
 
   useEffect(() => {
@@ -185,14 +275,21 @@ function EventPicker({ value, onChange, events, error }: { value: string; onChan
         <div className="flex-1 min-w-0">
           {selectedEvent ? (
             <div className="flex items-center gap-2">
-              <span className="text-sm font-bold truncate" style={{ color: "var(--cd-text)" }}>{selectedEvent.name}</span>
-              <span className="px-1.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-tighter bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]">{selectedEvent.status}</span>
+              <span className="text-sm font-bold truncate" style={{ color: "var(--cd-text)" }}>
+                {selectedEvent.name}
+              </span>
+              <span className="px-1.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-tighter bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]">
+                {selectedEvent.status}
+              </span>
             </div>
           ) : (
             <span className="text-sm text-[var(--cd-text-muted)]">Select an event…</span>
           )}
         </div>
-        <ChevronDown size={16} className={`text-[var(--cd-text-muted)] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
+        <ChevronDown
+          size={16}
+          className={`text-[var(--cd-text-muted)] transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+        />
       </div>
 
       {open && (
@@ -215,18 +312,43 @@ function EventPicker({ value, onChange, events, error }: { value: string; onChan
               <button
                 key={evt.id}
                 type="button"
-                onClick={() => { onChange(evt.id); setOpen(false); setSearch(""); }}
+                onClick={() => {
+                  onChange(evt.id);
+                  setOpen(false);
+                  setSearch("");
+                }}
                 className={`w-full flex flex-col gap-0.5 p-2.5 rounded-lg text-left transition-colors ${evt.id === value ? "bg-[var(--cd-primary-subtle)]" : "hover:bg-[var(--cd-hover)]"}`}
               >
                 <div className="flex items-center justify-between gap-2">
-                  <span className="text-sm font-bold truncate" style={{ color: evt.id === value ? "var(--cd-primary-text)" : "var(--cd-text)" }}>{evt.name}</span>
-                  <span className={`px-1.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-tighter ${evt.id === value ? "bg-[var(--cd-primary)] text-white" : "bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]"}`}>{evt.status}</span>
+                  <span
+                    className="text-sm font-bold truncate"
+                    style={{
+                      color: evt.id === value ? "var(--cd-primary-text)" : "var(--cd-text)",
+                    }}
+                  >
+                    {evt.name}
+                  </span>
+                  <span
+                    className={`px-1.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-tighter ${evt.id === value ? "bg-[var(--cd-primary)] text-white" : "bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]"}`}
+                  >
+                    {evt.status}
+                  </span>
                 </div>
-                <p className="text-[10px] truncate" style={{ color: evt.id === value ? "var(--cd-primary-text)" : "var(--cd-text-muted)", opacity: 0.8 }}>{evt.subtitle}</p>
+                <p
+                  className="text-[10px] truncate"
+                  style={{
+                    color: evt.id === value ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                    opacity: 0.8,
+                  }}
+                >
+                  {evt.subtitle}
+                </p>
               </button>
             ))}
             {filtered.length === 0 && (
-              <p className="text-xs text-center py-4" style={{ color: "var(--cd-text-muted)" }}>No events found for "{search}"</p>
+              <p className="text-xs text-center py-4" style={{ color: "var(--cd-text-muted)" }}>
+                No events found for "{search}"
+              </p>
             )}
           </div>
         </div>
@@ -235,7 +357,13 @@ function EventPicker({ value, onChange, events, error }: { value: string; onChan
   );
 }
 
-function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (ids: string[]) => void }) {
+function MemberPicker({
+  selected,
+  onChange,
+}: {
+  selected: string[];
+  onChange: (ids: string[]) => void;
+}) {
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -248,9 +376,10 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
     }
   };
 
-  const filtered = mockMembers.filter(m =>
-  (m.name.toLowerCase().includes(search.toLowerCase()) ||
-    m.role.toLowerCase().includes(search.toLowerCase()))
+  const filtered = mockMembers.filter(
+    (m) =>
+      m.name.toLowerCase().includes(search.toLowerCase()) ||
+      m.role.toLowerCase().includes(search.toLowerCase()),
   );
 
   useEffect(() => {
@@ -272,10 +401,18 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
           {selected.length > 0 ? (
             <div className="flex -space-x-2 overflow-hidden shrink-0">
               {selected.slice(0, 3).map((id) => {
-                const m = mockMembers.find(x => x.id === id);
+                const m = mockMembers.find((x) => x.id === id);
                 return (
-                  <div key={id} className="inline-block h-6 w-6 rounded-full ring-2 ring-[var(--cd-surface)]">
-                    <Avatar name={m?.name || ""} src={m?.avatar ?? ""} size="xs" showTooltip={false} />
+                  <div
+                    key={id}
+                    className="inline-block h-6 w-6 rounded-full ring-2 ring-[var(--cd-surface)]"
+                  >
+                    <Avatar
+                      name={m?.name || ""}
+                      src={m?.avatar ?? ""}
+                      size="xs"
+                      showTooltip={false}
+                    />
                   </div>
                 );
               })}
@@ -283,13 +420,19 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
           ) : (
             <Users size={16} className="text-[var(--cd-text-muted)]" />
           )}
-          <span className="text-sm font-bold truncate" style={{ color: selected.length > 0 ? "var(--cd-text)" : "var(--cd-text-muted)" }}>
+          <span
+            className="text-sm font-bold truncate"
+            style={{ color: selected.length > 0 ? "var(--cd-text)" : "var(--cd-text-muted)" }}
+          >
             {selected.length > 0
               ? `${selected.length} member${selected.length !== 1 ? "s" : ""} assigned`
               : "Select members..."}
           </span>
         </div>
-        <ChevronDown size={16} className={`text-[var(--cd-text-muted)] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
+        <ChevronDown
+          size={16}
+          className={`text-[var(--cd-text-muted)] transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+        />
       </div>
 
       {/* Dropdown */}
@@ -321,8 +464,21 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
                 >
                   <Avatar name={m.name} src={m.avatar} size="sm" showTooltip={false} />
                   <div className="flex-1 text-left min-w-0">
-                    <p className="text-xs font-bold truncate" style={{ color: isSel ? "var(--cd-primary-text)" : "var(--cd-text)" }}>{m.name}</p>
-                    <p className="text-[10px] truncate" style={{ color: isSel ? "var(--cd-primary-text)" : "var(--cd-text-muted)", opacity: 0.8 }}>{m.role}</p>
+                    <p
+                      className="text-xs font-bold truncate"
+                      style={{ color: isSel ? "var(--cd-primary-text)" : "var(--cd-text)" }}
+                    >
+                      {m.name}
+                    </p>
+                    <p
+                      className="text-[10px] truncate"
+                      style={{
+                        color: isSel ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                        opacity: 0.8,
+                      }}
+                    >
+                      {m.role}
+                    </p>
                   </div>
                   {isSel ? (
                     <div className="w-5 h-5 rounded-full flex items-center justify-center bg-[var(--cd-primary)] text-white shadow-sm">
@@ -337,7 +493,9 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
               );
             })}
             {filtered.length === 0 && (
-              <p className="text-xs text-center py-4" style={{ color: "var(--cd-text-muted)" }}>No members found</p>
+              <p className="text-xs text-center py-4" style={{ color: "var(--cd-text-muted)" }}>
+                No members found
+              </p>
             )}
           </div>
         </div>
@@ -361,7 +519,9 @@ export default function TaskForm({ mode, task }: Props) {
   const [assignedTo, setAssignedTo] = useState<string[]>(task?.assignedTo.map((m) => m.id) ?? []);
   const [deadline, setDeadline] = useState(task?.deadline.slice(0, 16) ?? "");
   const [priority, setPriority] = useState<TaskPriority>(task?.priority ?? "medium");
-  const [submissionType, setSubmissionType] = useState<SubmissionType>(task?.submissionType ?? "github");
+  const [submissionType, setSubmissionType] = useState<SubmissionType>(
+    task?.submissionType ?? "github",
+  );
   const [isMandatory, setIsMandatory] = useState(task?.isMandatory ?? false);
   const [points, setPoints] = useState<number | "">(task?.points ?? "");
   const [allowLate, setAllowLate] = useState(task?.allowLateSubmission ?? false);
@@ -373,7 +533,16 @@ export default function TaskForm({ mode, task }: Props) {
   useEffect(() => {
     if (!touched) return;
     const timer = setTimeout(() => {
-      setErrors(validate({ eventId, title, description, assignedTo, deadline, points: points === "" ? undefined : Number(points) }));
+      setErrors(
+        validate({
+          eventId,
+          title,
+          description,
+          assignedTo,
+          deadline,
+          points: points === "" ? undefined : Number(points),
+        }),
+      );
     }, 0);
     return () => clearTimeout(timer);
   }, [touched, eventId, title, description, assignedTo, deadline, points]);
@@ -381,9 +550,17 @@ export default function TaskForm({ mode, task }: Props) {
   const handleSubmit = async () => {
     setTouched(true);
     const payload: CreateTaskPayload = {
-      eventId, title, description, assignedTo, deadline, priority, submissionType,
-      isMandatory, points: points === "" ? undefined : Number(points),
-      allowLateSubmission: allowLate, maxSubmissions: maxSubs === "" ? undefined : Number(maxSubs),
+      eventId,
+      title,
+      description,
+      assignedTo,
+      deadline,
+      priority,
+      submissionType,
+      isMandatory,
+      points: points === "" ? undefined : Number(points),
+      allowLateSubmission: allowLate,
+      maxSubmissions: maxSubs === "" ? undefined : Number(maxSubs),
       technologies,
     };
     const errs = validate(payload);
@@ -431,22 +608,50 @@ export default function TaskForm({ mode, task }: Props) {
       <div className="mx-auto flex max-w-3xl flex-col gap-6 p-5 sm:p-6">
         {/* Section 1: General Info */}
         <Section title="General Information" icon={Layers}>
-          <Field label="Event Context" required error={errors.eventId} hint="Select the event this task belongs to.">
-            <EventPicker value={eventId} onChange={setEventId} events={events} error={errors.eventId} />
+          <Field
+            label="Event Context"
+            required
+            error={errors.eventId}
+            hint="Select the event this task belongs to."
+          >
+            <EventPicker
+              value={eventId}
+              onChange={setEventId}
+              events={events}
+              error={errors.eventId}
+            />
           </Field>
 
           <Field label="Task Title" required error={errors.title}>
-            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)}
-              placeholder="e.g. Build landing page for AI showcase" className={inputCls(errors.title)} />
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g. Build landing page for AI showcase"
+              className={inputCls(errors.title)}
+            />
           </Field>
 
-          <Field label="Description" required error={errors.description} hint="Explain deliverables and acceptance criteria clearly.">
-            <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={5}
-              placeholder="Describe the task in detail…" className={`${inputCls(errors.description)} resize-none`} />
+          <Field
+            label="Description"
+            required
+            error={errors.description}
+            hint="Explain deliverables and acceptance criteria clearly."
+          >
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={5}
+              placeholder="Describe the task in detail…"
+              className={`${inputCls(errors.description)} resize-none`}
+            />
           </Field>
 
           <Field label="Core Technologies" hint="Add all tech stacks required for this task.">
-            <div className="rounded-lg border bg-[var(--cd-surface-2)] p-4" style={{ borderColor: "var(--cd-border-subtle)" }}>
+            <div
+              className="rounded-lg border bg-[var(--cd-surface-2)] p-4"
+              style={{ borderColor: "var(--cd-border-subtle)" }}
+            >
               <TechPicker selected={technologies} onChange={setTechnologies} />
             </div>
           </Field>
@@ -454,7 +659,12 @@ export default function TaskForm({ mode, task }: Props) {
 
         {/* Section 2: Assignment & Logistics */}
         <Section title="Assignment & Logistics" icon={Users}>
-          <Field label="Assigned Members" required error={errors.assignedTo} hint="Who should complete this task?">
+          <Field
+            label="Assigned Members"
+            required
+            error={errors.assignedTo}
+            hint="Who should complete this task?"
+          >
             <MemberPicker selected={assignedTo} onChange={setAssignedTo} />
           </Field>
 
@@ -479,10 +689,17 @@ export default function TaskForm({ mode, task }: Props) {
             </Field>
 
             <Field label="Task Priority">
-              <div className="flex rounded-lg border bg-[var(--cd-surface-2)] p-1" style={{ borderColor: "var(--cd-border-subtle)" }}>
+              <div
+                className="flex rounded-lg border bg-[var(--cd-surface-2)] p-1"
+                style={{ borderColor: "var(--cd-border-subtle)" }}
+              >
                 {PRIORITY_OPTIONS.map((opt) => (
-                  <button key={opt.value} type="button" onClick={() => setPriority(opt.value)}
-                    className={`flex-1 flex items-center justify-center gap-2 rounded-md py-2.5 text-xs font-medium transition-colors ${priority === opt.value ? "bg-[var(--cd-surface)] shadow-sm text-[var(--cd-text)]" : "text-[var(--cd-text-muted)] hover:text-[var(--cd-text)]"}`}>
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => setPriority(opt.value)}
+                    className={`flex-1 flex items-center justify-center gap-2 rounded-md py-2.5 text-xs font-medium transition-colors ${priority === opt.value ? "bg-[var(--cd-surface)] shadow-sm text-[var(--cd-text)]" : "text-[var(--cd-text-muted)] hover:text-[var(--cd-text)]"}`}
+                  >
                     <div className={`w-1.5 h-1.5 rounded-full ${opt.dot}`} />
                     {opt.label}
                   </button>
@@ -498,8 +715,12 @@ export default function TaskForm({ mode, task }: Props) {
             <Field label="Submission Type" hint="Format for user submission.">
               <div className="grid grid-cols-2 gap-2">
                 {SUB_OPTIONS.map((opt) => (
-                  <button key={opt.value} type="button" onClick={() => setSubmissionType(opt.value)}
-                    className={`flex items-center gap-2 rounded-lg border px-3 py-2.5 text-[11px] font-medium transition-colors ${submissionType === opt.value ? "bg-[var(--cd-primary-subtle)] border-[var(--cd-primary)] text-[var(--cd-primary-text)]" : "bg-[var(--cd-surface)] border-[var(--cd-border)] text-[var(--cd-text-muted)] hover:border-[var(--cd-text-muted)]"}`}>
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => setSubmissionType(opt.value)}
+                    className={`flex items-center gap-2 rounded-lg border px-3 py-2.5 text-[11px] font-medium transition-colors ${submissionType === opt.value ? "bg-[var(--cd-primary-subtle)] border-[var(--cd-primary)] text-[var(--cd-primary-text)]" : "bg-[var(--cd-surface)] border-[var(--cd-border)] text-[var(--cd-text-muted)] hover:border-[var(--cd-text-muted)]"}`}
+                  >
                     {opt.icon}
                     {opt.label}
                   </button>
@@ -507,62 +728,126 @@ export default function TaskForm({ mode, task }: Props) {
               </div>
             </Field>
 
-            <Field label="Reward Points" error={errors.points} hint="Points awarded upon completion.">
+            <Field
+              label="Reward Points"
+              error={errors.points}
+              hint="Points awarded upon completion."
+            >
               <div className="relative">
-                <input type="number" value={points} onChange={(e) => setPoints(e.target.value === "" ? "" : Number(e.target.value))}
-                  placeholder="e.g. 100" className={inputCls(errors.points)} />
-                <Star size={16} className="absolute right-4 top-1/2 -translate-y-1/2 text-[var(--cd-warning)] opacity-50" />
+                <input
+                  type="number"
+                  value={points}
+                  onChange={(e) => setPoints(e.target.value === "" ? "" : Number(e.target.value))}
+                  placeholder="e.g. 100"
+                  className={inputCls(errors.points)}
+                />
+                <Star
+                  size={16}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[var(--cd-warning)] opacity-50"
+                />
               </div>
             </Field>
           </div>
 
           <div className="grid grid-cols-1 gap-5 pt-3 sm:grid-cols-2">
-            <div className="flex items-center justify-between rounded-lg border bg-[var(--cd-surface-2)] p-4" style={{ borderColor: "var(--cd-border-subtle)" }}>
+            <div
+              className="flex items-center justify-between rounded-lg border bg-[var(--cd-surface-2)] p-4"
+              style={{ borderColor: "var(--cd-border-subtle)" }}
+            >
               <div>
-                <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>Mandatory Task</p>
-                <p className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>Required to finish event.</p>
+                <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>
+                  Mandatory Task
+                </p>
+                <p className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>
+                  Required to finish event.
+                </p>
               </div>
-              <button type="button" onClick={() => setIsMandatory(!isMandatory)}
-                className={`w-10 h-6 rounded-full relative transition-colors ${isMandatory ? "bg-[var(--cd-primary)]" : "bg-[var(--cd-surface-3)]"}`}>
-                <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${isMandatory ? "translate-x-5" : "translate-x-1"}`} />
+              <button
+                type="button"
+                onClick={() => setIsMandatory(!isMandatory)}
+                className={`w-10 h-6 rounded-full relative transition-colors ${isMandatory ? "bg-[var(--cd-primary)]" : "bg-[var(--cd-surface-3)]"}`}
+              >
+                <div
+                  className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${isMandatory ? "translate-x-5" : "translate-x-1"}`}
+                />
               </button>
             </div>
 
-            <div className="flex items-center justify-between rounded-lg border bg-[var(--cd-surface-2)] p-4" style={{ borderColor: "var(--cd-border-subtle)" }}>
+            <div
+              className="flex items-center justify-between rounded-lg border bg-[var(--cd-surface-2)] p-4"
+              style={{ borderColor: "var(--cd-border-subtle)" }}
+            >
               <div>
-                <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>Late Submissions</p>
-                <p className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>Accept after deadline.</p>
+                <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>
+                  Late Submissions
+                </p>
+                <p className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>
+                  Accept after deadline.
+                </p>
               </div>
-              <button type="button" onClick={() => setAllowLate(!allowLate)}
-                className={`w-10 h-6 rounded-full relative transition-colors ${allowLate ? "bg-[var(--cd-primary)]" : "bg-[var(--cd-surface-3)]"}`}>
-                <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${allowLate ? "translate-x-5" : "translate-x-1"}`} />
+              <button
+                type="button"
+                onClick={() => setAllowLate(!allowLate)}
+                className={`w-10 h-6 rounded-full relative transition-colors ${allowLate ? "bg-[var(--cd-primary)]" : "bg-[var(--cd-surface-3)]"}`}
+              >
+                <div
+                  className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${allowLate ? "translate-x-5" : "translate-x-1"}`}
+                />
               </button>
             </div>
           </div>
 
           <Field label="Max Submissions" hint="Leave empty for unlimited.">
-            <input type="number" value={maxSubs} onChange={(e) => setMaxSubs(e.target.value === "" ? "" : Number(e.target.value))}
-              placeholder="Unlimited" className={inputCls()} />
+            <input
+              type="number"
+              value={maxSubs}
+              onChange={(e) => setMaxSubs(e.target.value === "" ? "" : Number(e.target.value))}
+              placeholder="Unlimited"
+              className={inputCls()}
+            />
           </Field>
         </Section>
       </div>
 
       {/* Floating Action Bar */}
       <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-40 bg-gradient-to-t from-[var(--cd-bg)] via-[var(--cd-bg)] to-transparent p-4 transition-all sm:p-6 lg:pl-85">
-        <div className="pointer-events-auto mx-auto flex max-w-3xl items-center justify-between rounded-xl border bg-[var(--cd-surface)]/95 p-3 shadow-2xl backdrop-blur-md" style={{ borderColor: "var(--cd-border-subtle)" }}>
+        <div
+          className="pointer-events-auto mx-auto flex max-w-3xl items-center justify-between rounded-xl border bg-[var(--cd-surface)]/95 p-3 shadow-2xl backdrop-blur-md"
+          style={{ borderColor: "var(--cd-border-subtle)" }}
+        >
           <div className="hidden sm:block">
-            <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>{mode === "create" ? "New Task" : "Edit Mode"}</p>
-            <p className="text-[10px] truncate max-w-[200px]" style={{ color: "var(--cd-text-muted)" }}>{title || "Untitled Task"}</p>
+            <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>
+              {mode === "create" ? "New Task" : "Edit Mode"}
+            </p>
+            <p
+              className="text-[10px] truncate max-w-[200px]"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              {title || "Untitled Task"}
+            </p>
           </div>
           <div className="flex items-center gap-3 w-full sm:w-auto">
-            <button type="button" onClick={() => navigate(-1)}
+            <button
+              type="button"
+              onClick={() => navigate(-1)}
               className="h-10 flex-1 rounded-lg border bg-[var(--cd-surface)] px-5 text-sm font-medium text-[var(--cd-text-2)] transition-colors hover:bg-[var(--cd-hover)] sm:flex-none"
-              style={{ borderColor: "var(--cd-border)" }}>
+              style={{ borderColor: "var(--cd-border)" }}
+            >
               Cancel
             </button>
-            <button type="button" onClick={handleSubmit} disabled={isLoading}
-              className="flex h-10 flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--cd-primary)] px-7 text-sm font-semibold text-white transition-colors hover:brightness-110 disabled:opacity-50 sm:flex-none">
-              {isLoading ? <Loader2 size={16} className="animate-spin" /> : (mode === "create" ? "Create Task" : "Save Changes")}
+            <button
+              type="button"
+              onClick={handleSubmit}
+              disabled={isLoading}
+              className="flex h-10 flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--cd-primary)] px-7 text-sm font-semibold text-white transition-colors hover:brightness-110 disabled:opacity-50 sm:flex-none"
+            >
+              {isLoading ? (
+                <Loader2 size={16} className="animate-spin" />
+              ) : mode === "create" ? (
+                "Create Task"
+              ) : (
+                "Save Changes"
+              )}
             </button>
           </div>
         </div>
diff --git a/src/features/Tasks/v1/components/task/TaskHeader.tsx b/src/features/Tasks/v1/components/task/TaskHeader.tsx
index 3a01bed..552a067 100644
--- a/src/features/Tasks/v1/components/task/TaskHeader.tsx
+++ b/src/features/Tasks/v1/components/task/TaskHeader.tsx
@@ -47,17 +47,22 @@ export default function TaskHeader({ selectedEventId, tasks, activeTab, onTabCha
             className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
             style={{
               backgroundColor: "var(--cd-primary-subtle)",
-              color: "var(--cd-primary-text)"
+              color: "var(--cd-primary-text)",
             }}
           >
             <ListTodo size={18} strokeWidth={2.25} />
           </div>
           <div className="min-w-0">
-            <h1 className="truncate text-xl font-semibold leading-tight tracking-tight" style={{ color: "var(--cd-text)" }}>
+            <h1
+              className="truncate text-xl font-semibold leading-tight tracking-tight"
+              style={{ color: "var(--cd-text)" }}
+            >
               Task Management
             </h1>
             <p className="mt-1 truncate text-sm" style={{ color: "var(--cd-text-2)" }}>
-              {event ? `Managing tasks for ${event.name}` : "Centralized control for all event tasks"}
+              {event
+                ? `Managing tasks for ${event.name}`
+                : "Centralized control for all event tasks"}
             </p>
           </div>
         </div>
@@ -68,7 +73,7 @@ export default function TaskHeader({ selectedEventId, tasks, activeTab, onTabCha
             navigate(
               selectedEventId
                 ? `/org/tasks/create?eventId=${selectedEventId}`
-                : "/org/tasks/create"
+                : "/org/tasks/create",
             )
           }
           disabled={!selectedEventId}
@@ -98,7 +103,9 @@ export default function TaskHeader({ selectedEventId, tasks, activeTab, onTabCha
                   <span
                     className="min-w-5 rounded-md px-1.5 py-0.5 text-center text-[11px] font-medium transition-all duration-200"
                     style={{
-                      backgroundColor: isActive ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
+                      backgroundColor: isActive
+                        ? "var(--cd-primary-subtle)"
+                        : "var(--cd-surface-2)",
                       color: isActive ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
                     }}
                   >
@@ -115,9 +122,6 @@ export default function TaskHeader({ selectedEventId, tasks, activeTab, onTabCha
           })}
         </div>
       </div>
-
     </div>
-
-
   );
 }
diff --git a/src/features/Tasks/v1/components/task/TaskRow.tsx b/src/features/Tasks/v1/components/task/TaskRow.tsx
index a69a377..d7108b5 100644
--- a/src/features/Tasks/v1/components/task/TaskRow.tsx
+++ b/src/features/Tasks/v1/components/task/TaskRow.tsx
@@ -8,7 +8,10 @@ import TechBadge from "../common/TechBadge";
 import { SUBMISSION_STATUS_CONFIG } from "../../constants/task.constants";
 import type { Task } from "../../Task.types";
 
-interface Props { task: Task; onDelete: (task: Task) => void; }
+interface Props {
+  task: Task;
+  onDelete: (task: Task) => void;
+}
 
 const SUB_ICON: Record<string, React.ReactNode> = {
   file: <FileUp size={11} />,
@@ -17,8 +20,6 @@ const SUB_ICON: Record<string, React.ReactNode> = {
   all: <Layers size={11} />,
 };
 
-
-
 export default function TaskRow({ task, onDelete }: Props) {
   const navigate = useNavigate();
   const subStatusCfg = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
@@ -46,10 +47,16 @@ export default function TaskRow({ task, onDelete }: Props) {
             )}
           </div>
           <div className="min-w-0">
-            <span className="block w-full truncate text-sm font-semibold transition-colors group-hover:text-[var(--cd-primary)]" style={{ color: "var(--cd-text)" }}>
+            <span
+              className="block w-full truncate text-sm font-semibold transition-colors group-hover:text-[var(--cd-primary)]"
+              style={{ color: "var(--cd-text)" }}
+            >
               {task.title}
             </span>
-            <span className="mt-1 block w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-5" style={{ color: "var(--cd-text-muted)" }}>
+            <span
+              className="mt-1 block w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-5"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
               {task.description}
             </span>
           </div>
@@ -73,14 +80,12 @@ export default function TaskRow({ task, onDelete }: Props) {
 
       {/* Avatar group */}
       <td className="py-3.5 pr-5">
-        <AvatarGroup
-          members={task.assignedTo}
-          max={3}
-          size="sm"
-        />
+        <AvatarGroup members={task.assignedTo} max={3} size="sm" />
       </td>
 
-      <td className="py-3.5 pr-5"><PriorityBadge priority={task.priority} size="sm" /></td>
+      <td className="py-3.5 pr-5">
+        <PriorityBadge priority={task.priority} size="sm" />
+      </td>
 
       {/* Deadline */}
       <td className="py-3.5 pr-5">
@@ -88,7 +93,11 @@ export default function TaskRow({ task, onDelete }: Props) {
           <span
             className="text-xs font-medium"
             style={{
-              color: isOverdue ? "var(--cd-danger)" : isNear ? "var(--cd-warning)" : "var(--cd-text-2)",
+              color: isOverdue
+                ? "var(--cd-danger)"
+                : isNear
+                  ? "var(--cd-warning)"
+                  : "var(--cd-text-2)",
             }}
           >
             {isOverdue
@@ -96,7 +105,11 @@ export default function TaskRow({ task, onDelete }: Props) {
               : formatDistanceToNow(deadlineDt, { addSuffix: true })}
           </span>
           <span className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>
-            {deadlineDt.toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" })}
+            {deadlineDt.toLocaleDateString("en-IN", {
+              day: "2-digit",
+              month: "short",
+              year: "numeric",
+            })}
           </span>
         </div>
       </td>
@@ -104,8 +117,11 @@ export default function TaskRow({ task, onDelete }: Props) {
       {/* Submission */}
       <td className="py-3.5 pr-5">
         <div className="flex flex-col gap-1.5">
-          <span className={`inline-flex w-fit items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium ${subStatusCfg.bg} ${subStatusCfg.text}`}>
-            {SUB_ICON[task.submissionType]}{subStatusCfg.label}
+          <span
+            className={`inline-flex w-fit items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium ${subStatusCfg.bg} ${subStatusCfg.text}`}
+          >
+            {SUB_ICON[task.submissionType]}
+            {subStatusCfg.label}
           </span>
           {task.points !== undefined && (
             <span className="text-[10px] font-medium" style={{ color: "var(--cd-text-muted)" }}>
@@ -116,18 +132,43 @@ export default function TaskRow({ task, onDelete }: Props) {
       </td>
 
       {/* Actions */}
-      <td className="py-3.5 pr-5" onClick={e => e.stopPropagation()}>
+      <td className="py-3.5 pr-5" onClick={(e) => e.stopPropagation()}>
         <div className="flex items-center justify-end gap-1 opacity-100 transition-opacity duration-150 lg:opacity-0 lg:group-hover:opacity-100">
-          <Btn icon={<Eye size={13} />} label="View" onClick={() => navigate(`/org/tasks/${task.id}`)} color="indigo" />
-          <Btn icon={<Pencil size={13} />} label="Edit" onClick={() => navigate(`/org/tasks/${task.id}/edit`)} color="gray" />
-          <Btn icon={<Trash2 size={13} />} label="Delete" onClick={() => onDelete(task)} color="red" />
+          <Btn
+            icon={<Eye size={13} />}
+            label="View"
+            onClick={() => navigate(`/org/tasks/${task.id}`)}
+            color="indigo"
+          />
+          <Btn
+            icon={<Pencil size={13} />}
+            label="Edit"
+            onClick={() => navigate(`/org/tasks/${task.id}/edit`)}
+            color="gray"
+          />
+          <Btn
+            icon={<Trash2 size={13} />}
+            label="Delete"
+            onClick={() => onDelete(task)}
+            color="red"
+          />
         </div>
       </td>
     </tr>
   );
 }
 
-function Btn({ icon, label, onClick, color }: { icon: React.ReactNode; label: string; onClick: () => void; color: "indigo" | "gray" | "red" }) {
+function Btn({
+  icon,
+  label,
+  onClick,
+  color,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  color: "indigo" | "gray" | "red";
+}) {
   const styles = {
     indigo: "text-[var(--cd-primary-text)] hover:bg-[var(--cd-primary-subtle)]",
     gray: "text-[var(--cd-text-2)] hover:bg-[var(--cd-surface-2)]",
diff --git a/src/features/Tasks/v1/components/task/TaskTable.tsx b/src/features/Tasks/v1/components/task/TaskTable.tsx
index 0425158..ffde0ce 100644
--- a/src/features/Tasks/v1/components/task/TaskTable.tsx
+++ b/src/features/Tasks/v1/components/task/TaskTable.tsx
@@ -93,7 +93,10 @@ export default function TaskTable({
               <th
                 key={col.key}
                 className={`${col.width} px-5 py-3 text-[11px] font-semibold uppercase tracking-wider transition-colors`}
-                style={{ color: "var(--cd-text-muted)", borderBottom: "1px solid var(--cd-border-subtle)" }}
+                style={{
+                  color: "var(--cd-text-muted)",
+                  borderBottom: "1px solid var(--cd-border-subtle)",
+                }}
               >
                 {col.label}
               </th>
@@ -122,8 +125,7 @@ export default function TaskTable({
           <span style={{ color: "var(--cd-text)", fontWeight: 600 }}>
             {(page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, tasks.length)}
           </span>{" "}
-          of{" "}
-          <span style={{ color: "var(--cd-text)", fontWeight: 600 }}>{tasks.length}</span>
+          of <span style={{ color: "var(--cd-text)", fontWeight: 600 }}>{tasks.length}</span>
         </p>
 
         <div className="flex gap-2">
diff --git a/src/features/Tasks/v1/constants/task.constants.ts b/src/features/Tasks/v1/constants/task.constants.ts
index 9439c6b..7b3ce13 100644
--- a/src/features/Tasks/v1/constants/task.constants.ts
+++ b/src/features/Tasks/v1/constants/task.constants.ts
@@ -77,9 +77,21 @@ export const SUBMISSION_STATUS_CONFIG: Record<
   SubmissionStatus,
   { label: string; bg: string; text: string }
 > = {
-  "not-submitted": { label: "Not Submitted", bg: "bg-[var(--cd-surface-2)]",       text: "text-[var(--cd-text-2)]" },
-  submitted:       { label: "Submitted",     bg: "bg-[var(--cd-primary-subtle)]",  text: "text-[var(--cd-primary-text)]" },
-  reviewed:        { label: "Reviewed",      bg: "bg-[var(--cd-success-subtle)]",  text: "text-[var(--cd-success)]" },
+  "not-submitted": {
+    label: "Not Submitted",
+    bg: "bg-[var(--cd-surface-2)]",
+    text: "text-[var(--cd-text-2)]",
+  },
+  submitted: {
+    label: "Submitted",
+    bg: "bg-[var(--cd-primary-subtle)]",
+    text: "text-[var(--cd-primary-text)]",
+  },
+  reviewed: {
+    label: "Reviewed",
+    bg: "bg-[var(--cd-success-subtle)]",
+    text: "text-[var(--cd-success)]",
+  },
 };
 
 // ─── Event type ───────────────────────────────────────────────────────────────
@@ -87,10 +99,30 @@ export const EVENT_TYPE_CONFIG: Record<
   EventType,
   { label: string; bg: string; text: string; dot: string }
 > = {
-  hackathon: { label: "Hackathon", bg: "bg-[var(--cd-danger-subtle)]",  text: "text-[var(--cd-danger)]",       dot: "bg-rose-500"    },
-  workshop:  { label: "Workshop",  bg: "bg-[var(--cd-primary-subtle)]", text: "text-[var(--cd-secondary)]",    dot: "bg-violet-500"  },
-  internal:  { label: "Internal",  bg: "bg-[var(--cd-primary-subtle)]", text: "text-[var(--cd-primary-text)]", dot: "bg-sky-500"     },
-  community: { label: "Community", bg: "bg-[var(--cd-success-subtle)]", text: "text-[var(--cd-success)]",      dot: "bg-emerald-500" },
+  hackathon: {
+    label: "Hackathon",
+    bg: "bg-[var(--cd-danger-subtle)]",
+    text: "text-[var(--cd-danger)]",
+    dot: "bg-rose-500",
+  },
+  workshop: {
+    label: "Workshop",
+    bg: "bg-[var(--cd-primary-subtle)]",
+    text: "text-[var(--cd-secondary)]",
+    dot: "bg-violet-500",
+  },
+  internal: {
+    label: "Internal",
+    bg: "bg-[var(--cd-primary-subtle)]",
+    text: "text-[var(--cd-primary-text)]",
+    dot: "bg-sky-500",
+  },
+  community: {
+    label: "Community",
+    bg: "bg-[var(--cd-success-subtle)]",
+    text: "text-[var(--cd-success)]",
+    dot: "bg-emerald-500",
+  },
 };
 
 // ─── Event status ─────────────────────────────────────────────────────────────
@@ -98,9 +130,24 @@ export const EVENT_STATUS_CONFIG: Record<
   "Live" | "Upcoming" | "Completed",
   { bg: string; text: string; dot: string; pulse: boolean }
 > = {
-  Live:      { bg: "bg-[var(--cd-success-subtle)]", text: "text-[var(--cd-success)]", dot: "bg-emerald-500", pulse: true  },
-  Upcoming:  { bg: "bg-[var(--cd-warning-subtle)]", text: "text-[var(--cd-warning)]", dot: "bg-amber-400",   pulse: false },
-  Completed: { bg: "bg-[var(--cd-surface-2)]",      text: "text-[var(--cd-text-2)]",  dot: "bg-gray-400",    pulse: false },
+  Live: {
+    bg: "bg-[var(--cd-success-subtle)]",
+    text: "text-[var(--cd-success)]",
+    dot: "bg-emerald-500",
+    pulse: true,
+  },
+  Upcoming: {
+    bg: "bg-[var(--cd-warning-subtle)]",
+    text: "text-[var(--cd-warning)]",
+    dot: "bg-amber-400",
+    pulse: false,
+  },
+  Completed: {
+    bg: "bg-[var(--cd-surface-2)]",
+    text: "text-[var(--cd-text-2)]",
+    dot: "bg-gray-400",
+    pulse: false,
+  },
 };
 
 // ─── Review decision ──────────────────────────────────────────────────────────
@@ -108,37 +155,51 @@ export const REVIEW_DECISION_CONFIG: Record<
   ReviewDecision,
   { label: string; bg: string; text: string; border: string }
 > = {
-  approved: { label: "Approved", bg: "bg-[var(--cd-success-subtle)]", text: "text-[var(--cd-success)]", border: "border-[var(--cd-success)]" },
-  rejected: { label: "Rejected", bg: "bg-[var(--cd-danger-subtle)]",  text: "text-[var(--cd-danger)]",  border: "border-[var(--cd-danger)]"  },
-  pending:  { label: "Pending",  bg: "bg-[var(--cd-warning-subtle)]", text: "text-[var(--cd-warning)]", border: "border-[var(--cd-warning)]" },
+  approved: {
+    label: "Approved",
+    bg: "bg-[var(--cd-success-subtle)]",
+    text: "text-[var(--cd-success)]",
+    border: "border-[var(--cd-success)]",
+  },
+  rejected: {
+    label: "Rejected",
+    bg: "bg-[var(--cd-danger-subtle)]",
+    text: "text-[var(--cd-danger)]",
+    border: "border-[var(--cd-danger)]",
+  },
+  pending: {
+    label: "Pending",
+    bg: "bg-[var(--cd-warning-subtle)]",
+    text: "text-[var(--cd-warning)]",
+    border: "border-[var(--cd-warning)]",
+  },
 };
 
 // ─── Activity timeline ────────────────────────────────────────────────────────
 export const ACTIVITY_ICON: Record<string, string> = {
-  created:   "✦",
-  updated:   "↻",
+  created: "✦",
+  updated: "↻",
   submitted: "↑",
-  reviewed:  "✓",
+  reviewed: "✓",
   commented: "◎",
 };
 
 export const ACTIVITY_COLOR: Record<string, string> = {
-  created:   "bg-[var(--cd-primary-subtle)] text-[var(--cd-primary)]",
-  updated:   "bg-[var(--cd-warning-subtle)] text-[var(--cd-warning)]",
+  created: "bg-[var(--cd-primary-subtle)] text-[var(--cd-primary)]",
+  updated: "bg-[var(--cd-warning-subtle)] text-[var(--cd-warning)]",
   submitted: "bg-[var(--cd-secondary-subtle)] text-[var(--cd-secondary)]",
-  reviewed:  "bg-[var(--cd-success-subtle)] text-[var(--cd-success)]",
+  reviewed: "bg-[var(--cd-success-subtle)] text-[var(--cd-success)]",
   commented: "bg-[var(--cd-surface-3)] text-[var(--cd-text-2)]",
 };
 
-
 // ─── Submission status colors (legacy alias) ──────────────────────────────────
 export const SUBMISSION_STATUS_COLORS = SUBMISSION_STATUS_CONFIG;
 export const ACTIVITY_ICONS = ACTIVITY_ICON;
 
 // ─── Submission type ──────────────────────────────────────────────────────────
 export const SUBMISSION_TYPE_CONFIG = {
-  file:   { label: "File Upload", icon: "FileUp" },
+  file: { label: "File Upload", icon: "FileUp" },
   github: { label: "GitHub Repository", icon: "Github" },
-  link:   { label: "External Link", icon: "Link" },
-  all:    { label: "Any Submission", icon: "Layers" },
+  link: { label: "External Link", icon: "Link" },
+  all: { label: "Any Submission", icon: "Layers" },
 };
diff --git a/src/features/Tasks/v1/constants/tech.constants.ts b/src/features/Tasks/v1/constants/tech.constants.ts
index fdf5656..98759df 100644
--- a/src/features/Tasks/v1/constants/tech.constants.ts
+++ b/src/features/Tasks/v1/constants/tech.constants.ts
@@ -1,24 +1,24 @@
 import type { TechTag } from "../Task.types";
 
 export const TECH_OPTIONS: TechTag[] = [
-  { id: "react",      label: "React",       color: "bg-sky-100 text-sky-700"         },
-  { id: "nextjs",     label: "Next.js",     color: "bg-gray-100 text-gray-700"       },
-  { id: "vue",        label: "Vue",         color: "bg-emerald-100 text-emerald-700" },
-  { id: "typescript", label: "TypeScript",  color: "bg-blue-100 text-blue-700"       },
-  { id: "nodejs",     label: "Node.js",     color: "bg-green-100 text-green-700"     },
-  { id: "python",     label: "Python",      color: "bg-yellow-100 text-yellow-700"   },
-  { id: "rust",       label: "Rust",        color: "bg-orange-100 text-orange-700"   },
-  { id: "go",         label: "Go",          color: "bg-cyan-100 text-cyan-700"       },
-  { id: "solidity",   label: "Solidity",    color: "bg-purple-100 text-purple-700"   },
-  { id: "tailwind",   label: "Tailwind",    color: "bg-teal-100 text-teal-700"       },
-  { id: "postgres",   label: "PostgreSQL",  color: "bg-indigo-100 text-indigo-700"   },
-  { id: "mongodb",    label: "MongoDB",     color: "bg-lime-100 text-lime-700"       },
-  { id: "docker",     label: "Docker",      color: "bg-blue-100 text-blue-800"       },
-  { id: "graphql",    label: "GraphQL",     color: "bg-pink-100 text-pink-700"       },
-  { id: "figma",      label: "Figma",       color: "bg-violet-100 text-violet-700"   },
-  { id: "github",     label: "GitHub",      color: "bg-gray-200 text-gray-800"       },
-  { id: "aws",        label: "AWS",         color: "bg-amber-100 text-amber-700"     },
-  { id: "flutter",    label: "Flutter",     color: "bg-sky-100 text-sky-800"         },
-  { id: "swift",      label: "Swift",       color: "bg-red-100 text-red-700"         },
-  { id: "kotlin",     label: "Kotlin",      color: "bg-purple-100 text-purple-800"   },
-];
\ No newline at end of file
+  { id: "react", label: "React", color: "bg-sky-100 text-sky-700" },
+  { id: "nextjs", label: "Next.js", color: "bg-gray-100 text-gray-700" },
+  { id: "vue", label: "Vue", color: "bg-emerald-100 text-emerald-700" },
+  { id: "typescript", label: "TypeScript", color: "bg-blue-100 text-blue-700" },
+  { id: "nodejs", label: "Node.js", color: "bg-green-100 text-green-700" },
+  { id: "python", label: "Python", color: "bg-yellow-100 text-yellow-700" },
+  { id: "rust", label: "Rust", color: "bg-orange-100 text-orange-700" },
+  { id: "go", label: "Go", color: "bg-cyan-100 text-cyan-700" },
+  { id: "solidity", label: "Solidity", color: "bg-purple-100 text-purple-700" },
+  { id: "tailwind", label: "Tailwind", color: "bg-teal-100 text-teal-700" },
+  { id: "postgres", label: "PostgreSQL", color: "bg-indigo-100 text-indigo-700" },
+  { id: "mongodb", label: "MongoDB", color: "bg-lime-100 text-lime-700" },
+  { id: "docker", label: "Docker", color: "bg-blue-100 text-blue-800" },
+  { id: "graphql", label: "GraphQL", color: "bg-pink-100 text-pink-700" },
+  { id: "figma", label: "Figma", color: "bg-violet-100 text-violet-700" },
+  { id: "github", label: "GitHub", color: "bg-gray-200 text-gray-800" },
+  { id: "aws", label: "AWS", color: "bg-amber-100 text-amber-700" },
+  { id: "flutter", label: "Flutter", color: "bg-sky-100 text-sky-800" },
+  { id: "swift", label: "Swift", color: "bg-red-100 text-red-700" },
+  { id: "kotlin", label: "Kotlin", color: "bg-purple-100 text-purple-800" },
+];
diff --git a/src/features/Tasks/v1/hooks/useComments.ts b/src/features/Tasks/v1/hooks/useComments.ts
index 42a2719..3af4baf 100644
--- a/src/features/Tasks/v1/hooks/useComments.ts
+++ b/src/features/Tasks/v1/hooks/useComments.ts
@@ -18,7 +18,13 @@ export function useComments(taskId: string | undefined) {
 export function useAddComment() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async ({ taskId, text }: { taskId: string; text: string }): Promise<TaskComment> => {
+    mutationFn: async ({
+      taskId,
+      text,
+    }: {
+      taskId: string;
+      text: string;
+    }): Promise<TaskComment> => {
       await new Promise((r) => setTimeout(r, 300));
       const comment: TaskComment = {
         id: `cmt-${Date.now()}`,
diff --git a/src/features/Tasks/v1/hooks/useEvents.ts b/src/features/Tasks/v1/hooks/useEvents.ts
index c3de8ad..df7fbc2 100644
--- a/src/features/Tasks/v1/hooks/useEvents.ts
+++ b/src/features/Tasks/v1/hooks/useEvents.ts
@@ -13,4 +13,4 @@ export function useEvents() {
     queryFn: fetchEvents,
     staleTime: 5 * 60 * 1000,
   });
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/hooks/useSubmissions.ts b/src/features/Tasks/v1/hooks/useSubmissions.ts
index 308e82b..e83d71a 100644
--- a/src/features/Tasks/v1/hooks/useSubmissions.ts
+++ b/src/features/Tasks/v1/hooks/useSubmissions.ts
@@ -38,7 +38,7 @@ export function useReviewSubmission() {
                 reviewedAt: new Date().toISOString(),
               },
             }
-          : s
+          : s,
       );
       const updated = store.find((s) => s.id === submissionId);
       if (!updated) throw new Error("Submission not found");
@@ -49,4 +49,4 @@ export function useReviewSubmission() {
       qc.invalidateQueries({ queryKey: ["task", updated.taskId] });
     },
   });
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/hooks/useTaskDetail.ts b/src/features/Tasks/v1/hooks/useTaskDetail.ts
index 4069ea8..7ce167c 100644
--- a/src/features/Tasks/v1/hooks/useTaskDetail.ts
+++ b/src/features/Tasks/v1/hooks/useTaskDetail.ts
@@ -27,4 +27,4 @@ export function useTaskActivity(taskId: string | undefined) {
     },
     enabled: !!taskId,
   });
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/hooks/useTasks.ts b/src/features/Tasks/v1/hooks/useTasks.ts
index 2dc24d7..3c47576 100644
--- a/src/features/Tasks/v1/hooks/useTasks.ts
+++ b/src/features/Tasks/v1/hooks/useTasks.ts
@@ -18,10 +18,10 @@ function matchesSearch(task: Task, q: string): boolean {
     task.status,
     task.submissionType,
     task.submissionStatus,
-    ...(task.technologies ?? []).map(t => t.label),
-    ...(task.technologies ?? []).map(t => t.id),
-    ...task.assignedTo.map(m => m.name),
-    ...task.assignedTo.map(m => m.role),
+    ...(task.technologies ?? []).map((t) => t.label),
+    ...(task.technologies ?? []).map((t) => t.id),
+    ...task.assignedTo.map((m) => m.name),
+    ...task.assignedTo.map((m) => m.role),
     task.isMandatory ? "mandatory" : "",
     task.points !== undefined ? `${task.points} pts` : "",
     isOverdue ? "overdue past late" : "",
@@ -45,9 +45,9 @@ function applyFilters(tasks: Task[], filters: TaskFilters): Task[] {
   return tasks.filter((t) => {
     if (filters.status !== "all" && t.status !== filters.status) return false;
     if (filters.priority !== "all" && t.priority !== filters.priority) return false;
-    if (filters.time === "upcoming"  && !isFuture(parseISO(t.deadline))) return false;
-    if (filters.time === "past"      && !isPast(parseISO(t.deadline)))   return false;
-    if (filters.time === "completed" && t.status !== "completed")        return false;
+    if (filters.time === "upcoming" && !isFuture(parseISO(t.deadline))) return false;
+    if (filters.time === "past" && !isPast(parseISO(t.deadline))) return false;
+    if (filters.time === "completed" && t.status !== "completed") return false;
     if (filters.members.length > 0) {
       const ids = new Set(t.assignedTo.map((m) => m.id));
       if (!filters.members.some((id) => ids.has(id))) return false;
@@ -63,7 +63,10 @@ export function useTasks(eventId: string | null, filters: TaskFilters) {
     queryFn: async () => {
       await new Promise((r) => setTimeout(r, 600));
       if (!eventId) return [];
-      return applyFilters(taskStore.getAll().filter((t) => t.eventId === eventId), filters);
+      return applyFilters(
+        taskStore.getAll().filter((t) => t.eventId === eventId),
+        filters,
+      );
     },
     enabled: !!eventId,
   });
@@ -108,7 +111,13 @@ export function useCreateTask() {
 export function useUpdateTask() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async ({ id, payload }: { id: string; payload: UpdateTaskPayload }): Promise<Task> => {
+    mutationFn: async ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: UpdateTaskPayload;
+    }): Promise<Task> => {
       await new Promise((r) => setTimeout(r, 400));
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { assignedTo: _ids, ...rest } = payload;
diff --git a/src/features/Tasks/v1/index.ts b/src/features/Tasks/v1/index.ts
index 5555be1..4545372 100644
--- a/src/features/Tasks/v1/index.ts
+++ b/src/features/Tasks/v1/index.ts
@@ -1,37 +1,51 @@
 // ─── Pages ───────────────────────────────────────────────────────────────────
 export { default as TaskManagementPage } from "./pages/TaskManagementPage";
-export { default as TaskDetailPage }     from "./pages/TaskDetailPage";
-export { default as CreateTaskPage }     from "./pages/CreateTaskPage";
-export { default as EditTaskPage }       from "./pages/EditTaskPage";
+export { default as TaskDetailPage } from "./pages/TaskDetailPage";
+export { default as CreateTaskPage } from "./pages/CreateTaskPage";
+export { default as EditTaskPage } from "./pages/EditTaskPage";
 
 // ─── Hooks ───────────────────────────────────────────────────────────────────
 export { useTasks, useCreateTask, useUpdateTask, useDeleteTask } from "./hooks/useTasks";
-export { useTaskDetail, useTaskActivity }                        from "./hooks/useTaskDetail";
-export { useSubmissions, useReviewSubmission }                   from "./hooks/useSubmissions";
-export { useEvents }                                             from "./hooks/useEvents";
+export { useTaskDetail, useTaskActivity } from "./hooks/useTaskDetail";
+export { useSubmissions, useReviewSubmission } from "./hooks/useSubmissions";
+export { useEvents } from "./hooks/useEvents";
 
 // ─── Common components ────────────────────────────────────────────────────────
-export { default as StatusBadge }    from "./components/common/StatusBadge";
-export { default as PriorityBadge }  from "./components/common/PriorityBadge";
-export { default as EmptyState }     from "./components/common/EmptyState";
+export { default as StatusBadge } from "./components/common/StatusBadge";
+export { default as PriorityBadge } from "./components/common/PriorityBadge";
+export { default as EmptyState } from "./components/common/EmptyState";
 export { default as SkeletonLoader } from "./components/common/SkeletonLoader";
-export { default as ConfirmModal }   from "./components/common/ConfirmModal";
-export { ToastContainer, useToast }  from "./components/common/ToastNotification";
+export { default as ConfirmModal } from "./components/common/ConfirmModal";
+export { ToastContainer, useToast } from "./components/common/ToastNotification";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 export type {
-  Task, TaskStatus, TaskPriority, TaskFilters,
-  EventOption, EventType, MemberOption,
-  Submission, SubmissionReview, ReviewDecision,
-  ActivityEvent, CreateTaskPayload, UpdateTaskPayload,
+  Task,
+  TaskStatus,
+  TaskPriority,
+  TaskFilters,
+  EventOption,
+  EventType,
+  MemberOption,
+  Submission,
+  SubmissionReview,
+  ReviewDecision,
+  ActivityEvent,
+  CreateTaskPayload,
+  UpdateTaskPayload,
   ReviewSubmissionPayload,
 } from "./Task.types";
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 export {
-  SELECTED_EVENT_KEY, DEFAULT_FILTERS,
-  PRIORITY_CONFIG, STATUS_CONFIG,
-  SUBMISSION_STATUS_CONFIG, EVENT_TYPE_CONFIG,
-  EVENT_STATUS_CONFIG, REVIEW_DECISION_CONFIG,
-  ACTIVITY_ICON, ACTIVITY_COLOR,
-} from "./constants/task.constants";
\ No newline at end of file
+  SELECTED_EVENT_KEY,
+  DEFAULT_FILTERS,
+  PRIORITY_CONFIG,
+  STATUS_CONFIG,
+  SUBMISSION_STATUS_CONFIG,
+  EVENT_TYPE_CONFIG,
+  EVENT_STATUS_CONFIG,
+  REVIEW_DECISION_CONFIG,
+  ACTIVITY_ICON,
+  ACTIVITY_COLOR,
+} from "./constants/task.constants";
diff --git a/src/features/Tasks/v1/mock/taskMockData.ts b/src/features/Tasks/v1/mock/taskMockData.ts
index db4393c..889f02d 100644
--- a/src/features/Tasks/v1/mock/taskMockData.ts
+++ b/src/features/Tasks/v1/mock/taskMockData.ts
@@ -1,5 +1,10 @@
 import type {
-  EventOption, MemberOption, Task, Submission, ActivityEvent, TaskComment,
+  EventOption,
+  MemberOption,
+  Task,
+  Submission,
+  ActivityEvent,
+  TaskComment,
 } from "../Task.types";
 
 // ─── Avatar helper — initials-based, always loads ────────────────────────────
@@ -8,169 +13,384 @@ const av = (name: string, bg: string) =>
 
 // ─── Mock Events ──────────────────────────────────────────────────────────────
 export const mockEvents: EventOption[] = [
-  { id: "evt-001", name: "Summer AI Hackathon 2026", subtitle: "Sponsored by TechCorp", type: "hackathon", status: "Live", startDate: "2026-06-15", endDate: "2026-06-17" },
-  { id: "evt-002", name: "Web3 Builders Sprint", subtitle: "Internal Team Event", type: "internal", status: "Upcoming", startDate: "2026-07-01", endDate: "2026-07-03" },
-  { id: "evt-003", name: "Global Open Source Hack", subtitle: "Public Event", type: "hackathon", status: "Completed", startDate: "2026-05-10", endDate: "2026-05-12" },
-  { id: "evt-004", name: "Speed Code Blitz", subtitle: "Internal Team Event", type: "internal", status: "Completed", startDate: "2026-04-22", endDate: "2026-04-22" },
-  { id: "evt-005", name: "Design Systems Workshop", subtitle: "Design Department", type: "workshop", status: "Upcoming", startDate: "2026-08-05", endDate: "2026-08-07" },
-  { id: "evt-006", name: "Community Growth Sprint", subtitle: "Open to all members", type: "community", status: "Live", startDate: "2026-05-01", endDate: "2026-05-31" },
+  {
+    id: "evt-001",
+    name: "Summer AI Hackathon 2026",
+    subtitle: "Sponsored by TechCorp",
+    type: "hackathon",
+    status: "Live",
+    startDate: "2026-06-15",
+    endDate: "2026-06-17",
+  },
+  {
+    id: "evt-002",
+    name: "Web3 Builders Sprint",
+    subtitle: "Internal Team Event",
+    type: "internal",
+    status: "Upcoming",
+    startDate: "2026-07-01",
+    endDate: "2026-07-03",
+  },
+  {
+    id: "evt-003",
+    name: "Global Open Source Hack",
+    subtitle: "Public Event",
+    type: "hackathon",
+    status: "Completed",
+    startDate: "2026-05-10",
+    endDate: "2026-05-12",
+  },
+  {
+    id: "evt-004",
+    name: "Speed Code Blitz",
+    subtitle: "Internal Team Event",
+    type: "internal",
+    status: "Completed",
+    startDate: "2026-04-22",
+    endDate: "2026-04-22",
+  },
+  {
+    id: "evt-005",
+    name: "Design Systems Workshop",
+    subtitle: "Design Department",
+    type: "workshop",
+    status: "Upcoming",
+    startDate: "2026-08-05",
+    endDate: "2026-08-07",
+  },
+  {
+    id: "evt-006",
+    name: "Community Growth Sprint",
+    subtitle: "Open to all members",
+    type: "community",
+    status: "Live",
+    startDate: "2026-05-01",
+    endDate: "2026-05-31",
+  },
 ];
 
 // ─── Mock Members ─────────────────────────────────────────────────────────────
 export const mockMembers: MemberOption[] = [
-  { id: "mem-001", name: "John Doe", avatar: "https://randomuser.me/api/portraits/men/1.jpg", role: "Mentor", email: "john@commdesk.io" },
-  { id: "mem-002", name: "Jane Smith", avatar: "https://randomuser.me/api/portraits/women/2.jpg", role: "Mentee", email: "jane@commdesk.io" },
-  { id: "mem-003", name: "Alice Johnson", avatar: "https://randomuser.me/api/portraits/women/3.jpg", role: "Lean Developer", email: "alice@commdesk.io" },
-  { id: "mem-004", name: "Bob Brown", avatar: "https://randomuser.me/api/portraits/men/4.jpg", role: "Observer", email: "bob@commdesk.io" },
-  { id: "mem-005", name: "Sarah Wilson", avatar: "https://randomuser.me/api/portraits/women/5.jpg", role: "Lead Designer", email: "sarah@commdesk.io" },
-  { id: "mem-006", name: "Mike Ross", avatar: "https://randomuser.me/api/portraits/men/6.jpg", role: "Software Engineer", email: "mike@commdesk.io" },
+  {
+    id: "mem-001",
+    name: "John Doe",
+    avatar: "https://randomuser.me/api/portraits/men/1.jpg",
+    role: "Mentor",
+    email: "john@commdesk.io",
+  },
+  {
+    id: "mem-002",
+    name: "Jane Smith",
+    avatar: "https://randomuser.me/api/portraits/women/2.jpg",
+    role: "Mentee",
+    email: "jane@commdesk.io",
+  },
+  {
+    id: "mem-003",
+    name: "Alice Johnson",
+    avatar: "https://randomuser.me/api/portraits/women/3.jpg",
+    role: "Lean Developer",
+    email: "alice@commdesk.io",
+  },
+  {
+    id: "mem-004",
+    name: "Bob Brown",
+    avatar: "https://randomuser.me/api/portraits/men/4.jpg",
+    role: "Observer",
+    email: "bob@commdesk.io",
+  },
+  {
+    id: "mem-005",
+    name: "Sarah Wilson",
+    avatar: "https://randomuser.me/api/portraits/women/5.jpg",
+    role: "Lead Designer",
+    email: "sarah@commdesk.io",
+  },
+  {
+    id: "mem-006",
+    name: "Mike Ross",
+    avatar: "https://randomuser.me/api/portraits/men/6.jpg",
+    role: "Software Engineer",
+    email: "mike@commdesk.io",
+  },
 ];
 
 // ─── Mock Tasks ───────────────────────────────────────────────────────────────
 export const mockTasks: Task[] = [
   {
-    id: "task-001", eventId: "evt-001",
+    id: "task-001",
+    eventId: "evt-001",
     title: "Build Landing Page for AI Showcase",
-    description: "Create a responsive landing page that showcases the AI hackathon projects. Include hero section, project gallery, and registration CTA.",
-    status: "in-progress", priority: "high", deadline: "2026-06-10T23:59:00",
+    description:
+      "Create a responsive landing page that showcases the AI hackathon projects. Include hero section, project gallery, and registration CTA.",
+    status: "in-progress",
+    priority: "high",
+    deadline: "2026-06-10T23:59:00",
     assignedTo: [mockMembers[0], mockMembers[1]],
-    submissionType: "github", submissionStatus: "submitted",
-    isMandatory: true, points: 100, allowLateSubmission: false,
+    submissionType: "github",
+    submissionStatus: "submitted",
+    isMandatory: true,
+    points: 100,
+    allowLateSubmission: false,
     technologies: [
       { id: "react", label: "React", color: "bg-sky-100 text-sky-700" },
       { id: "typescript", label: "TypeScript", color: "bg-blue-100 text-blue-700" },
       { id: "tailwind", label: "Tailwind", color: "bg-teal-100 text-teal-700" },
     ],
-    createdAt: "2026-05-01T10:00:00", updatedAt: "2026-05-07T14:30:00", createdBy: "Organizer",
+    createdAt: "2026-05-01T10:00:00",
+    updatedAt: "2026-05-07T14:30:00",
+    createdBy: "Organizer",
   },
   {
-    id: "task-002", eventId: "evt-001",
+    id: "task-002",
+    eventId: "evt-001",
     title: "Design Brand Identity Kit",
-    description: "Create complete brand guidelines including logo variations, color palette, typography, and usage examples for the hackathon.",
-    status: "todo", priority: "medium", deadline: "2026-05-03T23:59:00",
+    description:
+      "Create complete brand guidelines including logo variations, color palette, typography, and usage examples for the hackathon.",
+    status: "todo",
+    priority: "medium",
+    deadline: "2026-05-03T23:59:00",
     assignedTo: [mockMembers[1]],
-    submissionType: "file", submissionStatus: "not-submitted",
-    isMandatory: true, points: 80, allowLateSubmission: true,
-    technologies: [
-      { id: "figma", label: "Figma", color: "bg-violet-100 text-violet-700" },
-    ],
-    createdAt: "2026-05-02T09:00:00", updatedAt: "2026-05-02T09:00:00", createdBy: "Organizer",
+    submissionType: "file",
+    submissionStatus: "not-submitted",
+    isMandatory: true,
+    points: 80,
+    allowLateSubmission: true,
+    technologies: [{ id: "figma", label: "Figma", color: "bg-violet-100 text-violet-700" }],
+    createdAt: "2026-05-02T09:00:00",
+    updatedAt: "2026-05-02T09:00:00",
+    createdBy: "Organizer",
   },
   {
-    id: "task-003", eventId: "evt-001",
+    id: "task-003",
+    eventId: "evt-001",
     title: "Set Up CI/CD Pipeline",
-    description: "Configure GitHub Actions for automated testing and deployment. Include staging and production environments.",
-    status: "completed", priority: "high", deadline: "2026-05-28T23:59:00",
+    description:
+      "Configure GitHub Actions for automated testing and deployment. Include staging and production environments.",
+    status: "completed",
+    priority: "high",
+    deadline: "2026-05-28T23:59:00",
     assignedTo: [mockMembers[2], mockMembers[4]],
-    submissionType: "github", submissionStatus: "reviewed",
-    isMandatory: true, points: 120, allowLateSubmission: false,
+    submissionType: "github",
+    submissionStatus: "reviewed",
+    isMandatory: true,
+    points: 120,
+    allowLateSubmission: false,
     technologies: [
       { id: "docker", label: "Docker", color: "bg-blue-100 text-blue-800" },
       { id: "github", label: "GitHub", color: "bg-gray-200 text-gray-800" },
       { id: "nodejs", label: "Node.js", color: "bg-green-100 text-green-700" },
     ],
-    createdAt: "2026-04-28T11:00:00", updatedAt: "2026-05-27T16:00:00", createdBy: "Organizer",
+    createdAt: "2026-04-28T11:00:00",
+    updatedAt: "2026-05-27T16:00:00",
+    createdBy: "Organizer",
   },
   {
-    id: "task-004", eventId: "evt-001",
+    id: "task-004",
+    eventId: "evt-001",
     title: "Participant Data Analytics Dashboard",
-    description: "Build a real-time analytics dashboard showing participant statistics, submission rates, and leaderboard.",
-    status: "todo", priority: "low", deadline: "2026-06-14T23:59:00",
+    description:
+      "Build a real-time analytics dashboard showing participant statistics, submission rates, and leaderboard.",
+    status: "todo",
+    priority: "low",
+    deadline: "2026-06-14T23:59:00",
     assignedTo: [mockMembers[3], mockMembers[5]],
-    submissionType: "all", submissionStatus: "not-submitted",
-    isMandatory: false, points: 150, allowLateSubmission: true,
+    submissionType: "all",
+    submissionStatus: "not-submitted",
+    isMandatory: false,
+    points: 150,
+    allowLateSubmission: true,
     technologies: [
       { id: "python", label: "Python", color: "bg-yellow-100 text-yellow-700" },
       { id: "postgres", label: "PostgreSQL", color: "bg-indigo-100 text-indigo-700" },
     ],
-    createdAt: "2026-05-05T13:00:00", updatedAt: "2026-05-05T13:00:00", createdBy: "Organizer",
+    createdAt: "2026-05-05T13:00:00",
+    updatedAt: "2026-05-05T13:00:00",
+    createdBy: "Organizer",
   },
   {
-    id: "task-005", eventId: "evt-001",
+    id: "task-005",
+    eventId: "evt-001",
     title: "Write Technical Documentation",
-    description: "Document the API endpoints, system architecture, and developer setup guide for the hackathon platform.",
-    status: "in-progress", priority: "medium", deadline: "2026-05-05T23:59:00",
+    description:
+      "Document the API endpoints, system architecture, and developer setup guide for the hackathon platform.",
+    status: "in-progress",
+    priority: "medium",
+    deadline: "2026-05-05T23:59:00",
     assignedTo: [mockMembers[0], mockMembers[2]],
-    submissionType: "file", submissionStatus: "not-submitted",
-    isMandatory: false, allowLateSubmission: true,
+    submissionType: "file",
+    submissionStatus: "not-submitted",
+    isMandatory: false,
+    allowLateSubmission: true,
     technologies: [],
-    createdAt: "2026-05-03T12:00:00", updatedAt: "2026-05-06T10:00:00", createdBy: "Organizer",
+    createdAt: "2026-05-03T12:00:00",
+    updatedAt: "2026-05-06T10:00:00",
+    createdBy: "Organizer",
   },
   {
-    id: "task-006", eventId: "evt-002",
+    id: "task-006",
+    eventId: "evt-002",
     title: "Smart Contract Development",
     description: "Build and deploy ERC-20 token contracts on test network.",
-    status: "todo", priority: "high", deadline: "2026-06-28T23:59:00",
+    status: "todo",
+    priority: "high",
+    deadline: "2026-06-28T23:59:00",
     assignedTo: [mockMembers[2]],
-    submissionType: "github", submissionStatus: "not-submitted",
-    isMandatory: true, points: 200, allowLateSubmission: false,
+    submissionType: "github",
+    submissionStatus: "not-submitted",
+    isMandatory: true,
+    points: 200,
+    allowLateSubmission: false,
     technologies: [{ id: "solidity", label: "Solidity", color: "bg-purple-100 text-purple-700" }],
-    createdAt: "2026-05-10T09:00:00", updatedAt: "2026-05-10T09:00:00", createdBy: "Organizer",
+    createdAt: "2026-05-10T09:00:00",
+    updatedAt: "2026-05-10T09:00:00",
+    createdBy: "Organizer",
   },
   {
-    id: "task-007", eventId: "evt-002",
+    id: "task-007",
+    eventId: "evt-002",
     title: "DApp Frontend Integration",
     description: "Connect React frontend with Metamask and smart contracts.",
-    status: "todo", priority: "high", deadline: "2026-06-30T23:59:00",
+    status: "todo",
+    priority: "high",
+    deadline: "2026-06-30T23:59:00",
     assignedTo: [mockMembers[0], mockMembers[3]],
-    submissionType: "all", submissionStatus: "not-submitted",
-    isMandatory: true, allowLateSubmission: false,
+    submissionType: "all",
+    submissionStatus: "not-submitted",
+    isMandatory: true,
+    allowLateSubmission: false,
     technologies: [
       { id: "react", label: "React", color: "bg-sky-100 text-sky-700" },
       { id: "solidity", label: "Solidity", color: "bg-purple-100 text-purple-700" },
     ],
-    createdAt: "2026-05-10T10:00:00", updatedAt: "2026-05-10T10:00:00", createdBy: "Organizer",
+    createdAt: "2026-05-10T10:00:00",
+    updatedAt: "2026-05-10T10:00:00",
+    createdBy: "Organizer",
   },
   {
-    id: "task-008", eventId: "evt-003",
+    id: "task-008",
+    eventId: "evt-003",
     title: "Open Source Contribution Report",
     description: "Submit PRs to at least 3 open source repositories.",
-    status: "completed", priority: "medium", deadline: "2026-05-11T23:59:00",
+    status: "completed",
+    priority: "medium",
+    deadline: "2026-05-11T23:59:00",
     assignedTo: [mockMembers[1], mockMembers[4]],
-    submissionType: "github", submissionStatus: "reviewed",
-    isMandatory: true, points: 100, allowLateSubmission: false,
+    submissionType: "github",
+    submissionStatus: "reviewed",
+    isMandatory: true,
+    points: 100,
+    allowLateSubmission: false,
     technologies: [{ id: "github", label: "GitHub", color: "bg-gray-200 text-gray-800" }],
-    createdAt: "2026-04-30T08:00:00", updatedAt: "2026-05-12T14:00:00", createdBy: "Organizer",
+    createdAt: "2026-04-30T08:00:00",
+    updatedAt: "2026-05-12T14:00:00",
+    createdBy: "Organizer",
   },
 ];
 
 // ─── Mock Submissions ─────────────────────────────────────────────────────────
 export const mockSubmissions: Submission[] = [
   {
-    id: "sub-001", taskId: "task-001", submittedBy: mockMembers[0],
+    id: "sub-001",
+    taskId: "task-001",
+    submittedBy: mockMembers[0],
     githubUrl: "https://github.com/johndoe/ai-landing-page",
     notes: "Completed responsive design with animations. Mobile tested.",
     submittedAt: "2026-06-08T15:30:00",
-    review: { decision: "approved", score: 92, feedback: "Excellent work! Clean code and great animations.", reviewedBy: "Organizer", reviewedAt: "2026-06-09T10:00:00" },
+    review: {
+      decision: "approved",
+      score: 92,
+      feedback: "Excellent work! Clean code and great animations.",
+      reviewedBy: "Organizer",
+      reviewedAt: "2026-06-09T10:00:00",
+    },
   },
   {
-    id: "sub-002", taskId: "task-001", submittedBy: mockMembers[1],
+    id: "sub-002",
+    taskId: "task-001",
+    submittedBy: mockMembers[1],
     githubUrl: "https://github.com/janesmith/ai-landing-page-designs",
     notes: "Added Figma components and updated CSS variables.",
     submittedAt: "2026-06-09T11:00:00",
   },
   {
-    id: "sub-003", taskId: "task-003", submittedBy: mockMembers[2],
+    id: "sub-003",
+    taskId: "task-003",
+    submittedBy: mockMembers[2],
     githubUrl: "https://github.com/alicej/hackathon-cicd",
     notes: "Set up GitHub Actions with matrix testing on Node 18 & 20.",
     submittedAt: "2026-05-27T14:00:00",
-    review: { decision: "approved", score: 98, feedback: "Perfect pipeline setup.", reviewedBy: "Organizer", reviewedAt: "2026-05-28T09:00:00" },
+    review: {
+      decision: "approved",
+      score: 98,
+      feedback: "Perfect pipeline setup.",
+      reviewedBy: "Organizer",
+      reviewedAt: "2026-05-28T09:00:00",
+    },
   },
 ];
 
 // ─── Mock Activity ────────────────────────────────────────────────────────────
 export const mockActivity: Record<string, ActivityEvent[]> = {
   "task-001": [
-    { id: "act-001", type: "created", actor: "Organizer", description: "Task created and assigned to John & Jane", timestamp: "2026-05-01T10:00:00" },
-    { id: "act-002", type: "updated", actor: "John Doe", description: "Status changed from Todo → In Progress", timestamp: "2026-05-15T09:30:00" },
-    { id: "act-003", type: "submitted", actor: "John Doe", description: "Submitted GitHub repository link", timestamp: "2026-06-08T15:30:00" },
-    { id: "act-004", type: "reviewed", actor: "Organizer", description: "Submission approved · Score: 92/100", timestamp: "2026-06-09T10:00:00" },
-    { id: "act-005", type: "submitted", actor: "Jane Smith", description: "Submitted design assets", timestamp: "2026-06-09T11:00:00" },
+    {
+      id: "act-001",
+      type: "created",
+      actor: "Organizer",
+      description: "Task created and assigned to John & Jane",
+      timestamp: "2026-05-01T10:00:00",
+    },
+    {
+      id: "act-002",
+      type: "updated",
+      actor: "John Doe",
+      description: "Status changed from Todo → In Progress",
+      timestamp: "2026-05-15T09:30:00",
+    },
+    {
+      id: "act-003",
+      type: "submitted",
+      actor: "John Doe",
+      description: "Submitted GitHub repository link",
+      timestamp: "2026-06-08T15:30:00",
+    },
+    {
+      id: "act-004",
+      type: "reviewed",
+      actor: "Organizer",
+      description: "Submission approved · Score: 92/100",
+      timestamp: "2026-06-09T10:00:00",
+    },
+    {
+      id: "act-005",
+      type: "submitted",
+      actor: "Jane Smith",
+      description: "Submitted design assets",
+      timestamp: "2026-06-09T11:00:00",
+    },
   ],
   "task-003": [
-    { id: "act-006", type: "created", actor: "Organizer", description: "Task created and assigned to Alice & Bob", timestamp: "2026-04-28T11:00:00" },
-    { id: "act-007", type: "submitted", actor: "Alice Johnson", description: "Submitted CI/CD pipeline implementation", timestamp: "2026-05-27T14:00:00" },
-    { id: "act-008", type: "reviewed", actor: "Organizer", description: "Submission approved · Score: 98/100", timestamp: "2026-05-28T09:00:00" },
+    {
+      id: "act-006",
+      type: "created",
+      actor: "Organizer",
+      description: "Task created and assigned to Alice & Bob",
+      timestamp: "2026-04-28T11:00:00",
+    },
+    {
+      id: "act-007",
+      type: "submitted",
+      actor: "Alice Johnson",
+      description: "Submitted CI/CD pipeline implementation",
+      timestamp: "2026-05-27T14:00:00",
+    },
+    {
+      id: "act-008",
+      type: "reviewed",
+      actor: "Organizer",
+      description: "Submission approved · Score: 98/100",
+      timestamp: "2026-05-28T09:00:00",
+    },
   ],
 };
 
@@ -178,14 +398,16 @@ export const mockActivity: Record<string, ActivityEvent[]> = {
 export const mockComments: Record<string, TaskComment[]> = {
   "task-001": [
     {
-      id: "cmt-001", taskId: "task-001",
+      id: "cmt-001",
+      taskId: "task-001",
       author: "Organizer",
       avatar: av("Organizer", "6366f1"),
       text: "Please make sure the hero section is mobile-first.",
       createdAt: "2026-05-02T10:00:00",
     },
     {
-      id: "cmt-002", taskId: "task-001",
+      id: "cmt-002",
+      taskId: "task-001",
       author: "John Doe",
       avatar: "https://randomuser.me/api/portraits/men/1.jpg",
       text: "Got it! I'll start with the mobile layout and scale up.",
@@ -194,7 +416,8 @@ export const mockComments: Record<string, TaskComment[]> = {
   ],
   "task-003": [
     {
-      id: "cmt-003", taskId: "task-003",
+      id: "cmt-003",
+      taskId: "task-003",
       author: "Organizer",
       avatar: av("Organizer", "6366f1"),
       text: "Make sure the pipeline covers both staging and production environments.",
diff --git a/src/features/Tasks/v1/mock/taskStore.ts b/src/features/Tasks/v1/mock/taskStore.ts
index b574dfa..9cc42a8 100644
--- a/src/features/Tasks/v1/mock/taskStore.ts
+++ b/src/features/Tasks/v1/mock/taskStore.ts
@@ -9,12 +9,20 @@ import type { Task } from "../Task.types";
 let store: Task[] = [...mockTasks];
 
 export const taskStore = {
-  getAll: ()                  => store,
-  getById: (id: string)       => store.find((t) => t.id === id),
-  add: (task: Task)           => { store = [task, ...store]; },
+  getAll: () => store,
+  getById: (id: string) => store.find((t) => t.id === id),
+  add: (task: Task) => {
+    store = [task, ...store];
+  },
   update: (id: string, patch: Partial<Task>) => {
-    store = store.map((t) => t.id === id ? { ...t, ...patch, updatedAt: new Date().toISOString() } : t);
+    store = store.map((t) =>
+      t.id === id ? { ...t, ...patch, updatedAt: new Date().toISOString() } : t,
+    );
+  },
+  remove: (id: string) => {
+    store = store.filter((t) => t.id !== id);
+  },
+  reset: () => {
+    store = [...mockTasks];
   },
-  remove: (id: string)        => { store = store.filter((t) => t.id !== id); },
-  reset: ()                   => { store = [...mockTasks]; },
-};
\ No newline at end of file
+};
diff --git a/src/features/Tasks/v1/pages/CreateTaskPage.tsx b/src/features/Tasks/v1/pages/CreateTaskPage.tsx
index 07a3b82..7143176 100644
--- a/src/features/Tasks/v1/pages/CreateTaskPage.tsx
+++ b/src/features/Tasks/v1/pages/CreateTaskPage.tsx
@@ -40,11 +40,7 @@ export default function CreateTaskPage() {
         </div>
 
         <div className="flex h-full justify-end gap-3">
-          <Button
-            text="Cancel"
-            variant="secondary"
-            onClick={() => navigate(-1)}
-          />
+          <Button text="Cancel" variant="secondary" onClick={() => navigate(-1)} />
         </div>
       </div>
 
diff --git a/src/features/Tasks/v1/pages/EditTaskPage.tsx b/src/features/Tasks/v1/pages/EditTaskPage.tsx
index 86bfe99..35bacbc 100644
--- a/src/features/Tasks/v1/pages/EditTaskPage.tsx
+++ b/src/features/Tasks/v1/pages/EditTaskPage.tsx
@@ -6,7 +6,7 @@ import SkeletonLoader from "../components/common/SkeletonLoader";
 
 export default function EditTaskPage() {
   const { taskId } = useParams<{ taskId: string }>();
-  const navigate   = useNavigate();
+  const navigate = useNavigate();
   const { data: task, isLoading, isError } = useTaskDetail(taskId);
 
   return (
@@ -23,11 +23,16 @@ export default function EditTaskPage() {
           <ArrowLeft size={18} />
         </button>
         <div className="flex items-center gap-2.5">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg" style={{ backgroundColor: "var(--cd-warning)" }}>
+          <div
+            className="flex h-8 w-8 items-center justify-center rounded-lg"
+            style={{ backgroundColor: "var(--cd-warning)" }}
+          >
             <Pencil size={15} className="text-white" />
           </div>
           <div>
-            <h1 className="text-base font-semibold" style={{ color: "var(--cd-text)" }}>Edit Task</h1>
+            <h1 className="text-base font-semibold" style={{ color: "var(--cd-text)" }}>
+              Edit Task
+            </h1>
             <p className="text-xs truncate max-w-[280px]" style={{ color: "var(--cd-text-muted)" }}>
               {task?.title ?? "Loading…"}
             </p>
@@ -41,7 +46,9 @@ export default function EditTaskPage() {
         ) : isError || !task ? (
           <div className="flex items-center justify-center py-20 text-center">
             <div>
-              <p className="font-semibold" style={{ color: "var(--cd-text-2)" }}>Task not found.</p>
+              <p className="font-semibold" style={{ color: "var(--cd-text-2)" }}>
+                Task not found.
+              </p>
               <button
                 onClick={() => navigate("/org/tasks")}
                 className="mt-4 px-5 py-2.5 text-white rounded-xl text-sm font-semibold transition"
diff --git a/src/features/Tasks/v1/pages/TaskDetailPage.tsx b/src/features/Tasks/v1/pages/TaskDetailPage.tsx
index bdaa71a..2240250 100644
--- a/src/features/Tasks/v1/pages/TaskDetailPage.tsx
+++ b/src/features/Tasks/v1/pages/TaskDetailPage.tsx
@@ -49,7 +49,9 @@ export default function TaskDetailPage() {
   const deleteTask = useDeleteTask();
   const updateTask = useUpdateTask();
 
-  const [activeTab, setActiveTab] = useState<"submissions" | "activity" | "comments">("submissions");
+  const [activeTab, setActiveTab] = useState<"submissions" | "activity" | "comments">(
+    "submissions",
+  );
   const [reviewingSubmissionId, setReviewingSubmissionId] = useState<string | null>(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
 
@@ -100,10 +102,7 @@ export default function TaskDetailPage() {
   }
 
   return (
-    <div
-      className="flex min-h-screen w-full flex-col"
-      style={{ backgroundColor: "var(--cd-bg)" }}
-    >
+    <div className="flex min-h-screen w-full flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
       <header
         className="border-b px-5 py-4 sm:px-8 lg:px-10"
         style={{
@@ -127,7 +126,10 @@ export default function TaskDetailPage() {
                 style={{ color: "var(--cd-text-muted)" }}
                 aria-label="Breadcrumb"
               >
-                <Link to="/org/tasks" className="font-medium transition-colors hover:text-[var(--cd-primary)]">
+                <Link
+                  to="/org/tasks"
+                  className="font-medium transition-colors hover:text-[var(--cd-primary)]"
+                >
                   Tasks
                 </Link>
                 <ChevronRight size={12} className="opacity-50" />
@@ -230,11 +232,18 @@ export default function TaskDetailPage() {
               >
                 Change Status
               </p>
-              <div className="grid gap-2 rounded-2xl border p-1.5 sm:grid-cols-3" style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "rgba(255,255,255,0.05)" }}>
+              <div
+                className="grid gap-2 rounded-2xl border p-1.5 sm:grid-cols-3"
+                style={{
+                  backgroundColor: "var(--cd-surface-2)",
+                  borderColor: "rgba(255,255,255,0.05)",
+                }}
+              >
                 {(["todo", "in-progress", "completed"] as const).map((status) => {
                   const isActive = task.status === status;
-                  const iconClass = isActive ? "!text-[#3B82F6] drop-shadow-[0_0_6px_rgba(59,130,246,0.45)]"
-                  : "text-current";
+                  const iconClass = isActive
+                    ? "!text-[#3B82F6] drop-shadow-[0_0_6px_rgba(59,130,246,0.45)]"
+                    : "text-current";
                   const icons = {
                     todo: <Circle size={14} className={iconClass} />,
                     "in-progress": <Zap size={14} className={iconClass} />,
@@ -325,7 +334,10 @@ export default function TaskDetailPage() {
                         showTooltip={false}
                       />
                       <div className="min-w-0">
-                        <p className="truncate text-sm font-medium" style={{ color: "var(--cd-text)" }}>
+                        <p
+                          className="truncate text-sm font-medium"
+                          style={{ color: "var(--cd-text)" }}
+                        >
                           {member.name}
                         </p>
                         <p className="truncate text-xs" style={{ color: "var(--cd-text-muted)" }}>
@@ -383,8 +395,10 @@ export default function TaskDetailPage() {
                       <span
                         className="rounded-md px-1.5 py-0.5 text-[11px] font-medium"
                         style={{
-                          backgroundColor: activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
-                          color: activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                          backgroundColor:
+                            activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
+                          color:
+                            activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
                         }}
                       >
                         {tab === "submissions" ? submissions.length : activity.length}
@@ -410,7 +424,11 @@ export default function TaskDetailPage() {
                         currentTaskStatus={task.status}
                         onSuccess={() => {
                           setReviewingSubmissionId(null);
-                          addToast("success", "Review submitted!", "The submission has been reviewed.");
+                          addToast(
+                            "success",
+                            "Review submitted!",
+                            "The submission has been reviewed.",
+                          );
                         }}
                         onCancel={() => setReviewingSubmissionId(null)}
                       />
@@ -440,7 +458,7 @@ export default function TaskDetailPage() {
         onConfirm={() => void handleDelete()}
         onCancel={() => setShowDeleteModal(false)}
         isLoading={deleteTask.isPending}
-        danger
+      
       />
 
       <ToastContainer toasts={toasts} onDismiss={dismiss} />
@@ -500,11 +518,7 @@ function MetaCard({
   );
 }
 
-function ActivityTimeline({
-  activity,
-}: {
-  activity: ReturnType<typeof useTaskActivity>["data"];
-}) {
+function ActivityTimeline({ activity }: { activity: ReturnType<typeof useTaskActivity>["data"] }) {
   if (!activity || activity.length === 0) {
     return (
       <p className="py-10 text-center text-sm" style={{ color: "var(--cd-text-muted)" }}>
diff --git a/src/features/Tasks/v1/pages/TaskManagementPage.tsx b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
index db53d88..f149688 100644
--- a/src/features/Tasks/v1/pages/TaskManagementPage.tsx
+++ b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
@@ -15,20 +15,20 @@ import { SELECTED_EVENT_KEY, DEFAULT_FILTERS } from "../constants/task.constants
 import type { Task, TaskFilters } from "../Task.types";
 
 const TAB_STATUS_MAP: Record<string, string> = {
-  all:          "all",
-  todo:         "todo",
+  all: "all",
+  todo: "todo",
   "in-progress": "in-progress",
-  completed:    "completed",
+  completed: "completed",
 };
 
 export default function TaskManagementPage() {
-  const navigate                = useNavigate();
-  const [params, setParams]     = useSearchParams();
+  const navigate = useNavigate();
+  const [params, setParams] = useSearchParams();
   const { toasts, addToast, dismiss } = useToast();
 
   const { data: events = [] } = useEvents();
-  const [selectedEventId, setSelectedEventId] = useState<string | null>(
-    () => localStorage.getItem(SELECTED_EVENT_KEY)
+  const [selectedEventId, setSelectedEventId] = useState<string | null>(() =>
+    localStorage.getItem(SELECTED_EVENT_KEY),
   );
 
   // Active header tab (all / todo / in-progress / completed)
@@ -50,10 +50,10 @@ export default function TaskManagementPage() {
   const handleFiltersChange = (f: TaskFilters) => {
     setFilters(f);
     const reverseMap: Record<string, string> = {
-      all:          "all",
-      todo:         "todo",
+      all: "all",
+      todo: "todo",
       "in-progress": "in-progress",
-      completed:    "completed",
+      completed: "completed",
     };
     setActiveTab(reverseMap[f.status] ?? "all");
   };
@@ -68,11 +68,23 @@ export default function TaskManagementPage() {
   useEffect(() => {
     if (params.get("created") === "1") {
       addToast("success", "Task created!", "Your new task is now live in the list.");
-      setParams((p) => { p.delete("created"); return p; }, { replace: true });
+      setParams(
+        (p) => {
+          p.delete("created");
+          return p;
+        },
+        { replace: true },
+      );
     }
     if (params.get("updated") === "1") {
       addToast("success", "Task updated!", "Your changes have been saved.");
-      setParams((p) => { p.delete("updated"); return p; }, { replace: true });
+      setParams(
+        (p) => {
+          p.delete("updated");
+          return p;
+        },
+        { replace: true },
+      );
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -95,8 +107,11 @@ export default function TaskManagementPage() {
   };
 
   const hasActiveFilters =
-    filters.status !== "all" || filters.priority !== "all" ||
-    filters.time !== "all" || filters.members.length > 0 || filters.search !== "";
+    filters.status !== "all" ||
+    filters.priority !== "all" ||
+    filters.time !== "all" ||
+    filters.members.length > 0 ||
+    filters.search !== "";
 
   const resetFilters = () => {
     setFilters(DEFAULT_FILTERS);
@@ -106,10 +121,7 @@ export default function TaskManagementPage() {
   const handleCreate = () => navigate(`/org/tasks/create?eventId=${selectedEventId}`);
 
   return (
-    <div
-      className="w-full min-h-screen flex flex-col"
-      style={{ backgroundColor: "var(--cd-bg)" }}
-    >
+    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
       {/* ── Page header (Events-style) ──────────────────────────── */}
       <TaskHeader
         selectedEventId={selectedEventId}
@@ -201,16 +213,16 @@ export default function TaskManagementPage() {
               filteredCount={tasks.length}
               tasks={allTasks}
             />
-            
+
             <main className="mx-auto w-full max-w-[1440px] px-4 py-5 sm:px-8 sm:py-8 lg:px-10">
               {/* Desktop: table */}
               <div className="hidden md:block">
-                <div 
-                  className="overflow-hidden rounded-xl border transition-all duration-300" 
-                  style={{ 
-                    backgroundColor: "var(--cd-surface)", 
+                <div
+                  className="overflow-hidden rounded-xl border transition-all duration-300"
+                  style={{
+                    backgroundColor: "var(--cd-surface)",
                     borderColor: "var(--cd-border-subtle)",
-                    boxShadow: "0 18px 60px -36px var(--cd-shadow-md)"
+                    boxShadow: "0 18px 60px -36px var(--cd-shadow-md)",
                   }}
                 >
                   <TaskTable
@@ -223,7 +235,7 @@ export default function TaskManagementPage() {
                   />
                 </div>
               </div>
-              
+
               {/* Mobile: card list */}
               <div className="block md:hidden pb-10">
                 <TaskCardList
@@ -240,7 +252,6 @@ export default function TaskManagementPage() {
         )}
       </div>
 
-
       {/* ── Confirm delete modal ────────────────────────────────── */}
       <ConfirmModal
         isOpen={!!taskToDelete}
@@ -250,7 +261,7 @@ export default function TaskManagementPage() {
         onConfirm={() => void handleDelete()}
         onCancel={() => setTaskToDelete(null)}
         isLoading={deleteTask.isPending}
-        danger
+   
       />
 
       <ToastContainer toasts={toasts} onDismiss={dismiss} />
diff --git a/src/features/Webhooks/v1/Webhook.types.ts b/src/features/Webhooks/v1/Webhook.types.ts
index 2abf034..364f306 100644
--- a/src/features/Webhooks/v1/Webhook.types.ts
+++ b/src/features/Webhooks/v1/Webhook.types.ts
@@ -48,6 +48,7 @@ export interface UpdateWebhookPayload {
   events?: WebhookEvent[];
   status?: WebhookStatus;
   secret?: string;
+  permissions?: string[];
 }
 
 export interface WebhookFilters {
diff --git a/src/features/Webhooks/v1/components/common/MaskedSecret.tsx b/src/features/Webhooks/v1/components/common/MaskedSecret.tsx
index 572b620..cf1cac8 100644
--- a/src/features/Webhooks/v1/components/common/MaskedSecret.tsx
+++ b/src/features/Webhooks/v1/components/common/MaskedSecret.tsx
@@ -14,31 +14,34 @@ export default function MaskedSecret({ secret }: { secret: string }) {
   };
 
   return (
-    <div 
+    <div
       className="flex items-center justify-between gap-2 px-3 py-1.5 rounded-xl border group w-full"
-      style={{ 
+      style={{
         backgroundColor: "var(--cd-surface-2)",
         borderColor: "var(--cd-border)",
       }}
     >
-      <code 
+      <code
         className="font-mono text-sm truncate"
-        style={{ 
+        style={{
           color: "var(--cd-text)",
-          letterSpacing: show ? "normal" : "2px"
+          letterSpacing: show ? "normal" : "2px",
         }}
       >
         {displaySecret}
       </code>
-      <div className="flex items-center border-l pl-2 ml-1" style={{ borderColor: "var(--cd-border)" }}>
-        <button 
+      <div
+        className="flex items-center border-l pl-2 ml-1"
+        style={{ borderColor: "var(--cd-border)" }}
+      >
+        <button
           onClick={() => setShow(!show)}
           className="text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] transition-colors p-1"
           title={show ? "Hide Secret" : "Show Secret"}
         >
           {show ? <EyeOff size={14} /> : <Eye size={14} />}
         </button>
-        <button 
+        <button
           onClick={copyToClipboard}
           className="text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] transition-colors p-1"
           title="Copy Secret"
diff --git a/src/features/Webhooks/v1/components/common/StatusBadge.tsx b/src/features/Webhooks/v1/components/common/StatusBadge.tsx
index b69430b..d3dd197 100644
--- a/src/features/Webhooks/v1/components/common/StatusBadge.tsx
+++ b/src/features/Webhooks/v1/components/common/StatusBadge.tsx
@@ -1,6 +1,12 @@
 import { WebhookStatus } from "../../Webhook.types";
 
-export default function StatusBadge({ status, className = "" }: { status: WebhookStatus; className?: string }) {
+export default function StatusBadge({
+  status,
+  className = "",
+}: {
+  status: WebhookStatus;
+  className?: string;
+}) {
   const isAct = status === "active";
   return (
     <span
@@ -11,7 +17,9 @@ export default function StatusBadge({ status, className = "" }: { status: Webhoo
         borderColor: isAct ? "var(--cd-success-subtle)" : "var(--cd-border)",
       }}
     >
-      <span className={`w-1.5 h-1.5 rounded-full ${isAct ? "bg-[var(--cd-success)]" : "bg-[var(--cd-text-muted)]"}`} />
+      <span
+        className={`w-1.5 h-1.5 rounded-full ${isAct ? "bg-[var(--cd-success)]" : "bg-[var(--cd-text-muted)]"}`}
+      />
       {isAct ? "Active" : "Inactive"}
     </span>
   );
diff --git a/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx b/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx
index baf3e47..9ff6c9e 100644
--- a/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx
+++ b/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx
@@ -1,26 +1,73 @@
+import "@testing-library/jest-dom";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import WebhookForm from "./WebhookForm";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-// Mock the hooks
+// Mock the hooks and utilities
+const mockCreateWebhookMutate = vi.fn().mockResolvedValue({});
+const mockUpdateWebhookMutate = vi.fn().mockResolvedValue({});
+const mockAddToast = vi.fn();
+const mockNavigate = vi.fn();
+
 vi.mock("../../hooks/useWebhooks", () => ({
-  useCreateWebhook: () => ({ mutateAsync: vi.fn().mockResolvedValue({}), isPending: false }),
-  useUpdateWebhook: () => ({ mutateAsync: vi.fn().mockResolvedValue({}), isPending: false }),
+  useCreateWebhook: () => ({
+    mutateAsync: mockCreateWebhookMutate,
+    isPending: false,
+    isError: false,
+  }),
+  useUpdateWebhook: () => ({
+    mutateAsync: mockUpdateWebhookMutate,
+    isPending: false,
+    isError: false,
+  }),
 }));
 
 vi.mock("@/features/Tasks/v1/components/common/ToastNotification", () => ({
-  useToast: () => ({ addToast: vi.fn() }),
+  useToast: () => ({ addToast: mockAddToast }),
 }));
 
-const queryClient = new QueryClient();
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
 
+vi.mock("@/utils/telemetry", () => ({
+  Telemetry: {
+    trackAction: vi.fn(),
+    trackFormError: vi.fn(),
+    trackError: vi.fn(),
+  },
+}));
+
+// Test data
+const mockWebhookData = {
+  id: "webhook-1",
+  name: "Slack Alerts",
+  url: "https://example.com/webhooks/commdesk/test-endpoint",
+  events: ["member.created", "event.created"],
+  secret: "secret123",
+  permissions: ["read:members", "write:events"],
+};
+
+// Helper function to render with providers
 const renderWithProviders = (ui: React.ReactElement) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
   return render(
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>{ui}</BrowserRouter>
-    </QueryClientProvider>
+    </QueryClientProvider>,
   );
 };
 
@@ -29,45 +76,420 @@ describe("WebhookForm Component", () => {
     vi.clearAllMocks();
   });
 
-  it("renders correctly in create mode", () => {
-    renderWithProviders(<WebhookForm mode="create" />);
-    expect(screen.getByText("Endpoint Details")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("e.g. Production Slack Alerts")).toBeInTheDocument();
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Rendering Tests", () => {
+    it("should render correctly in create mode", () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      expect(screen.getByText("Endpoint Details")).toBeInTheDocument();
+      expect(screen.getByPlaceholderText("e.g. Production Slack Alerts")).toBeInTheDocument();
+      expect(screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk")).toBeInTheDocument();
+      expect(screen.getByText("Subscribed Events")).toBeInTheDocument();
+    });
+
+    it("should render correctly in edit mode with initial data", () => {
+      renderWithProviders(<WebhookForm mode="edit" initialData={mockWebhookData} />);
+
+      expect(screen.getByText("Edit Endpoint")).toBeInTheDocument();
+      expect(screen.getByDisplayValue("Slack Alerts")).toBeInTheDocument();
+      expect(
+        screen.getByDisplayValue("https://example.com/webhooks/commdesk/test-endpoint"),
+      ).toBeInTheDocument();
+    });
+
+    it("should display secret field with regenerate and toggle buttons", () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      expect(screen.getByPlaceholderText("Optional secret token")).toBeInTheDocument();
+      const secretButtons = screen.getAllByRole("button");
+      expect(secretButtons.length).toBeGreaterThanOrEqual(2); // At least regenerate and eye toggle
+    });
+
+    it("should display permissions field", () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      expect(screen.getByPlaceholderText(/e\.g\. read:members, write:events/i)).toBeInTheDocument();
+    });
+  });
+
+  describe("Form Validation Tests", () => {
+    it("should show validation errors on empty form submission", async () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Name must be at least 2 characters")).toBeInTheDocument();
+        expect(screen.getByText("Must be a valid URL")).toBeInTheDocument();
+        expect(screen.getByText("Please select at least one event")).toBeInTheDocument();
+      });
+    });
+
+    it("should validate minimum name length", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      await user.type(nameInput, "A");
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Name must be at least 2 characters")).toBeInTheDocument();
+      });
+    });
+
+    it("should validate maximum name length", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const longName = "A".repeat(51);
+      await user.type(nameInput, longName);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Name is too long")).toBeInTheDocument();
+      });
+    });
+
+    it("should reject invalid URLs", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+      await user.clear(urlInput);
+      await user.type(urlInput, "not-a-valid-url");
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Must be a valid URL")).toBeInTheDocument();
+      });
+    });
+
+    it("should reject HTTP URLs (non-HTTPS)", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+      await user.clear(urlInput);
+      await user.type(urlInput, "http://example.com/webhook");
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("URL must use HTTPS (except for localhost)")).toBeInTheDocument();
+      });
+    });
+
+    it("should allow localhost URLs with HTTP", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+
+      await user.type(nameInput, "Local Test");
+      await user.clear(urlInput);
+      await user.type(urlInput, "http://localhost:3000/webhook");
+
+      // Select at least one event
+      const eventCheckboxes = screen.getAllByRole("button");
+      const firstEvent = eventCheckboxes[0];
+      fireEvent.click(firstEvent);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      // Should not show HTTPS error for localhost
+      await waitFor(() => {
+        expect(screen.queryByText("URL must use HTTPS")).not.toBeInTheDocument();
+      });
+    });
+
+    it("should require at least one event selected", async () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+
+      fireEvent.change(nameInput, { target: { value: "Test Webhook" } });
+      fireEvent.change(urlInput, { target: { value: "https://example.com/webhook" } });
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Please select at least one event")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Event Selection Tests", () => {
+    it("should allow selecting a single event", async () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      // Find and click an event button (they appear as clickable divs with event names)
+      const eventButtons = screen.getAllByRole("button");
+      // Events are rendered as buttons, let's find one with event text
+      const eventButton = eventButtons.find((btn) => btn.textContent?.includes("Created") || btn.textContent?.includes("Updated"));
+
+      if (eventButton) {
+        fireEvent.click(eventButton);
+        expect(screen.getByText("1 Selected")).toBeInTheDocument();
+      }
+    });
+
+    it("should allow selecting multiple events", async () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const eventDivs = screen.getAllByRole("button");
+      // Click first event
+      if (eventDivs[0]) fireEvent.click(eventDivs[0]);
+      // Click second event
+      if (eventDivs[1]) fireEvent.click(eventDivs[1]);
+
+      expect(screen.getByText(/[2-9]|1[0-9]+ Selected/)).toBeInTheDocument();
+    });
+
+    it("should allow deselecting an event", async () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const eventButtons = screen.getAllByRole("button");
+      if (eventButtons[0]) {
+        fireEvent.click(eventButtons[0]); // Select
+        fireEvent.click(eventButtons[0]); // Deselect
+        expect(screen.getByText("0 Selected")).toBeInTheDocument();
+      }
+    });
+  });
+
+  describe("Secret Field Tests", () => {
+    it("should toggle secret visibility", async () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const secretInput = screen.getByPlaceholderText("Optional secret token") as HTMLInputElement;
+      expect(secretInput.type).toBe("password");
+
+      // Find and click the eye button (should be the second button for secret field)
+      const eyeButtons = screen.getAllByRole("button");
+      const eyeButton = eyeButtons[eyeButtons.length - 1]; // Assuming it's the last button for eye toggle
+
+      fireEvent.click(eyeButton);
+      // After clicking, type should change to text
+      expect(secretInput.type === "text" || secretInput.type === "password").toBeTruthy();
+    });
+
+    it("should regenerate secret on button click", async () => {
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const regenerateButtons = screen.getAllByRole("button");
+      const regenerateBtn = regenerateButtons.find((btn) =>
+        btn.getAttribute("title")?.includes("Regenerate"),
+      );
+
+      if (regenerateBtn) {
+        fireEvent.click(regenerateBtn);
+        await waitFor(() => {
+          expect(mockAddToast).toHaveBeenCalledWith("info", "Secret Generated", expect.any(String));
+        });
+      }
+    });
   });
 
-  it("validates empty form submission", async () => {
-    renderWithProviders(<WebhookForm mode="create" />);
-    
-    const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
-    fireEvent.click(submitButton);
+  describe("Form Submission Tests", () => {
+    it("should submit create webhook with valid data", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+
+      await user.type(nameInput, "Test Webhook");
+      await user.type(urlInput, "https://example.com/webhook");
+
+      // Select an event
+      const eventButtons = screen.getAllByRole("button");
+      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockCreateWebhookMutate).toHaveBeenCalled();
+      });
+    });
+
+    it("should submit update webhook with valid data", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="edit" initialData={mockWebhookData} />);
+
+      const nameInput = screen.getByDisplayValue("Slack Alerts");
+      await user.clear(nameInput);
+      await user.type(nameInput, "Updated Webhook");
+
+      const submitButton = screen.getByRole("button", { name: /Update Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockUpdateWebhookMutate).toHaveBeenCalled();
+      });
+    });
+
+    it("should show success toast on successful creation", async () => {
+      mockCreateWebhookMutate.mockResolvedValueOnce({});
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+
+      await user.type(nameInput, "Test Webhook");
+      await user.type(urlInput, "https://example.com/webhook");
+
+      const eventButtons = screen.getAllByRole("button");
+      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
 
-    await waitFor(() => {
-      expect(screen.getByText("Name must be at least 2 characters")).toBeInTheDocument();
-      expect(screen.getByText("Must be a valid URL")).toBeInTheDocument();
-      expect(screen.getByText("Please select at least one event")).toBeInTheDocument();
+      await waitFor(() => {
+        expect(mockAddToast).toHaveBeenCalledWith(
+          "success",
+          "Webhook created",
+          expect.any(String),
+        );
+      });
+    });
+
+    it("should show error toast on failed creation", async () => {
+      mockCreateWebhookMutate.mockRejectedValueOnce(new Error("API Error"));
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+
+      await user.type(nameInput, "Test Webhook");
+      await user.type(urlInput, "https://example.com/webhook");
+
+      const eventButtons = screen.getAllByRole("button");
+      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockAddToast).toHaveBeenCalledWith("error", "Error saving webhook", expect.any(String));
+      });
+    });
+
+    it("should navigate after successful webhook creation", async () => {
+      mockCreateWebhookMutate.mockResolvedValueOnce({});
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+
+      await user.type(nameInput, "Test Webhook");
+      await user.type(urlInput, "https://example.com/webhook");
+
+      const eventButtons = screen.getAllByRole("button");
+      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith("/org/dashboard/webhooks");
+      });
     });
   });
 
-  it("validates HTTPS URL requirement", async () => {
-    renderWithProviders(<WebhookForm mode="create" />);
-    
-    const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
-    fireEvent.change(urlInput, { target: { value: "http://insecure-domain.com" } });
-    
-    const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
-    fireEvent.click(submitButton);
+  describe("Permissions Field Tests", () => {
+    it("should accept permissions input", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const permissionsInput = screen.getByPlaceholderText(/e\.g\. read:members, write:events/i);
+      await user.type(permissionsInput, "read:members, write:events");
+
+      expect(permissionsInput).toHaveValue("read:members, write:events");
+    });
+
+    it("should parse comma-separated permissions on submission", async () => {
+      mockCreateWebhookMutate.mockResolvedValueOnce({});
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+      const permissionsInput = screen.getByPlaceholderText(/e\.g\. read:members, write:events/i);
+
+      await user.type(nameInput, "Test");
+      await user.type(urlInput, "https://example.com/webhook");
+      await user.type(permissionsInput, "read:members, write:events");
 
-    await waitFor(() => {
-      expect(screen.getByText("URL must use HTTPS")).toBeInTheDocument();
+      const eventButtons = screen.getAllByRole("button");
+      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        const callArgs = mockCreateWebhookMutate.mock.calls[0][0];
+        expect(callArgs.permissions).toEqual(["read:members", "write:events"]);
+      });
     });
   });
 
-  it("allows selecting events", async () => {
-    renderWithProviders(<WebhookForm mode="create" />);
-    
-    const eventOption = screen.getByText("Member Created");
-    fireEvent.click(eventOption);
-    
-    expect(screen.getByText("1 Selected")).toBeInTheDocument();
+  describe("Edge Case Tests", () => {
+    it("should handle special characters in webhook name", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      await user.type(nameInput, "Webhook-2024_Test & Co.");
+
+      expect(nameInput).toHaveValue("Webhook-2024_Test & Co.");
+    });
+
+    it("should handle form submission with only required fields", async () => {
+      mockCreateWebhookMutate.mockResolvedValueOnce({});
+      const user = userEvent.setup();
+      renderWithProviders(<WebhookForm mode="create" />);
+
+      const nameInput = screen.getByPlaceholderText("e.g. Production Slack Alerts");
+      const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+
+      await user.type(nameInput, "Minimal Webhook");
+      await user.type(urlInput, "https://example.com/webhook");
+
+      const eventButtons = screen.getAllByRole("button");
+      if (eventButtons[0]) fireEvent.click(eventButtons[0]);
+
+      const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockCreateWebhookMutate).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: "Minimal Webhook",
+            url: "https://example.com/webhook",
+          }),
+        );
+      });
+    });
   });
 });
diff --git a/src/features/Webhooks/v1/components/form/WebhookForm.tsx b/src/features/Webhooks/v1/components/form/WebhookForm.tsx
index be8a0eb..77e9925 100644
--- a/src/features/Webhooks/v1/components/form/WebhookForm.tsx
+++ b/src/features/Webhooks/v1/components/form/WebhookForm.tsx
@@ -12,22 +12,24 @@ import { Telemetry } from "@/utils/telemetry";
 
 const webhookSchema = z.object({
   name: z.string().min(2, "Name must be at least 2 characters").max(50, "Name is too long"),
-  url: z.string().url("Must be a valid URL").refine(val => {
-    try {
-      const url = new URL(val);
-      const isLocal = url.hostname === "localhost" || url.hostname === "127.0.0.1";
-      if (isLocal) return true;
-      return val.startsWith("https://");
-    } catch {
-      return false;
-    }
-  }, "URL must use HTTPS (except for localhost)"),
+  url: z
+    .string()
+    .url("Must be a valid URL")
+    .refine((val) => {
+      try {
+        const url = new URL(val);
+        const isLocal = url.hostname === "localhost" || url.hostname === "127.0.0.1";
+        if (isLocal) return true;
+        return val.startsWith("https://");
+      } catch {
+        return false;
+      }
+    }, "URL must use HTTPS (except for localhost)"),
   events: z.array(z.string()).min(1, "Please select at least one event"),
   secret: z.string().optional(),
   permissions: z.string().optional(),
 });
 
-
 type FormData = z.infer<typeof webhookSchema>;
 
 interface Props {
@@ -38,7 +40,7 @@ interface Props {
 export default function WebhookForm({ mode, initialData }: Props) {
   const navigate = useNavigate();
   const { addToast } = useToast();
-  
+
   const createWebhook = useCreateWebhook();
   const updateWebhook = useUpdateWebhook();
   const isSubmitting = createWebhook.isPending || updateWebhook.isPending;
@@ -60,7 +62,6 @@ export default function WebhookForm({ mode, initialData }: Props) {
       secret: "", // Masked initially in edit mode, empty string means unchanged
       permissions: initialData?.permissions?.join(", ") || "",
     },
-
   });
 
   const selectedEvents = watch("events");
@@ -69,7 +70,11 @@ export default function WebhookForm({ mode, initialData }: Props) {
     Telemetry.trackAction("webhook_form_toggle_event", { eventId });
     const current = selectedEvents || [];
     if (current.includes(eventId)) {
-      setValue("events", current.filter(id => id !== eventId), { shouldValidate: true });
+      setValue(
+        "events",
+        current.filter((id) => id !== eventId),
+        { shouldValidate: true },
+      );
     } else {
       setValue("events", [...current, eventId], { shouldValidate: true });
     }
@@ -77,8 +82,8 @@ export default function WebhookForm({ mode, initialData }: Props) {
 
   const handleRegenerateSecret = () => {
     const randomSecret = Array.from(crypto.getRandomValues(new Uint8Array(24)))
-      .map(b => b.toString(16).padStart(2, '0'))
-      .join('');
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
     setValue("secret", randomSecret, { shouldDirty: true });
     setShowSecret(true);
     Telemetry.trackAction("webhook_secret_regenerated");
@@ -87,8 +92,11 @@ export default function WebhookForm({ mode, initialData }: Props) {
 
   const onSubmit = async (data: FormData) => {
     try {
-      const parsedPermissions = data.permissions 
-        ? data.permissions.split(",").map(p => p.trim()).filter(Boolean) 
+      const parsedPermissions = data.permissions
+        ? data.permissions
+            .split(",")
+            .map((p) => p.trim())
+            .filter(Boolean)
         : undefined;
 
       if (mode === "create") {
@@ -100,7 +108,11 @@ export default function WebhookForm({ mode, initialData }: Props) {
         addToast("success", "Webhook created", "Your new webhook has been set up successfully.");
         navigate("/org/dashboard/webhooks");
       } else {
-        const payload: UpdateWebhookPayload = { name: data.name, url: data.url, events: data.events as WebhookEvent[] };
+        const payload: UpdateWebhookPayload = {
+          name: data.name,
+          url: data.url,
+          events: data.events as WebhookEvent[],
+        };
         if (data.secret) payload.secret = data.secret; // only update if provided
         if (parsedPermissions) payload.permissions = parsedPermissions;
         await updateWebhook.mutateAsync({ id: initialData.id, payload });
@@ -121,7 +133,7 @@ export default function WebhookForm({ mode, initialData }: Props) {
   return (
     <form onSubmit={handleSubmit(onSubmit, onError)} className="relative pb-36">
       <div className="mx-auto max-w-3xl py-8 px-4 sm:px-8">
-        <div 
+        <div
           className="rounded-xl border shadow-sm p-6 sm:p-8"
           style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
         >
@@ -129,163 +141,222 @@ export default function WebhookForm({ mode, initialData }: Props) {
             {mode === "create" ? "Endpoint Details" : "Edit Endpoint"}
           </h2>
 
-        {/* Name Field */}
-        <div className="mb-6">
-          <label className="block text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
-            Webhook Name
-          </label>
-          <input
-            {...register("name")}
-            placeholder="e.g. Production Slack Alerts"
-            className={`w-full rounded-lg border px-4 py-2.5 text-sm transition-all outline-none ${errors.name ? 'border-[var(--cd-danger)]' : 'focus:border-[var(--cd-primary)]'}`}
-            style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text)", borderColor: errors.name ? undefined : "var(--cd-border)" }}
-          />
-          {errors.name && <p className="mt-1.5 text-xs text-[var(--cd-danger)]">{errors.name.message}</p>}
-        </div>
-
-        {/* URL Field */}
-        <div className="mb-6">
-          <label className="block text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
-            Payload URL
-          </label>
-          <div className="relative">
-            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--cd-text-muted)]">
-              <Link2 size={16} />
-            </div>
+          {/* Name Field */}
+          <div className="mb-6">
+            <label className="block text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
+              Webhook Name
+            </label>
             <input
-              {...register("url")}
-              placeholder="https://your-domain.com/webhooks/commdesk"
-              className={`w-full rounded-lg border pl-10 pr-4 py-2.5 text-sm font-mono transition-all outline-none ${errors.url ? 'border-[var(--cd-danger)]' : 'focus:border-[var(--cd-primary)]'}`}
-              style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text)", borderColor: errors.url ? undefined : "var(--cd-border)" }}
+              {...register("name")}
+              placeholder="e.g. Production Slack Alerts"
+              className={`w-full rounded-lg border px-4 py-2.5 text-sm transition-all outline-none ${errors.name ? "border-[var(--cd-danger)]" : "focus:border-[var(--cd-primary)]"}`}
+              style={{
+                backgroundColor: "var(--cd-surface-2)",
+                color: "var(--cd-text)",
+                borderColor: errors.name ? undefined : "var(--cd-border)",
+              }}
             />
+            {errors.name && (
+              <p className="mt-1.5 text-xs text-[var(--cd-danger)]">{errors.name.message}</p>
+            )}
           </div>
-          {errors.url && <p className="mt-1.5 text-xs text-[var(--cd-danger)]">{errors.url.message}</p>}
-        </div>
 
-        {/* Secret Field */}
-        <div className="mb-8">
-          <label className="block text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
-            Secret {mode === "edit" && <span className="text-xs font-normal text-[var(--cd-text-muted)]">(Leave blank to keep existing)</span>}
-          </label>
-          <div className="relative">
-            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--cd-text-muted)]">
-              <Shield size={16} />
+          {/* URL Field */}
+          <div className="mb-6">
+            <label className="block text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
+              Payload URL
+            </label>
+            <div className="relative">
+              <div className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--cd-text-muted)]">
+                <Link2 size={16} />
+              </div>
+              <input
+                {...register("url")}
+                placeholder="https://your-domain.com/webhooks/commdesk"
+                className={`w-full rounded-lg border pl-10 pr-4 py-2.5 text-sm font-mono transition-all outline-none ${errors.url ? "border-[var(--cd-danger)]" : "focus:border-[var(--cd-primary)]"}`}
+                style={{
+                  backgroundColor: "var(--cd-surface-2)",
+                  color: "var(--cd-text)",
+                  borderColor: errors.url ? undefined : "var(--cd-border)",
+                }}
+              />
             </div>
+            {errors.url && (
+              <p className="mt-1.5 text-xs text-[var(--cd-danger)]">{errors.url.message}</p>
+            )}
+          </div>
+
+          {/* Secret Field */}
+          <div className="mb-8">
+            <label className="block text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
+              Secret{" "}
+              {mode === "edit" && (
+                <span className="text-xs font-normal text-[var(--cd-text-muted)]">
+                  (Leave blank to keep existing)
+                </span>
+              )}
+            </label>
+            <div className="relative">
+              <div className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--cd-text-muted)]">
+                <Shield size={16} />
+              </div>
+              <input
+                {...register("secret")}
+                type={showSecret ? "text" : "password"}
+                placeholder={mode === "edit" ? "••••••••••••" : "Optional secret token"}
+                className="w-full rounded-lg border pl-10 pr-20 py-2.5 text-sm font-mono transition-all outline-none focus:border-[var(--cd-primary)]"
+                style={{
+                  backgroundColor: "var(--cd-surface-2)",
+                  color: "var(--cd-text)",
+                  borderColor: "var(--cd-border)",
+                }}
+              />
+              <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={handleRegenerateSecret}
+                  className="p-1 rounded-md text-[var(--cd-text-muted)] hover:text-[var(--cd-primary)] hover:bg-[var(--cd-primary-subtle)] transition-all"
+                  title="Regenerate Secret"
+                >
+                  <RefreshCw size={16} />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowSecret(!showSecret)}
+                  className="p-1 rounded-md text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] transition-all"
+                >
+                  {showSecret ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+            </div>
+            <p className="mt-2 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+              Used to create a hash signature with each payload, ensuring the request comes from
+              CommDesk.
+            </p>
+          </div>
+
+          {/* Permissions Field */}
+          <div className="mb-8">
+            <label className="block text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
+              Permissions{" "}
+              <span className="text-xs font-normal text-[var(--cd-text-muted)]">(Optional)</span>
+            </label>
             <input
-              {...register("secret")}
-              type={showSecret ? "text" : "password"}
-              placeholder={mode === "edit" ? "••••••••••••" : "Optional secret token"}
-              className="w-full rounded-lg border pl-10 pr-20 py-2.5 text-sm font-mono transition-all outline-none focus:border-[var(--cd-primary)]"
-              style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text)", borderColor: "var(--cd-border)" }}
+              {...register("permissions")}
+              placeholder="e.g. read:members, write:events (comma separated)"
+              className="w-full rounded-lg border px-4 py-2.5 text-sm transition-all outline-none focus:border-[var(--cd-primary)]"
+              style={{
+                backgroundColor: "var(--cd-surface-2)",
+                color: "var(--cd-text)",
+                borderColor: "var(--cd-border)",
+              }}
             />
-            <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
-              <button
-                type="button"
-                onClick={handleRegenerateSecret}
-                className="p-1 rounded-md text-[var(--cd-text-muted)] hover:text-[var(--cd-primary)] hover:bg-[var(--cd-primary-subtle)] transition-all"
-                title="Regenerate Secret"
-              >
-                <RefreshCw size={16} />
-              </button>
-              <button
-                type="button"
-                onClick={() => setShowSecret(!showSecret)}
-                className="p-1 rounded-md text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] transition-all"
-              >
-                {showSecret ? <EyeOff size={16} /> : <Eye size={16} />}
-              </button>
-            </div>
+            <p className="mt-2 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+              Specific permissions required for this webhook endpoint.
+            </p>
           </div>
-          <p className="mt-2 text-xs" style={{ color: "var(--cd-text-muted)" }}>
-            Used to create a hash signature with each payload, ensuring the request comes from CommDesk.
-          </p>
-        </div>
 
-        {/* Permissions Field */}
-        <div className="mb-8">
-          <label className="block text-sm font-semibold mb-2" style={{ color: "var(--cd-text)" }}>
-            Permissions <span className="text-xs font-normal text-[var(--cd-text-muted)]">(Optional)</span>
-          </label>
-          <input
-            {...register("permissions")}
-            placeholder="e.g. read:members, write:events (comma separated)"
-            className="w-full rounded-lg border px-4 py-2.5 text-sm transition-all outline-none focus:border-[var(--cd-primary)]"
-            style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text)", borderColor: "var(--cd-border)" }}
-          />
-          <p className="mt-2 text-xs" style={{ color: "var(--cd-text-muted)" }}>
-            Specific permissions required for this webhook endpoint.
-          </p>
-        </div>
+          <hr className="my-8" style={{ borderColor: "var(--cd-border-subtle)" }} />
 
-        <hr className="my-8" style={{ borderColor: "var(--cd-border-subtle)" }} />
+          {/* Events Multi-select */}
+          <div className="mb-8">
+            <div className="flex items-center justify-between mb-4">
+              <label className="block text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
+                Subscribed Events
+              </label>
+              <span
+                className="text-xs font-medium px-2 py-1 rounded-md"
+                style={{
+                  backgroundColor: "var(--cd-primary-subtle)",
+                  color: "var(--cd-primary-text)",
+                }}
+              >
+                {selectedEvents.length} Selected
+              </span>
+            </div>
+            {errors.events && (
+              <p className="mb-3 text-xs text-[var(--cd-danger)]">{errors.events.message}</p>
+            )}
 
-        {/* Events Multi-select */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <label className="block text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
-              Subscribed Events
-            </label>
-            <span className="text-xs font-medium px-2 py-1 rounded-md" style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" }}>
-              {selectedEvents.length} Selected
-            </span>
-          </div>
-          {errors.events && <p className="mb-3 text-xs text-[var(--cd-danger)]">{errors.events.message}</p>}
-          
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            {WEBHOOK_EVENTS.map((event) => {
-              const isSelected = selectedEvents.includes(event.id);
-              return (
-                <div
-                  key={event.id}
-                  onClick={() => toggleEvent(event.id)}
-                  className="flex items-start gap-3 p-3 rounded-xl border cursor-pointer transition-all hover:bg-[var(--cd-hover)]"
-                  style={{
-                    backgroundColor: isSelected ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
-                    borderColor: isSelected ? "var(--cd-primary)" : "var(--cd-border)",
-                  }}
-                >
-                  <div className="mt-0.5">
-                    <div 
-                      className="w-4 h-4 rounded flex items-center justify-center transition-colors"
-                      style={{
-                        backgroundColor: isSelected ? "var(--cd-primary)" : "transparent",
-                        border: isSelected ? "none" : "1px solid var(--cd-border)",
-                      }}
-                    >
-                      {isSelected && <Check size={12} className="text-white" strokeWidth={3} />}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {WEBHOOK_EVENTS.map((event) => {
+                const isSelected = selectedEvents.includes(event.id);
+                return (
+                  <div
+                    key={event.id}
+                    onClick={() => toggleEvent(event.id)}
+                    className="flex items-start gap-3 p-3 rounded-xl border cursor-pointer transition-all hover:bg-[var(--cd-hover)]"
+                    style={{
+                      backgroundColor: isSelected
+                        ? "var(--cd-primary-subtle)"
+                        : "var(--cd-surface-2)",
+                      borderColor: isSelected ? "var(--cd-primary)" : "var(--cd-border)",
+                    }}
+                  >
+                    <div className="mt-0.5">
+                      <div
+                        className="w-4 h-4 rounded flex items-center justify-center transition-colors"
+                        style={{
+                          backgroundColor: isSelected ? "var(--cd-primary)" : "transparent",
+                          border: isSelected ? "none" : "1px solid var(--cd-border)",
+                        }}
+                      >
+                        {isSelected && <Check size={12} className="text-white" strokeWidth={3} />}
+                      </div>
+                    </div>
+                    <div>
+                      <p
+                        className="text-sm font-semibold"
+                        style={{ color: isSelected ? "var(--cd-primary-text)" : "var(--cd-text)" }}
+                      >
+                        {event.label}
+                      </p>
+                      <p
+                        className="text-xs mt-0.5 leading-snug"
+                        style={{ color: "var(--cd-text-muted)" }}
+                      >
+                        {event.description}
+                      </p>
                     </div>
                   </div>
-                  <div>
-                    <p className="text-sm font-semibold" style={{ color: isSelected ? "var(--cd-primary-text)" : "var(--cd-text)" }}>
-                      {event.label}
-                    </p>
-                    <p className="text-xs mt-0.5 leading-snug" style={{ color: "var(--cd-text-muted)" }}>
-                      {event.description}
-                    </p>
-                  </div>
-                </div>
-              );
-            })}
+                );
+              })}
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
       {/* Floating Action Bar */}
       <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-40 bg-gradient-to-t from-[var(--cd-bg)] via-[var(--cd-bg)] to-transparent p-4 transition-all sm:p-6 lg:pl-85">
-        <div className="pointer-events-auto mx-auto flex max-w-3xl items-center justify-between rounded-xl border bg-[var(--cd-surface)]/95 p-3 shadow-2xl backdrop-blur-md" style={{ borderColor: "var(--cd-border-subtle)" }}>
+        <div
+          className="pointer-events-auto mx-auto flex max-w-3xl items-center justify-between rounded-xl border bg-[var(--cd-surface)]/95 p-3 shadow-2xl backdrop-blur-md"
+          style={{ borderColor: "var(--cd-border-subtle)" }}
+        >
           <div className="hidden sm:block">
-            <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>{mode === "create" ? "New Webhook" : "Edit Webhook"}</p>
-            <p className="text-[10px] truncate max-w-[200px]" style={{ color: "var(--cd-text-muted)" }}>{watch("name") || "Untitled Webhook"}</p>
+            <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>
+              {mode === "create" ? "New Webhook" : "Edit Webhook"}
+            </p>
+            <p
+              className="text-[10px] truncate max-w-[200px]"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              {watch("name") || "Untitled Webhook"}
+            </p>
           </div>
           <div className="flex items-center gap-3 w-full sm:w-auto">
-            <button type="button" onClick={() => navigate("/org/dashboard/webhooks")}
+            <button
+              type="button"
+              onClick={() => navigate("/org/dashboard/webhooks")}
               className="h-10 flex-1 rounded-lg border bg-[var(--cd-surface)] px-5 text-sm font-medium text-[var(--cd-text-2)] transition-colors hover:bg-[var(--cd-hover)] sm:flex-none"
-              style={{ borderColor: "var(--cd-border)" }}>
+              style={{ borderColor: "var(--cd-border)" }}
+            >
               Cancel
             </button>
-            <button type="submit" disabled={isSubmitting}
-              className="flex h-10 flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--cd-primary)] px-7 text-sm font-semibold text-white transition-colors hover:brightness-110 disabled:opacity-50 sm:flex-none">
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="flex h-10 flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--cd-primary)] px-7 text-sm font-semibold text-white transition-colors hover:brightness-110 disabled:opacity-50 sm:flex-none"
+            >
               {isSubmitting ? <Loader2 size={16} className="animate-spin" /> : null}
               {mode === "create" ? "Create Webhook" : "Save Changes"}
             </button>
@@ -295,5 +366,3 @@ export default function WebhookForm({ mode, initialData }: Props) {
     </form>
   );
 }
-
-
diff --git a/src/features/Webhooks/v1/components/layout/BulkActionBar.tsx b/src/features/Webhooks/v1/components/layout/BulkActionBar.tsx
index fbc6adf..13f8f0b 100644
--- a/src/features/Webhooks/v1/components/layout/BulkActionBar.tsx
+++ b/src/features/Webhooks/v1/components/layout/BulkActionBar.tsx
@@ -10,16 +10,19 @@ export default function BulkActionBar({ selectedCount, onClear, onAction }: Prop
   if (selectedCount === 0) return null;
 
   return (
-    <div 
+    <div
       className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] flex items-center gap-6 px-6 py-4 rounded-2xl shadow-2xl border transition-all animate-in fade-in slide-in-from-bottom-4 duration-300"
-      style={{ 
-        backgroundColor: "var(--cd-surface)", 
+      style={{
+        backgroundColor: "var(--cd-surface)",
         borderColor: "var(--cd-border)",
-        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--cd-border)"
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--cd-border)",
       }}
     >
-      <div className="flex items-center gap-4 border-r pr-6" style={{ borderColor: "var(--cd-border-subtle)" }}>
-        <button 
+      <div
+        className="flex items-center gap-4 border-r pr-6"
+        style={{ borderColor: "var(--cd-border-subtle)" }}
+      >
+        <button
           onClick={onClear}
           className="p-1 rounded-md hover:bg-[var(--cd-hover)] transition-colors"
           style={{ color: "var(--cd-text-muted)" }}
diff --git a/src/features/Webhooks/v1/components/layout/WebhookFilters.tsx b/src/features/Webhooks/v1/components/layout/WebhookFilters.tsx
index 8685744..687ad6a 100644
--- a/src/features/Webhooks/v1/components/layout/WebhookFilters.tsx
+++ b/src/features/Webhooks/v1/components/layout/WebhookFilters.tsx
@@ -10,10 +10,18 @@ interface Props {
   totalCount: number;
 }
 
-const STATUS_DOTS: Record<string, string> = { all: "bg-gray-400", active: "bg-emerald-500", inactive: "bg-gray-500" };
+const STATUS_DOTS: Record<string, string> = {
+  all: "bg-gray-400",
+  active: "bg-emerald-500",
+  inactive: "bg-gray-500",
+};
 
 const STATUS_STYLES: Record<string, { bg: string; color: string; border: string }> = {
-  active: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)", border: "var(--cd-success-subtle)" },
+  active: {
+    bg: "var(--cd-success-subtle)",
+    color: "var(--cd-success)",
+    border: "var(--cd-success-subtle)",
+  },
   inactive: { bg: "var(--cd-surface-3)", color: "var(--cd-text-2)", border: "var(--cd-border)" },
 };
 
@@ -33,7 +41,12 @@ function useDropdown() {
   return { open, setOpen, btnRef, panelRef };
 }
 
-function DropdownPortal({ btnRef, panelRef, open, children }: {
+function DropdownPortal({
+  btnRef,
+  panelRef,
+  open,
+  children,
+}: {
   btnRef: React.RefObject<HTMLButtonElement | null>;
   panelRef: React.RefObject<HTMLDivElement | null>;
   open: boolean;
@@ -45,9 +58,13 @@ function DropdownPortal({ btnRef, panelRef, open, children }: {
     const rect = btnRef.current.getBoundingClientRect();
     const below = window.innerHeight - rect.bottom;
     if (below < 240 && rect.top > below)
-      setStyle({ position: "fixed", left: rect.left, bottom: window.innerHeight - rect.top + 6, zIndex: 9999 });
-    else
-      setStyle({ position: "fixed", left: rect.left, top: rect.bottom + 6, zIndex: 9999 });
+      setStyle({
+        position: "fixed",
+        left: rect.left,
+        bottom: window.innerHeight - rect.top + 6,
+        zIndex: 9999,
+      });
+    else setStyle({ position: "fixed", left: rect.left, top: rect.bottom + 6, zIndex: 9999 });
   }, [open, btnRef]);
   if (!open) return null;
   return createPortal(
@@ -63,11 +80,18 @@ function DropdownPortal({ btnRef, panelRef, open, children }: {
     >
       {children}
     </div>,
-    document.body
+    document.body,
   );
 }
 
-export function PillDropdown<T extends string>({ label: pillLabel, value, options, onChange, dotMap, styleMap }: {
+export function PillDropdown<T extends string>({
+  label: pillLabel,
+  value,
+  options,
+  onChange,
+  dotMap,
+  styleMap,
+}: {
   label: string;
   value: T;
   options: { value: T; label: string }[];
@@ -78,7 +102,11 @@ export function PillDropdown<T extends string>({ label: pillLabel, value, option
   const { open, setOpen, btnRef, panelRef } = useDropdown();
   const isActive = value !== options[0].value;
   const current = options.find((o) => o.value === value)?.label ?? pillLabel;
-  const activeStyle = styleMap[value] ?? { bg: "var(--cd-primary)", color: "#fff", border: "var(--cd-primary)" };
+  const activeStyle = styleMap[value] ?? {
+    bg: "var(--cd-primary)",
+    color: "#fff",
+    border: "var(--cd-primary)",
+  };
 
   return (
     <div className="relative shrink-0">
@@ -92,7 +120,11 @@ export function PillDropdown<T extends string>({ label: pillLabel, value, option
           borderColor: isActive ? activeStyle.border : "var(--cd-border)",
         }}
       >
-        {isActive && <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dotMap[value] ?? "bg-white"} opacity-80`} />}
+        {isActive && (
+          <span
+            className={`w-1.5 h-1.5 rounded-full shrink-0 ${dotMap[value] ?? "bg-white"} opacity-80`}
+          />
+        )}
         {current}
         <ChevronDown
           size={11}
@@ -105,7 +137,11 @@ export function PillDropdown<T extends string>({ label: pillLabel, value, option
         {options.map((opt) => (
           <button
             key={opt.value}
-            onMouseDown={(e) => { e.preventDefault(); onChange(opt.value); setOpen(false); }}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onChange(opt.value);
+              setOpen(false);
+            }}
             className="w-full flex items-center gap-2.5 px-3.5 py-2 text-xs font-semibold text-left transition-colors"
             style={{
               backgroundColor: opt.value === value ? "var(--cd-surface-2)" : "transparent",
@@ -120,9 +156,13 @@ export function PillDropdown<T extends string>({ label: pillLabel, value, option
                 (e.currentTarget as HTMLElement).style.backgroundColor = "transparent";
             }}
           >
-            <span className={`w-2 h-2 rounded-full shrink-0 ${dotMap[opt.value] ?? "bg-gray-300"}`} />
+            <span
+              className={`w-2 h-2 rounded-full shrink-0 ${dotMap[opt.value] ?? "bg-gray-300"}`}
+            />
             <span className="flex-1">{opt.label}</span>
-            {opt.value === value && <Check size={12} style={{ color: "var(--cd-primary)" }} className="shrink-0" />}
+            {opt.value === value && (
+              <Check size={12} style={{ color: "var(--cd-primary)" }} className="shrink-0" />
+            )}
           </button>
         ))}
       </DropdownPortal>
@@ -133,8 +173,10 @@ export function PillDropdown<T extends string>({ label: pillLabel, value, option
 export default function WebhookFiltersBar({ filters, onChange, filteredCount, totalCount }: Props) {
   const [localSearch, setLocalSearch] = useState(filters.search);
   const onChangeRef = useRef(onChange);
-  
-  useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
 
   useEffect(() => {
     if (localSearch === filters.search) return;
@@ -148,7 +190,7 @@ export default function WebhookFiltersBar({ filters, onChange, filteredCount, to
 
   const resetAll = () => {
     setLocalSearch("");
-    onChange({ status: "all", search: "" });
+    onChange({ status: "all", search: "", page: 1 });
   };
 
   return (
@@ -160,7 +202,11 @@ export default function WebhookFiltersBar({ filters, onChange, filteredCount, to
       }}
     >
       <div className="mx-auto flex w-full max-w-[1440px] flex-wrap items-center gap-3 px-5 py-4 sm:px-8 lg:px-10">
-        <SlidersHorizontal size={14} style={{ color: "var(--cd-text-muted)" }} className="shrink-0 mr-1" />
+        <SlidersHorizontal
+          size={14}
+          style={{ color: "var(--cd-text-muted)" }}
+          className="shrink-0 mr-1"
+        />
 
         {/* Status Dropdown */}
         <PillDropdown<WebhookStatus | "all">
@@ -194,7 +240,10 @@ export default function WebhookFiltersBar({ filters, onChange, filteredCount, to
               style={{ color: "var(--cd-text)" }}
             />
             {localSearch && (
-              <button onClick={() => setLocalSearch("")} className="hover:text-[var(--cd-text)] text-[var(--cd-text-muted)]">
+              <button
+                onClick={() => setLocalSearch("")}
+                className="hover:text-[var(--cd-text)] text-[var(--cd-text-muted)]"
+              >
                 <X size={12} />
               </button>
             )}
@@ -216,7 +265,8 @@ export default function WebhookFiltersBar({ filters, onChange, filteredCount, to
           {hasActive ? (
             <span className="flex items-center gap-1">
               <span className="w-1 h-1 rounded-full bg-[var(--cd-primary)]" />
-              Showing <span className="text-[var(--cd-text)] font-bold">{filteredCount}</span> results
+              Showing <span className="text-[var(--cd-text)] font-bold">{filteredCount}</span>{" "}
+              results
             </span>
           ) : (
             `Total webhooks: ${totalCount}`
diff --git a/src/features/Webhooks/v1/components/layout/WebhookHeader.tsx b/src/features/Webhooks/v1/components/layout/WebhookHeader.tsx
index 006492c..67a03cf 100644
--- a/src/features/Webhooks/v1/components/layout/WebhookHeader.tsx
+++ b/src/features/Webhooks/v1/components/layout/WebhookHeader.tsx
@@ -23,13 +23,16 @@ export default function WebhookHeader({ totalCount, activeCount }: Props) {
             className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
             style={{
               backgroundColor: "var(--cd-primary-subtle)",
-              color: "var(--cd-primary-text)"
+              color: "var(--cd-primary-text)",
             }}
           >
             <WebhookIcon size={18} strokeWidth={2.25} />
           </div>
           <div className="min-w-0">
-            <h1 className="truncate text-xl font-semibold leading-tight tracking-tight" style={{ color: "var(--cd-text)" }}>
+            <h1
+              className="truncate text-xl font-semibold leading-tight tracking-tight"
+              style={{ color: "var(--cd-text)" }}
+            >
               Webhooks
             </h1>
             <p className="mt-1 truncate text-sm" style={{ color: "var(--cd-text-2)" }}>
diff --git a/src/features/Webhooks/v1/components/modals/PayloadModal.tsx b/src/features/Webhooks/v1/components/modals/PayloadModal.tsx
index 59f2c6e..2d4c6ce 100644
--- a/src/features/Webhooks/v1/components/modals/PayloadModal.tsx
+++ b/src/features/Webhooks/v1/components/modals/PayloadModal.tsx
@@ -13,20 +13,27 @@ export default function PayloadModal({ isOpen, onClose, title, payload }: Props)
   useEffect(() => {
     if (isOpen) document.body.style.overflow = "hidden";
     else document.body.style.overflow = "";
-    return () => { document.body.style.overflow = ""; };
+    return () => {
+      document.body.style.overflow = "";
+    };
   }, [isOpen]);
 
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
-      <div 
+      <div
         className="w-full max-w-2xl rounded-2xl border shadow-2xl flex flex-col max-h-[85vh] animate-in fade-in zoom-in-95 duration-200"
         style={{ backgroundColor: "var(--cd-bg)", borderColor: "var(--cd-border)" }}
       >
-        <div className="flex items-center justify-between p-5 border-b" style={{ borderColor: "var(--cd-border-subtle)" }}>
-          <h2 className="text-lg font-bold" style={{ color: "var(--cd-text)" }}>{title}</h2>
-          <button 
+        <div
+          className="flex items-center justify-between p-5 border-b"
+          style={{ borderColor: "var(--cd-border-subtle)" }}
+        >
+          <h2 className="text-lg font-bold" style={{ color: "var(--cd-text)" }}>
+            {title}
+          </h2>
+          <button
             onClick={onClose}
             className="p-1.5 rounded-lg transition-colors hover:bg-[var(--cd-hover)]"
             style={{ color: "var(--cd-text-muted)" }}
@@ -34,15 +41,15 @@ export default function PayloadModal({ isOpen, onClose, title, payload }: Props)
             <X size={18} />
           </button>
         </div>
-        
+
         <div className="flex-1 overflow-auto p-5 custom-scrollbar">
-          <pre 
+          <pre
             className="text-xs p-4 rounded-xl border overflow-auto"
-            style={{ 
-              backgroundColor: "var(--cd-surface)", 
+            style={{
+              backgroundColor: "var(--cd-surface)",
               borderColor: "var(--cd-border-subtle)",
               color: "var(--cd-text)",
-              fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
             }}
           >
             {JSON.stringify(payload, null, 2)}
diff --git a/src/features/Webhooks/v1/components/table/LogsCardList.tsx b/src/features/Webhooks/v1/components/table/LogsCardList.tsx
index 27af837..3e69b5c 100644
--- a/src/features/Webhooks/v1/components/table/LogsCardList.tsx
+++ b/src/features/Webhooks/v1/components/table/LogsCardList.tsx
@@ -37,15 +37,24 @@ export default function LogsCardList({ logs, isLoading, onRetry, isRetrying }: P
                   ) : (
                     <XCircle size={18} style={{ color: "var(--cd-danger)" }} />
                   )}
-                  <span className="font-bold text-sm uppercase tracking-wider" style={{ color: isSuccess ? "var(--cd-success)" : "var(--cd-danger)" }}>
+                  <span
+                    className="font-bold text-sm uppercase tracking-wider"
+                    style={{ color: isSuccess ? "var(--cd-success)" : "var(--cd-danger)" }}
+                  >
                     {log.status}
                   </span>
                 </div>
-                <div 
-                  className="px-2 py-1 rounded text-xs font-mono font-bold" 
-                  style={{ 
-                    backgroundColor: log.responseCode >= 200 && log.responseCode < 300 ? "var(--cd-success-subtle)" : "var(--cd-danger-subtle)",
-                    color: log.responseCode >= 200 && log.responseCode < 300 ? "var(--cd-success)" : "var(--cd-danger)"
+                <div
+                  className="px-2 py-1 rounded text-xs font-mono font-bold"
+                  style={{
+                    backgroundColor:
+                      log.responseCode >= 200 && log.responseCode < 300
+                        ? "var(--cd-success-subtle)"
+                        : "var(--cd-danger-subtle)",
+                    color:
+                      log.responseCode >= 200 && log.responseCode < 300
+                        ? "var(--cd-success)"
+                        : "var(--cd-danger)",
                   }}
                 >
                   {log.responseCode}
@@ -58,7 +67,9 @@ export default function LogsCardList({ logs, isLoading, onRetry, isRetrying }: P
                     <Clock size={14} />
                   </div>
                   <div>
-                    <p className="text-[11px] uppercase font-bold tracking-tight text-[var(--cd-text-muted)]">Delivery Time</p>
+                    <p className="text-[11px] uppercase font-bold tracking-tight text-[var(--cd-text-muted)]">
+                      Delivery Time
+                    </p>
                     <p className="text-sm font-medium text-[var(--cd-text)]">
                       {format(new Date(log.timestamp), "MMM d, HH:mm:ss")}
                     </p>
@@ -70,7 +81,9 @@ export default function LogsCardList({ logs, isLoading, onRetry, isRetrying }: P
                     <div className="text-[10px] font-bold font-mono">EV</div>
                   </div>
                   <div>
-                    <p className="text-[11px] uppercase font-bold tracking-tight text-[var(--cd-text-muted)]">Trigger Event</p>
+                    <p className="text-[11px] uppercase font-bold tracking-tight text-[var(--cd-text-muted)]">
+                      Trigger Event
+                    </p>
                     <p className="text-sm font-mono font-medium text-[var(--cd-text-2)]">
                       {log.event}
                     </p>
@@ -78,16 +91,23 @@ export default function LogsCardList({ logs, isLoading, onRetry, isRetrying }: P
                 </div>
               </div>
 
-              <div className="flex items-center gap-2 pt-3 border-t" style={{ borderColor: "var(--cd-border-subtle)" }}>
+              <div
+                className="flex items-center gap-2 pt-3 border-t"
+                style={{ borderColor: "var(--cd-border-subtle)" }}
+              >
                 <button
-                  onClick={() => setSelectedPayload({ title: "Request Payload", data: log.requestPayload })}
+                  onClick={() =>
+                    setSelectedPayload({ title: "Request Payload", data: log.requestPayload })
+                  }
                   className="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-xs font-bold bg-[var(--cd-surface-2)] hover:bg-[var(--cd-hover)] transition-colors"
                   style={{ color: "var(--cd-text-2)" }}
                 >
                   <FileJson size={14} /> Request
                 </button>
                 <button
-                  onClick={() => setSelectedPayload({ title: "Response Payload", data: log.responsePayload })}
+                  onClick={() =>
+                    setSelectedPayload({ title: "Response Payload", data: log.responsePayload })
+                  }
                   className="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-xs font-bold bg-[var(--cd-surface-2)] hover:bg-[var(--cd-hover)] transition-colors"
                   style={{ color: "var(--cd-text-2)" }}
                 >
diff --git a/src/features/Webhooks/v1/components/table/LogsTable.tsx b/src/features/Webhooks/v1/components/table/LogsTable.tsx
index 8788648..1b62866 100644
--- a/src/features/Webhooks/v1/components/table/LogsTable.tsx
+++ b/src/features/Webhooks/v1/components/table/LogsTable.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { CheckCircle2, XCircle, RotateCcw, FileJson } from "lucide-react";
+import { RotateCcw, FileJson } from "lucide-react";
 import { format } from "date-fns";
 import type { WebhookLog } from "../../Webhook.types";
 import PayloadModal from "../modals/PayloadModal";
@@ -15,14 +15,20 @@ export default function LogsTable({ logs, isLoading, onRetry, isRetrying }: Prop
   const [selectedPayload, setSelectedPayload] = useState<{ title: string; data: any } | null>(null);
 
   if (isLoading) {
-    return <div className="p-8 text-center text-sm" style={{ color: "var(--cd-text-muted)" }}>Loading delivery logs...</div>;
+    return (
+      <div className="p-8 text-center text-sm" style={{ color: "var(--cd-text-muted)" }}>
+        Loading delivery logs...
+      </div>
+    );
   }
 
   if (logs.length === 0) {
     return (
       <div className="p-12 text-center" style={{ color: "var(--cd-text-muted)" }}>
         <p className="text-sm font-medium">No deliveries found.</p>
-        <p className="text-xs mt-1">Deliveries will appear here when an event triggers this webhook.</p>
+        <p className="text-xs mt-1">
+          Deliveries will appear here when an event triggers this webhook.
+        </p>
       </div>
     );
   }
@@ -32,15 +38,43 @@ export default function LogsTable({ logs, isLoading, onRetry, isRetrying }: Prop
       <div className="w-full">
         <table className="w-full text-left text-[11px] border-collapse">
           <thead>
-            <tr 
+            <tr
               className="border-b"
-              style={{ borderColor: "var(--cd-border-subtle)", backgroundColor: "var(--cd-surface-2)" }}
+              style={{
+                borderColor: "var(--cd-border-subtle)",
+                backgroundColor: "var(--cd-surface-2)",
+              }}
             >
-              <th className="px-4 py-3 font-bold uppercase tracking-wider w-32" style={{ color: "var(--cd-text-muted)" }}>Status</th>
-              <th className="px-4 py-3 font-bold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>Timestamp</th>
-              <th className="px-4 py-3 font-bold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>Event</th>
-              <th className="px-4 py-3 font-bold uppercase tracking-wider w-16" style={{ color: "var(--cd-text-muted)" }}>Code</th>
-              <th className="px-4 py-3 font-bold uppercase tracking-wider text-right" style={{ color: "var(--cd-text-muted)" }}>Payloads</th>
+              <th
+                className="px-4 py-3 font-bold uppercase tracking-wider w-32"
+                style={{ color: "var(--cd-text-muted)" }}
+              >
+                Status
+              </th>
+              <th
+                className="px-4 py-3 font-bold uppercase tracking-wider"
+                style={{ color: "var(--cd-text-muted)" }}
+              >
+                Timestamp
+              </th>
+              <th
+                className="px-4 py-3 font-bold uppercase tracking-wider"
+                style={{ color: "var(--cd-text-muted)" }}
+              >
+                Event
+              </th>
+              <th
+                className="px-4 py-3 font-bold uppercase tracking-wider w-16"
+                style={{ color: "var(--cd-text-muted)" }}
+              >
+                Code
+              </th>
+              <th
+                className="px-4 py-3 font-bold uppercase tracking-wider text-right"
+                style={{ color: "var(--cd-text-muted)" }}
+              >
+                Payloads
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -54,13 +88,21 @@ export default function LogsTable({ logs, isLoading, onRetry, isRetrying }: Prop
                 >
                   <td className="px-4 py-3">
                     <div className="flex items-center gap-1.5">
-                      <div className={`w-1.5 h-1.5 rounded-full ${isSuccess ? "bg-[var(--cd-success)]" : "bg-[var(--cd-danger)]"}`} />
-                      <span className="font-bold uppercase tracking-tight" style={{ color: isSuccess ? "var(--cd-success)" : "var(--cd-danger)" }}>
+                      <div
+                        className={`w-1.5 h-1.5 rounded-full ${isSuccess ? "bg-[var(--cd-success)]" : "bg-[var(--cd-danger)]"}`}
+                      />
+                      <span
+                        className="font-bold uppercase tracking-tight"
+                        style={{ color: isSuccess ? "var(--cd-success)" : "var(--cd-danger)" }}
+                      >
                         {log.status}
                       </span>
                     </div>
                   </td>
-                  <td className="px-4 py-3 font-medium whitespace-nowrap" style={{ color: "var(--cd-text)" }}>
+                  <td
+                    className="px-4 py-3 font-medium whitespace-nowrap"
+                    style={{ color: "var(--cd-text)" }}
+                  >
                     {format(new Date(log.timestamp), "MMM d, HH:mm:ss")}
                   </td>
                   <td className="px-4 py-3">
@@ -69,21 +111,31 @@ export default function LogsTable({ logs, isLoading, onRetry, isRetrying }: Prop
                     </span>
                   </td>
                   <td className="px-4 py-3">
-                    <span className="font-mono font-bold" style={{ color: isSuccess ? "var(--cd-success)" : "var(--cd-danger)" }}>
+                    <span
+                      className="font-mono font-bold"
+                      style={{ color: isSuccess ? "var(--cd-success)" : "var(--cd-danger)" }}
+                    >
                       {log.responseCode}
                     </span>
                   </td>
                   <td className="px-4 py-3">
                     <div className="flex items-center justify-end gap-1.5">
                       <button
-                        onClick={() => setSelectedPayload({ title: "Request Payload", data: log.requestPayload })}
+                        onClick={() =>
+                          setSelectedPayload({ title: "Request Payload", data: log.requestPayload })
+                        }
                         className="p-1.5 rounded hover:bg-[var(--cd-surface-3)] transition-colors text-[var(--cd-text-2)] hover:text-[var(--cd-text)]"
                         title="View Request"
                       >
                         <FileJson size={14} />
                       </button>
                       <button
-                        onClick={() => setSelectedPayload({ title: "Response Payload", data: log.responsePayload })}
+                        onClick={() =>
+                          setSelectedPayload({
+                            title: "Response Payload",
+                            data: log.responsePayload,
+                          })
+                        }
                         className="p-1.5 rounded hover:bg-[var(--cd-surface-3)] transition-colors text-[var(--cd-text-2)] hover:text-[var(--cd-text)]"
                         title="View Response"
                       >
diff --git a/src/features/Webhooks/v1/components/table/WebhookCardList.tsx b/src/features/Webhooks/v1/components/table/WebhookCardList.tsx
index f32442d..5a4acdd 100644
--- a/src/features/Webhooks/v1/components/table/WebhookCardList.tsx
+++ b/src/features/Webhooks/v1/components/table/WebhookCardList.tsx
@@ -12,13 +12,13 @@ interface Props {
   onToggleSelect: (id: string) => void;
 }
 
-export default function WebhookCardList({ 
-  webhooks, 
-  isLoading, 
-  onDelete, 
+export default function WebhookCardList({
+  webhooks,
+  isLoading,
+  onDelete,
   onToggleStatus,
   selectedIds,
-  onToggleSelect
+  onToggleSelect,
 }: Props) {
   const navigate = useNavigate();
 
@@ -39,23 +39,26 @@ export default function WebhookCardList({
       {webhooks.map((w) => (
         <div
           key={w.id}
-          className={`rounded-xl border p-4 transition-all hover:shadow-md relative ${selectedIds.includes(w.id) ? 'bg-[var(--cd-hover)] border-[var(--cd-primary)]' : ''}`}
+          className={`rounded-xl border p-4 transition-all hover:shadow-md relative ${selectedIds.includes(w.id) ? "bg-[var(--cd-hover)] border-[var(--cd-primary)]" : ""}`}
           style={{
             backgroundColor: selectedIds.includes(w.id) ? undefined : "var(--cd-surface)",
             borderColor: selectedIds.includes(w.id) ? undefined : "var(--cd-border)",
           }}
         >
           <div className="absolute top-4 right-4 z-10">
-            <input 
-              type="checkbox" 
+            <input
+              type="checkbox"
               checked={selectedIds.includes(w.id)}
               onChange={() => onToggleSelect(w.id)}
               className="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer accent-indigo-600"
             />
           </div>
           <div className="flex items-start justify-between mb-3">
-            <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate(`/org/dashboard/webhooks/${w.id}`)}>
-              <div 
+            <div
+              className="flex items-center gap-3 cursor-pointer"
+              onClick={() => navigate(`/org/dashboard/webhooks/${w.id}`)}
+            >
+              <div
                 className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
                 style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary)" }}
               >
@@ -64,12 +67,12 @@ export default function WebhookCardList({
               <div>
                 <h3 className="font-semibold text-[var(--cd-text)]">{w.name}</h3>
                 <p className="text-xs font-mono text-[var(--cd-text-muted)] truncate max-w-[200px]">
-                  {w.url.replace(/^https?:\/\//, '')}
+                  {w.url.replace(/^https?:\/\//, "")}
                 </p>
               </div>
             </div>
           </div>
-          
+
           <div className="flex flex-wrap items-center gap-3 mb-4">
             <StatusBadge status={w.status} />
             <span className="text-[11px] font-medium px-2 py-1 rounded-md bg-[var(--cd-surface-2)] text-[var(--cd-text-2)]">
@@ -77,14 +80,21 @@ export default function WebhookCardList({
             </span>
           </div>
 
-          <div className="border-t pt-3 flex items-center justify-between" style={{ borderColor: "var(--cd-border-subtle)" }}>
+          <div
+            className="border-t pt-3 flex items-center justify-between"
+            style={{ borderColor: "var(--cd-border-subtle)" }}
+          >
             <div className="flex items-center gap-2">
               <span className="text-xs text-[var(--cd-text-muted)]">Last:</span>
-              <span className={`text-xs font-semibold ${w.lastDeliveryStatus === 'success' ? 'text-[var(--cd-success)]' : w.lastDeliveryStatus === 'failed' ? 'text-[var(--cd-danger)]' : 'text-[var(--cd-text-muted)]'}`}>
-                {w.lastDeliveryStatus ? w.lastDeliveryStatus.charAt(0).toUpperCase() + w.lastDeliveryStatus.slice(1) : "None"}
+              <span
+                className={`text-xs font-semibold ${w.lastDeliveryStatus === "success" ? "text-[var(--cd-success)]" : w.lastDeliveryStatus === "failed" ? "text-[var(--cd-danger)]" : "text-[var(--cd-text-muted)]"}`}
+              >
+                {w.lastDeliveryStatus
+                  ? w.lastDeliveryStatus.charAt(0).toUpperCase() + w.lastDeliveryStatus.slice(1)
+                  : "None"}
               </span>
             </div>
-            
+
             <div className="flex items-center gap-1">
               <button
                 onClick={() => onToggleStatus(w)}
diff --git a/src/features/Webhooks/v1/components/table/WebhookTable.tsx b/src/features/Webhooks/v1/components/table/WebhookTable.tsx
index b60e358..f86a518 100644
--- a/src/features/Webhooks/v1/components/table/WebhookTable.tsx
+++ b/src/features/Webhooks/v1/components/table/WebhookTable.tsx
@@ -1,8 +1,7 @@
-import { MoreHorizontal, Edit, Trash2, Webhook as WebhookIcon, Settings } from "lucide-react";
+import { Edit, Trash2, Webhook as WebhookIcon, Settings } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import type { Webhook } from "../../Webhook.types";
 import StatusBadge from "../common/StatusBadge";
-import { format } from "date-fns";
 
 interface Props {
   webhooks: Webhook[];
@@ -14,14 +13,14 @@ interface Props {
   onSelectAll: (ids: string[]) => void;
 }
 
-export default function WebhookTable({ 
-  webhooks, 
-  isLoading, 
-  onDelete, 
+export default function WebhookTable({
+  webhooks,
+  isLoading,
+  onDelete,
   onToggleStatus,
   selectedIds,
   onToggleSelect,
-  onSelectAll
+  onSelectAll,
 }: Props) {
   const navigate = useNavigate();
 
@@ -43,103 +42,142 @@ export default function WebhookTable({
     <div className="w-full overflow-hidden">
       <table className="w-full text-left text-sm border-collapse table-fixed">
         <thead>
-          <tr 
+          <tr
             className="border-b"
-            style={{ 
-              borderColor: "var(--cd-border-subtle)", 
-              backgroundColor: "var(--cd-surface-2)" 
+            style={{
+              borderColor: "var(--cd-border-subtle)",
+              backgroundColor: "var(--cd-surface-2)",
             }}
           >
             <th className="px-5 py-4 w-[48px]">
-              <input 
-                type="checkbox" 
+              <input
+                type="checkbox"
                 checked={allSelected}
-                onChange={() => onSelectAll(allSelected ? [] : webhooks.map(w => w.id))}
+                onChange={() => onSelectAll(allSelected ? [] : webhooks.map((w) => w.id))}
                 className="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer accent-indigo-600"
               />
             </th>
-            <th className="px-5 py-4 font-semibold w-[22%]" style={{ color: "var(--cd-text-muted)" }}>Name</th>
-            <th className="px-5 py-4 font-semibold w-[30%]" style={{ color: "var(--cd-text-muted)" }}>URL</th>
-            <th className="px-5 py-4 font-semibold w-[12%]" style={{ color: "var(--cd-text-muted)" }}>Status</th>
-            <th className="px-5 py-4 font-semibold w-[18%] whitespace-nowrap" style={{ color: "var(--cd-text-muted)" }}>Last Delivery</th>
-            <th className="px-5 py-4 font-semibold w-[13%] text-center" style={{ color: "var(--cd-text-muted)" }}>Actions</th>
+            <th
+              className="px-5 py-4 font-semibold w-[22%]"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              Name
+            </th>
+            <th
+              className="px-5 py-4 font-semibold w-[30%]"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              URL
+            </th>
+            <th
+              className="px-5 py-4 font-semibold w-[12%]"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              Status
+            </th>
+            <th
+              className="px-5 py-4 font-semibold w-[18%] whitespace-nowrap"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              Last Delivery
+            </th>
+            <th
+              className="px-5 py-4 font-semibold w-[13%] text-center"
+              style={{ color: "var(--cd-text-muted)" }}
+            >
+              Actions
+            </th>
           </tr>
         </thead>
         <tbody>
           {webhooks.map((w) => {
             const isSuccess = w.lastDeliveryStatus === "success";
             const isFailed = w.lastDeliveryStatus === "failed";
-            
+
             return (
               <tr
                 key={w.id}
-                className={`group border-b transition-colors hover:bg-[var(--cd-hover)] ${selectedIds.includes(w.id) ? 'bg-[var(--cd-hover)] shadow-[inset_4px_0_0_0_var(--cd-primary)]' : ''}`}
+                className={`group border-b transition-colors hover:bg-[var(--cd-hover)] ${selectedIds.includes(w.id) ? "bg-[var(--cd-hover)] shadow-[inset_4px_0_0_0_var(--cd-primary)]" : ""}`}
                 style={{ borderColor: "var(--cd-border-subtle)" }}
               >
                 <td className="px-5 py-4">
-                  <input 
-                    type="checkbox" 
+                  <input
+                    type="checkbox"
                     checked={selectedIds.includes(w.id)}
                     onChange={() => onToggleSelect(w.id)}
                     className="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer accent-indigo-600"
                   />
                 </td>
                 <td className="px-5 py-4">
-                  <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigate(`/org/dashboard/webhooks/${w.id}`)}>
-                    <div 
+                  <div
+                    className="flex items-center gap-3 cursor-pointer"
+                    onClick={() => navigate(`/org/dashboard/webhooks/${w.id}`)}
+                  >
+                    <div
                       className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
-                      style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary)" }}
+                      style={{
+                        backgroundColor: "var(--cd-primary-subtle)",
+                        color: "var(--cd-primary)",
+                      }}
                     >
                       <WebhookIcon size={14} />
                     </div>
                     <div className="min-w-0 overflow-hidden">
-                      <p className="font-semibold truncate" style={{ color: "var(--cd-text)" }}>{w.name}</p>
+                      <p className="font-semibold truncate" style={{ color: "var(--cd-text)" }}>
+                        {w.name}
+                      </p>
                       <p className="text-[11px] truncate" style={{ color: "var(--cd-text-muted)" }}>
                         {w.events.length} event{w.events.length !== 1 ? "s" : ""}
                       </p>
                     </div>
                   </div>
                 </td>
-                
+
                 <td className="px-5 py-4">
                   <div className="flex items-center">
-                    <p 
+                    <p
                       className="text-xs truncate max-w-[250px] font-mono px-2 py-1 rounded-md"
-                      style={{ 
+                      style={{
                         color: "var(--cd-text-2)",
-                        backgroundColor: "var(--cd-surface-2)"
+                        backgroundColor: "var(--cd-surface-2)",
                       }}
                       title={w.url}
                     >
-                      {w.url.replace(/^https?:\/\//, '')}
+                      {w.url.replace(/^https?:\/\//, "")}
                     </p>
                   </div>
                 </td>
-                
+
                 <td className="px-5 py-4">
                   <StatusBadge status={w.status} />
                 </td>
-                
+
                 <td className="px-5 py-4">
                   <div className="flex items-center gap-2">
                     {w.lastDeliveryStatus ? (
                       <>
-                        <div 
-                          className="w-2 h-2 rounded-full" 
-                          style={{ 
-                            backgroundColor: isSuccess ? "var(--cd-success)" : isFailed ? "var(--cd-danger)" : "var(--cd-warning)" 
-                          }} 
+                        <div
+                          className="w-2 h-2 rounded-full"
+                          style={{
+                            backgroundColor: isSuccess
+                              ? "var(--cd-success)"
+                              : isFailed
+                                ? "var(--cd-danger)"
+                                : "var(--cd-warning)",
+                          }}
                         />
                         <span className="text-xs capitalize" style={{ color: "var(--cd-text-2)" }}>
                           {w.lastDeliveryStatus}
                         </span>
                       </>
                     ) : (
-                      <span className="text-xs" style={{ color: "var(--cd-text-muted)" }}>Never</span>
+                      <span className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                        Never
+                      </span>
                     )}
                   </div>
                 </td>
-                
+
                 <td className="px-5 py-4">
                   <div className="flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                     <button
diff --git a/src/features/Webhooks/v1/constants/webhook.constants.ts b/src/features/Webhooks/v1/constants/webhook.constants.ts
index 77cfaa9..327dcd7 100644
--- a/src/features/Webhooks/v1/constants/webhook.constants.ts
+++ b/src/features/Webhooks/v1/constants/webhook.constants.ts
@@ -1,12 +1,32 @@
 import { WebhookEvent, WebhookFilters, WebhookLogFilters } from "../Webhook.types";
 
 export const WEBHOOK_EVENTS: { id: WebhookEvent; label: string; description: string }[] = [
-  { id: "member.created", label: "Member Created", description: "Triggered when a new member joins." },
-  { id: "member.activated", label: "Member Activated", description: "Triggered when a member account is activated." },
-  { id: "event.created", label: "Event Created", description: "Triggered when a new event is scheduled." },
-  { id: "hackathon.created", label: "Hackathon Created", description: "Triggered when a new hackathon is created." },
+  {
+    id: "member.created",
+    label: "Member Created",
+    description: "Triggered when a new member joins.",
+  },
+  {
+    id: "member.activated",
+    label: "Member Activated",
+    description: "Triggered when a member account is activated.",
+  },
+  {
+    id: "event.created",
+    label: "Event Created",
+    description: "Triggered when a new event is scheduled.",
+  },
+  {
+    id: "hackathon.created",
+    label: "Hackathon Created",
+    description: "Triggered when a new hackathon is created.",
+  },
   { id: "github.push", label: "GitHub Push", description: "Triggered on a repository push event." },
-  { id: "github.pr.opened", label: "GitHub PR Opened", description: "Triggered when a pull request is opened." },
+  {
+    id: "github.pr.opened",
+    label: "GitHub PR Opened",
+    description: "Triggered when a pull request is opened.",
+  },
 ];
 
 export const DEFAULT_WEBHOOK_FILTERS: WebhookFilters = {
diff --git a/src/features/Webhooks/v1/hooks/useWebhookLogs.ts b/src/features/Webhooks/v1/hooks/useWebhookLogs.ts
index 118db50..d17a114 100644
--- a/src/features/Webhooks/v1/hooks/useWebhookLogs.ts
+++ b/src/features/Webhooks/v1/hooks/useWebhookLogs.ts
@@ -1,6 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { webhookLogStore } from "../mock/webhookStore";
-import type { WebhookLog, WebhookLogFilters, PaginatedWebhookLogs } from "../Webhook.types";
+import type { WebhookLogFilters, PaginatedWebhookLogs } from "../Webhook.types";
 
 export function useWebhookLogs(webhookId: string | undefined, filters: WebhookLogFilters) {
   return useQuery<PaginatedWebhookLogs>({
@@ -8,16 +8,16 @@ export function useWebhookLogs(webhookId: string | undefined, filters: WebhookLo
     queryFn: async () => {
       await new Promise((r) => setTimeout(r, 600));
       if (!webhookId) return { data: [], total: 0, totalPages: 0 };
-      
+
       let logs = webhookLogStore.getByWebhookId(webhookId);
-      
+
       if (filters.status !== "all") {
-        logs = logs.filter(l => l.status === filters.status);
+        logs = logs.filter((l) => l.status === filters.status);
       }
       if (filters.event !== "all") {
-        logs = logs.filter(l => l.event === filters.event);
+        logs = logs.filter((l) => l.event === filters.event);
       }
-      
+
       const pageSize = 10;
       const total = logs.length;
       const totalPages = Math.ceil(total / pageSize);
@@ -38,7 +38,10 @@ export function useWebhookLogs(webhookId: string | undefined, filters: WebhookLo
 export function useRetryWebhookDelivery() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async ({ webhookId, logId }: { webhookId: string; logId: string }): Promise<{ success: boolean }> => {
+    mutationFn: async (_params: {
+      webhookId: string;
+      logId: string;
+    }): Promise<{ success: boolean }> => {
       await new Promise((r) => setTimeout(r, 800));
       // Mock successful retry
       return { success: true };
diff --git a/src/features/Webhooks/v1/hooks/useWebhooks.test.tsx b/src/features/Webhooks/v1/hooks/useWebhooks.test.tsx
index 18db5eb..738cb4a 100644
--- a/src/features/Webhooks/v1/hooks/useWebhooks.test.tsx
+++ b/src/features/Webhooks/v1/hooks/useWebhooks.test.tsx
@@ -1,6 +1,6 @@
 import { renderHook, waitFor } from "@testing-library/react";
 import { describe, it, expect, beforeEach } from "vitest";
-import { useWebhooks, useWebhook, useCreateWebhook } from "./useWebhooks";
+import { useWebhooks, useCreateWebhook } from "./useWebhooks";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { webhookStore } from "../mock/webhookStore";
 
@@ -11,24 +11,24 @@ describe("Webhook API Hooks Integration", () => {
     queryClient = new QueryClient();
     // Reset mock store before each test
     const all = webhookStore.getAll();
-    all.forEach(w => webhookStore.remove(w.id));
+    all.forEach((w) => webhookStore.remove(w.id));
   });
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 
   it("creates a new webhook successfully", async () => {
     const { result } = renderHook(() => useCreateWebhook(), { wrapper });
 
     let newWebhook: any;
-    await result.current.mutateAsync({
-      name: "Test Hook",
-      url: "https://test.com/hook",
-      events: ["member.created"],
-    }).then(res => newWebhook = res);
+    await result.current
+      .mutateAsync({
+        name: "Test Hook",
+        url: "https://test.com/hook",
+        events: ["member.created"],
+      })
+      .then((res) => (newWebhook = res));
 
     expect(newWebhook).toBeDefined();
     expect(newWebhook.name).toBe("Test Hook");
@@ -48,13 +48,18 @@ describe("Webhook API Hooks Integration", () => {
       updatedAt: new Date().toISOString(),
     });
 
-    const { result } = renderHook(() => useWebhooks({ status: "all", search: "Alpha" }), { wrapper });
+    const { result } = renderHook(
+      () => useWebhooks({ status: "all", search: "Alpha", page: 1 }),
+      {
+      wrapper,
+      },
+    );
 
     await waitFor(() => {
       expect(result.current.isSuccess).toBe(true);
     });
 
-    expect(result.current.data).toHaveLength(1);
-    expect(result.current.data?.[0].name).toBe("Alpha Hook");
+    expect(result.current.data?.data).toHaveLength(1);
+    expect(result.current.data?.data[0].name).toBe("Alpha Hook");
   });
 });
diff --git a/src/features/Webhooks/v1/hooks/useWebhooks.ts b/src/features/Webhooks/v1/hooks/useWebhooks.ts
index 9d7f8db..1891a82 100644
--- a/src/features/Webhooks/v1/hooks/useWebhooks.ts
+++ b/src/features/Webhooks/v1/hooks/useWebhooks.ts
@@ -1,6 +1,12 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { webhookStore } from "../mock/webhookStore";
-import type { Webhook, WebhookFilters, CreateWebhookPayload, UpdateWebhookPayload, PaginatedWebhooks } from "../Webhook.types";
+import type {
+  Webhook,
+  WebhookFilters,
+  CreateWebhookPayload,
+  UpdateWebhookPayload,
+  PaginatedWebhooks,
+} from "../Webhook.types";
 import { Telemetry } from "@/utils/telemetry";
 
 function applyFilters(webhooks: Webhook[], filters: WebhookFilters): Webhook[] {
@@ -62,7 +68,11 @@ export function useCreateWebhook() {
         url: payload.url,
         events: payload.events,
         status: "active",
-        secret: payload.secret || Array.from(crypto.getRandomValues(new Uint8Array(24))).map(b => b.toString(16).padStart(2, '0')).join(''),
+        secret:
+          payload.secret ||
+          Array.from(crypto.getRandomValues(new Uint8Array(24)))
+            .map((b) => b.toString(16).padStart(2, "0"))
+            .join(""),
         permissions: payload.permissions,
         lastDeliveryStatus: "pending",
         createdAt: new Date().toISOString(),
@@ -78,7 +88,13 @@ export function useCreateWebhook() {
 export function useUpdateWebhook() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async ({ id, payload }: { id: string; payload: UpdateWebhookPayload }): Promise<Webhook> => {
+    mutationFn: async ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: UpdateWebhookPayload;
+    }): Promise<Webhook> => {
       await new Promise((r) => setTimeout(r, 400));
       webhookStore.update(id, payload);
       const updated = webhookStore.getById(id);
@@ -119,16 +135,16 @@ export function useTestWebhook() {
 
       // 80% chance of success for mock
       const isSuccess = Math.random() > 0.2;
-      
+
       webhookStore.update(id, {
         lastTestedAt: new Date().toISOString(),
-        lastTestStatus: isSuccess ? "success" : "failed"
+        lastTestStatus: isSuccess ? "success" : "failed",
       });
 
       Telemetry.trackAction("webhook_tested", { id, isSuccess });
-      return { 
-        success: isSuccess, 
-        message: isSuccess ? "Webhook ping successful" : "Failed to reach endpoint" 
+      return {
+        success: isSuccess,
+        message: isSuccess ? "Webhook ping successful" : "Failed to reach endpoint",
       };
     },
     onSuccess: (_, id) => {
@@ -140,9 +156,15 @@ export function useTestWebhook() {
 export function useBulkWebhookAction() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async ({ ids, action }: { ids: string[]; action: "delete" | "enable" | "disable" }): Promise<void> => {
+    mutationFn: async ({
+      ids,
+      action,
+    }: {
+      ids: string[];
+      action: "delete" | "enable" | "disable";
+    }): Promise<void> => {
       await new Promise((r) => setTimeout(r, 600)); // Simulated delay
-      
+
       ids.forEach((id) => {
         if (action === "delete") {
           webhookStore.remove(id);
@@ -150,7 +172,7 @@ export function useBulkWebhookAction() {
           webhookStore.update(id, { status: action === "enable" ? "active" : "inactive" });
         }
       });
-      
+
       Telemetry.trackAction("webhooks_bulk_action", { action, count: ids.length });
     },
     onSuccess: () => {
diff --git a/src/features/Webhooks/v1/mock/webhookStore.ts b/src/features/Webhooks/v1/mock/webhookStore.ts
index 67fe168..87ab2dc 100644
--- a/src/features/Webhooks/v1/mock/webhookStore.ts
+++ b/src/features/Webhooks/v1/mock/webhookStore.ts
@@ -22,7 +22,7 @@ let mockWebhooks: Webhook[] = [
     lastDeliveryStatus: "pending",
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
-  }
+  },
 ];
 
 let mockLogs: WebhookLog[] = [
@@ -45,7 +45,7 @@ let mockLogs: WebhookLog[] = [
     responseCode: 500,
     requestPayload: { eventId: "e-1", title: "Tech Meetup" },
     responsePayload: { error: "Internal Server Error" },
-  }
+  },
 ];
 
 export const webhookStore = {
@@ -55,7 +55,9 @@ export const webhookStore = {
     mockWebhooks.push(webhook);
   },
   update: (id: string, updates: Partial<Webhook>) => {
-    mockWebhooks = mockWebhooks.map((w) => (w.id === id ? { ...w, ...updates, updatedAt: new Date().toISOString() } : w));
+    mockWebhooks = mockWebhooks.map((w) =>
+      w.id === id ? { ...w, ...updates, updatedAt: new Date().toISOString() } : w,
+    );
   },
   remove: (id: string) => {
     mockWebhooks = mockWebhooks.filter((w) => w.id !== id);
diff --git a/src/features/Webhooks/v1/pages/CreateWebhookPage.tsx b/src/features/Webhooks/v1/pages/CreateWebhookPage.tsx
index 8e4c07c..bfa8277 100644
--- a/src/features/Webhooks/v1/pages/CreateWebhookPage.tsx
+++ b/src/features/Webhooks/v1/pages/CreateWebhookPage.tsx
@@ -7,7 +7,10 @@ export default function CreateWebhookPage() {
   const navigate = useNavigate();
 
   return (
-    <div className="flex h-full w-full flex-col cd-page" style={{ backgroundColor: "var(--cd-bg)" }}>
+    <div
+      className="flex h-full w-full flex-col cd-page"
+      style={{ backgroundColor: "var(--cd-bg)" }}
+    >
       {/* Header */}
       <div
         className="flex justify-between border-b px-5 py-4 text-xl font-bold sm:px-8 lg:px-10"
@@ -44,7 +47,7 @@ export default function CreateWebhookPage() {
       <div className="flex-1 overflow-auto">
         <WebhookForm mode="create" />
       </div>
-      
+
       <ToastContainer toasts={[]} onDismiss={() => {}} />
     </div>
   );
diff --git a/src/features/Webhooks/v1/pages/EditWebhookPage.tsx b/src/features/Webhooks/v1/pages/EditWebhookPage.tsx
index f2d6a3e..cec0f4e 100644
--- a/src/features/Webhooks/v1/pages/EditWebhookPage.tsx
+++ b/src/features/Webhooks/v1/pages/EditWebhookPage.tsx
@@ -7,19 +7,28 @@ import { ToastContainer } from "@/features/Tasks/v1/components/common/ToastNotif
 export default function EditWebhookPage() {
   const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
-  
+
   const { data: webhook, isLoading, isError } = useWebhook(id);
 
   if (isLoading) {
-    return <div className="p-10 text-center text-[var(--cd-text-muted)]">Loading webhook details...</div>;
+    return (
+      <div className="p-10 text-center text-[var(--cd-text-muted)]">Loading webhook details...</div>
+    );
   }
 
   if (isError || !webhook) {
-    return <div className="p-10 text-center text-[var(--cd-danger)]">Webhook not found or failed to load.</div>;
+    return (
+      <div className="p-10 text-center text-[var(--cd-danger)]">
+        Webhook not found or failed to load.
+      </div>
+    );
   }
 
   return (
-    <div className="flex h-full w-full flex-col cd-page" style={{ backgroundColor: "var(--cd-bg)" }}>
+    <div
+      className="flex h-full w-full flex-col cd-page"
+      style={{ backgroundColor: "var(--cd-bg)" }}
+    >
       {/* Header */}
       <div
         className="flex justify-between border-b px-5 py-4 text-xl font-bold sm:px-8 lg:px-10"
@@ -56,7 +65,7 @@ export default function EditWebhookPage() {
       <div className="flex-1 overflow-auto">
         <WebhookForm mode="edit" initialData={webhook} />
       </div>
-      
+
       <ToastContainer toasts={[]} onDismiss={() => {}} />
     </div>
   );
diff --git a/src/features/Webhooks/v1/pages/WebhookDetailsPage.tsx b/src/features/Webhooks/v1/pages/WebhookDetailsPage.tsx
index 2428158..f383eec 100644
--- a/src/features/Webhooks/v1/pages/WebhookDetailsPage.tsx
+++ b/src/features/Webhooks/v1/pages/WebhookDetailsPage.tsx
@@ -1,6 +1,23 @@
 import { useState } from "react";
 import { useNavigate, useParams, Link } from "react-router-dom";
-import { ArrowLeft, Activity, ShieldAlert, CheckCircle2, Settings2, TestTube2, Loader2, ArrowRight, Signal, Zap, Clock, Terminal, Globe, Code2, AlertCircle, Copy, Check } from "lucide-react";
+import {
+  ArrowLeft,
+  Activity,
+  ShieldAlert,
+  CheckCircle2,
+  Settings2,
+  TestTube2,
+  Loader2,
+  Signal,
+  Zap,
+  Clock,
+  Terminal,
+  Globe,
+  Code2,
+  AlertCircle,
+  Copy,
+  Check,
+} from "lucide-react";
 import { useWebhook, useTestWebhook } from "../hooks/useWebhooks";
 import { useWebhookLogs } from "../hooks/useWebhookLogs";
 import StatusBadge from "../components/common/StatusBadge";
@@ -13,15 +30,25 @@ export default function WebhookDetailsPage() {
   const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
   const { toasts, addToast, dismiss } = useToast();
-  const [testResult, setTestResult] = useState<{ success: boolean; message: string; timestamp: Date } | null>(null);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+    timestamp: Date;
+  } | null>(null);
   const [copied, setCopied] = useState(false);
-  
+
   const { data: webhook, isLoading, isError } = useWebhook(id);
-  const { data: logsData, isLoading: logsLoading } = useWebhookLogs(id, { page: 1, status: "all", event: "all" });
+  const { data: logsData, isLoading: logsLoading } = useWebhookLogs(id, {
+    page: 1,
+    status: "all",
+    event: "all",
+  });
   const testWebhook = useTestWebhook();
 
-  if (isLoading) return <div className="p-10 text-center text-[var(--cd-text-muted)]">Loading webhook...</div>;
-  if (isError || !webhook) return <div className="p-10 text-center text-[var(--cd-danger)]">Webhook not found.</div>;
+  if (isLoading)
+    return <div className="p-10 text-center text-[var(--cd-text-muted)]">Loading webhook...</div>;
+  if (isError || !webhook)
+    return <div className="p-10 text-center text-[var(--cd-danger)]">Webhook not found.</div>;
 
   const handleCopy = () => {
     navigator.clipboard.writeText(webhook.url);
@@ -40,48 +67,73 @@ export default function WebhookDetailsPage() {
         addToast("error", "Test Failed", res.message);
       }
     } catch {
-      setTestResult({ success: false, message: "Unable to reach endpoint. Check your URL.", timestamp: new Date() });
+      setTestResult({
+        success: false,
+        message: "Unable to reach endpoint. Check your URL.",
+        timestamp: new Date(),
+      });
       addToast("error", "Test Failed", "Connection timeout.");
     }
   };
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden cd-page" style={{ backgroundColor: "var(--cd-bg)" }}>
+    <div
+      className="flex h-full w-full flex-col overflow-hidden cd-page"
+      style={{ backgroundColor: "var(--cd-bg)" }}
+    >
       {/* Header */}
       <div
         className="flex justify-between border-b px-5 py-5 sm:px-8 lg:px-10 shrink-0"
         style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
       >
         <div className="flex items-center gap-4">
-          <button onClick={() => navigate("/org/dashboard/webhooks")} className="p-2 rounded-lg transition-all hover:bg-[var(--cd-hover)] active:scale-90" style={{ color: "var(--cd-text-muted)" }}>
+          <button
+            onClick={() => navigate("/org/dashboard/webhooks")}
+            className="p-2 rounded-lg transition-all hover:bg-[var(--cd-hover)] active:scale-90"
+            style={{ color: "var(--cd-text-muted)" }}
+          >
             <ArrowLeft size={18} />
           </button>
           <div className="flex flex-col gap-0">
-            <h1 className="text-lg font-black flex items-center gap-3 tracking-tight" style={{ color: "var(--cd-text)" }}>
+            <h1
+              className="text-lg font-black flex items-center gap-3 tracking-tight"
+              style={{ color: "var(--cd-text)" }}
+            >
               {webhook.name} <StatusBadge status={webhook.status} />
             </h1>
             <div className="flex items-center gap-2 group cursor-pointer" onClick={handleCopy}>
-              <div className="flex items-center gap-1.5 text-[10px] font-mono opacity-50 transition-opacity group-hover:opacity-100" style={{ color: "var(--cd-text-muted)" }}>
+              <div
+                className="flex items-center gap-1.5 text-[10px] font-mono opacity-50 transition-opacity group-hover:opacity-100"
+                style={{ color: "var(--cd-text-muted)" }}
+              >
                 <Globe size={10} /> {webhook.url}
               </div>
               <button className="opacity-0 group-hover:opacity-100 transition-all p-1 rounded bg-[var(--cd-surface-2)]">
-                {copied ? <Check size={10} className="text-[var(--cd-success)]" /> : <Copy size={10} />}
+                {copied ? (
+                  <Check size={10} className="text-[var(--cd-success)]" />
+                ) : (
+                  <Copy size={10} />
+                )}
               </button>
             </div>
           </div>
         </div>
-        
+
         <div className="flex items-center gap-3">
-          <button 
+          <button
             onClick={handleTest}
             disabled={testWebhook.isPending}
             className="flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold border transition-all active:scale-95 hover:bg-[var(--cd-hover)]"
             style={{ color: "var(--cd-text)", borderColor: "var(--cd-border)" }}
           >
-            {testWebhook.isPending ? <Loader2 size={14} className="animate-spin text-[var(--cd-primary)]" /> : <TestTube2 size={14} />} 
+            {testWebhook.isPending ? (
+              <Loader2 size={14} className="animate-spin text-[var(--cd-primary)]" />
+            ) : (
+              <TestTube2 size={14} />
+            )}
             Ping Test
           </button>
-          <button 
+          <button
             onClick={() => navigate(`/org/dashboard/webhooks/${webhook.id}/edit`)}
             className="flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all active:scale-95 shadow-sm shadow-[var(--cd-primary-subtle)]"
             style={{ backgroundColor: "var(--cd-primary)", color: "white" }}
@@ -93,20 +145,46 @@ export default function WebhookDetailsPage() {
 
       <div className="flex-1 overflow-auto p-5 sm:p-8 lg:p-10 scroll-smooth">
         <div className="mx-auto w-full max-w-[1200px] flex flex-col gap-8">
-          
           {/* Unified Dash Stats */}
-          <div className="grid grid-cols-1 md:grid-cols-4 rounded-2xl border divide-x overflow-hidden group shadow-sm transition-shadow hover:shadow-md" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)", divideColor: "var(--cd-border-subtle)" }}>
+          <div
+            className="grid grid-cols-1 md:grid-cols-4 rounded-2xl border divide-x overflow-hidden group shadow-sm transition-shadow hover:shadow-md"
+            style={{
+              backgroundColor: "var(--cd-surface)",
+              borderColor: "var(--cd-border)",
+            }}
+          >
             {[
               { label: "Reliability", val: "99.8%", icon: Zap, color: "var(--cd-success)" },
               { label: "Avg Latency", val: "142ms", icon: Clock, color: "var(--cd-primary)" },
               { label: "Volume (24h)", val: "1.2k", icon: Activity, color: "var(--cd-text)" },
-              { label: "Status", val: webhook.status, icon: Signal, color: webhook.status === 'active' ? "var(--cd-success)" : "var(--cd-text-muted)" },
+              {
+                label: "Status",
+                val: webhook.status,
+                icon: Signal,
+                color: webhook.status === "active" ? "var(--cd-success)" : "var(--cd-text-muted)",
+              },
             ].map((stat, i) => (
-              <div key={i} className="p-6 flex flex-col gap-1 transition-colors hover:bg-[var(--cd-hover)]">
-                <span className="text-[10px] font-black uppercase tracking-[0.15em] text-[var(--cd-text-muted)] opacity-60">{stat.label}</span>
+              <div
+                key={i}
+                className="p-6 flex flex-col gap-1 transition-colors hover:bg-[var(--cd-hover)]"
+              >
+                <span className="text-[10px] font-black uppercase tracking-[0.15em] text-[var(--cd-text-muted)] opacity-60">
+                  {stat.label}
+                </span>
                 <div className="flex items-center gap-2">
-                  <stat.icon size={16} style={{ color: stat.color }} className={stat.label === "Status" && webhook.status === 'active' ? 'animate-pulse' : ''} />
-                  <span className="text-2xl font-black tracking-tight capitalize" style={{ color: "var(--cd-text)" }}>{stat.val}</span>
+                  <stat.icon
+                    size={16}
+                    style={{ color: stat.color }}
+                    className={
+                      stat.label === "Status" && webhook.status === "active" ? "animate-pulse" : ""
+                    }
+                  />
+                  <span
+                    className="text-2xl font-black tracking-tight capitalize"
+                    style={{ color: "var(--cd-text)" }}
+                  >
+                    {stat.val}
+                  </span>
                 </div>
               </div>
             ))}
@@ -114,41 +192,73 @@ export default function WebhookDetailsPage() {
 
           {/* Test Result Banner (Conditional) */}
           {testResult && (
-            <div 
-              className={`rounded-2xl border p-5 flex items-center justify-between animate-in slide-in-from-top-4 duration-300 ${testResult.success ? 'bg-[var(--cd-success-subtle)] border-[var(--cd-success)]' : 'bg-[var(--cd-danger-subtle)] border-[var(--cd-danger)]'}`}
+            <div
+              className={`rounded-2xl border p-5 flex items-center justify-between animate-in slide-in-from-top-4 duration-300 ${testResult.success ? "bg-[var(--cd-success-subtle)] border-[var(--cd-success)]" : "bg-[var(--cd-danger-subtle)] border-[var(--cd-danger)]"}`}
             >
               <div className="flex items-center gap-4">
-                <div className={`p-2.5 rounded-xl ${testResult.success ? 'bg-[var(--cd-success)] text-white' : 'bg-[var(--cd-danger)] text-white'}`}>
+                <div
+                  className={`p-2.5 rounded-xl ${testResult.success ? "bg-[var(--cd-success)] text-white" : "bg-[var(--cd-danger)] text-white"}`}
+                >
                   {testResult.success ? <CheckCircle2 size={20} /> : <AlertCircle size={20} />}
                 </div>
                 <div>
-                  <h4 className="font-bold text-sm" style={{ color: testResult.success ? 'var(--cd-success-text)' : 'var(--cd-danger-text)' }}>
+                  <h4
+                    className="font-bold text-sm"
+                    style={{
+                      color: testResult.success
+                        ? "var(--cd-success-text)"
+                        : "var(--cd-danger-text)",
+                    }}
+                  >
                     {testResult.success ? "Connection Successful" : "Connection Failed"}
                   </h4>
-                  <p className="text-xs opacity-80" style={{ color: testResult.success ? 'var(--cd-success-text)' : 'var(--cd-danger-text)' }}>
+                  <p
+                    className="text-xs opacity-80"
+                    style={{
+                      color: testResult.success
+                        ? "var(--cd-success-text)"
+                        : "var(--cd-danger-text)",
+                    }}
+                  >
                     {testResult.message} • {format(testResult.timestamp, "HH:mm:ss")}
                   </p>
                 </div>
               </div>
-              <button onClick={() => setTestResult(null)} className="text-xs font-bold underline opacity-60 hover:opacity-100">Dismiss</button>
+              <button
+                onClick={() => setTestResult(null)}
+                className="text-xs font-bold underline opacity-60 hover:opacity-100"
+              >
+                Dismiss
+              </button>
             </div>
           )}
 
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
-            
             {/* Left Column: Activity & Docs */}
             <div className="lg:col-span-8 flex flex-col gap-8">
-              
               {/* Recent Deliveries */}
-              <div className="rounded-2xl border shadow-sm overflow-hidden" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}>
-                <div className="flex items-center justify-between p-5 border-b" style={{ borderColor: "var(--cd-border-subtle)" }}>
+              <div
+                className="rounded-2xl border shadow-sm overflow-hidden"
+                style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+              >
+                <div
+                  className="flex items-center justify-between p-5 border-b"
+                  style={{ borderColor: "var(--cd-border-subtle)" }}
+                >
                   <div className="flex items-center gap-3">
                     <div className="p-1.5 rounded-lg bg-[var(--cd-primary-subtle)] text-[var(--cd-primary)]">
                       <Terminal size={16} />
                     </div>
-                    <h3 className="font-black text-xs uppercase tracking-widest text-[var(--cd-text)]">Recent Deliveries</h3>
+                    <h3 className="font-black text-xs uppercase tracking-widest text-[var(--cd-text)]">
+                      Recent Deliveries
+                    </h3>
                   </div>
-                  <Link to={`/org/dashboard/webhooks/${webhook.id}/logs`} className="text-[10px] font-black uppercase tracking-widest text-[var(--cd-primary)] hover:opacity-70 transition-opacity">Full History</Link>
+                  <Link
+                    to={`/org/dashboard/webhooks/${webhook.id}/logs`}
+                    className="text-[10px] font-black uppercase tracking-widest text-[var(--cd-primary)] hover:opacity-70 transition-opacity"
+                  >
+                    Full History
+                  </Link>
                 </div>
                 <div className="p-2">
                   {logsLoading ? (
@@ -156,51 +266,97 @@ export default function WebhookDetailsPage() {
                       <Loader2 size={20} className="animate-spin" /> Loading Activity...
                     </div>
                   ) : (
-                    <LogsTable logs={logsData?.data.slice(0, 5) || []} onRetry={() => {}} />
+                    <LogsTable
+                      logs={logsData?.data.slice(0, 5) || []}
+                      isLoading={false}
+                      onRetry={() => {}}
+                      isRetrying={false}
+                    />
                   )}
                 </div>
-              </div>              {/* Payload Example */}
-              <div className="rounded-2xl border overflow-hidden" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}>
-                <div className="p-5 border-b flex items-center gap-3" style={{ borderColor: "var(--cd-border-subtle)" }}>
+              </div>{" "}
+              {/* Payload Example */}
+              <div
+                className="rounded-2xl border overflow-hidden"
+                style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+              >
+                <div
+                  className="p-5 border-b flex items-center gap-3"
+                  style={{ borderColor: "var(--cd-border-subtle)" }}
+                >
                   <Code2 size={16} className="text-[var(--cd-primary)]" />
-                  <h3 className="font-black text-xs uppercase tracking-widest text-[var(--cd-text)]">Payload Structure</h3>
+                  <h3 className="font-black text-xs uppercase tracking-widest text-[var(--cd-text)]">
+                    Payload Structure
+                  </h3>
                 </div>
                 <div className="p-6">
-                  <div className="rounded-xl p-5 font-mono text-[10px] leading-relaxed relative border" style={{ backgroundColor: "#0d1117", color: "#e6edf3", borderColor: "#30363d" }}>
-                    <div className="absolute top-0 right-0 px-3 py-1 bg-[#30363d] text-[#8b949e] text-[9px] font-bold">JSON</div>
+                  <div
+                    className="rounded-xl p-5 font-mono text-[10px] leading-relaxed relative border"
+                    style={{ backgroundColor: "#0d1117", color: "#e6edf3", borderColor: "#30363d" }}
+                  >
+                    <div className="absolute top-0 right-0 px-3 py-1 bg-[#30363d] text-[#8b949e] text-[9px] font-bold">
+                      JSON
+                    </div>
                     <pre className="overflow-x-auto">
-                      <span style={{ color: "#79c0ff" }}>{"{"}</span>{"\n"}
-                      {"  "}<span style={{ color: "#7ee787" }}>"id"</span>: <span style={{ color: "#a5d6ff" }}>"evt_12345"</span>,{"\n"}
-                      {"  "}<span style={{ color: "#7ee787" }}>"type"</span>: <span style={{ color: "#a5d6ff" }}>"{webhook.events[0] || "member.created"}"</span>,{"\n"}
-                      {"  "}<span style={{ color: "#7ee787" }}>"created"</span>: <span style={{ color: "#d2a8ff" }}>{Date.now()}</span>,{"\n"}
-                      {"  "}<span style={{ color: "#7ee787" }}>"data"</span>: <span style={{ color: "#79c0ff" }}>{"{"}</span>{"\n"}
-                      {"    "}<span style={{ color: "#7ee787" }}>"object"</span>: <span style={{ color: "#a5d6ff" }}>"member"</span>,{"\n"}
-                      {"    "}<span style={{ color: "#7ee787" }}>"id"</span>: <span style={{ color: "#a5d6ff" }}>"mem_98765"</span>,{"\n"}
-                      {"    "}<span style={{ color: "#7ee787" }}>"status"</span>: <span style={{ color: "#a5d6ff" }}>"active"</span>{"\n"}
-                      {"  "}<span style={{ color: "#79c0ff" }}>{"}"}</span>{"\n"}
+                      <span style={{ color: "#79c0ff" }}>{"{"}</span>
+                      {"\n"}
+                      {"  "}
+                      <span style={{ color: "#7ee787" }}>"id"</span>:{" "}
+                      <span style={{ color: "#a5d6ff" }}>"evt_12345"</span>,{"\n"}
+                      {"  "}
+                      <span style={{ color: "#7ee787" }}>"type"</span>:{" "}
+                      <span style={{ color: "#a5d6ff" }}>
+                        "{webhook.events[0] || "member.created"}"
+                      </span>
+                      ,{"\n"}
+                      {"  "}
+                      <span style={{ color: "#7ee787" }}>"created"</span>:{" "}
+                      <span style={{ color: "#d2a8ff" }}>{Date.now()}</span>,{"\n"}
+                      {"  "}
+                      <span style={{ color: "#7ee787" }}>"data"</span>:{" "}
+                      <span style={{ color: "#79c0ff" }}>{"{"}</span>
+                      {"\n"}
+                      {"    "}
+                      <span style={{ color: "#7ee787" }}>"object"</span>:{" "}
+                      <span style={{ color: "#a5d6ff" }}>"member"</span>,{"\n"}
+                      {"    "}
+                      <span style={{ color: "#7ee787" }}>"id"</span>:{" "}
+                      <span style={{ color: "#a5d6ff" }}>"mem_98765"</span>,{"\n"}
+                      {"    "}
+                      <span style={{ color: "#7ee787" }}>"status"</span>:{" "}
+                      <span style={{ color: "#a5d6ff" }}>"active"</span>
+                      {"\n"}
+                      {"  "}
+                      <span style={{ color: "#79c0ff" }}>{"}"}</span>
+                      {"\n"}
                       <span style={{ color: "#79c0ff" }}>{"}"}</span>
                     </pre>
                   </div>
                   <p className="mt-4 text-[10px] text-[var(--cd-text-muted)] italic">
-                    Note: Requests are POSTed with an <code className="text-[var(--cd-text)] font-bold">X-CommDesk-Signature</code> header for verification.
+                    Note: Requests are POSTed with an{" "}
+                    <code className="text-[var(--cd-text)] font-bold">X-CommDesk-Signature</code>{" "}
+                    header for verification.
                   </p>
                 </div>
               </div>
-
             </div>
 
             {/* Right Column: Configuration */}
             <div className="lg:col-span-4 flex flex-col gap-6">
-              
               {/* Security Sidebar Card */}
-              <div className="rounded-2xl border p-6 flex flex-col gap-6" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}>
+              <div
+                className="rounded-2xl border p-6 flex flex-col gap-6"
+                style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+              >
                 <div>
                   <h3 className="text-[10px] font-black mb-4 uppercase tracking-[0.25em] text-[var(--cd-text-muted)] flex items-center gap-2">
                     <ShieldAlert size={12} /> Security Config
                   </h3>
                   <div className="flex flex-col gap-4">
                     <div className="p-3 rounded-xl bg-[var(--cd-surface-2)] border border-[var(--cd-border-subtle)]">
-                      <span className="text-[9px] font-bold text-[var(--cd-text-muted)] uppercase tracking-wider block mb-2">Signing Secret</span>
+                      <span className="text-[9px] font-bold text-[var(--cd-text-muted)] uppercase tracking-wider block mb-2">
+                        Signing Secret
+                      </span>
                       <MaskedSecret secret={webhook.secret} />
                     </div>
                   </div>
@@ -211,9 +367,17 @@ export default function WebhookDetailsPage() {
                     <CheckCircle2 size={12} /> Subscriptions
                   </h3>
                   <div className="flex flex-wrap gap-1.5">
-                    {webhook.events.map(ev => (
-                      <span key={ev} className="px-2.5 py-1 rounded-lg text-[9px] font-black border uppercase" style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text-2)", borderColor: "var(--cd-border)" }}>
-                        {ev.replace('.', ' ')}
+                    {webhook.events.map((ev) => (
+                      <span
+                        key={ev}
+                        className="px-2.5 py-1 rounded-lg text-[9px] font-black border uppercase"
+                        style={{
+                          backgroundColor: "var(--cd-surface-2)",
+                          color: "var(--cd-text-2)",
+                          borderColor: "var(--cd-border)",
+                        }}
+                      >
+                        {ev.replace(".", " ")}
                       </span>
                     ))}
                   </div>
@@ -225,8 +389,15 @@ export default function WebhookDetailsPage() {
                       <Zap size={12} /> Scopes
                     </h3>
                     <div className="flex flex-wrap gap-1.5">
-                      {webhook.permissions.map(perm => (
-                        <span key={perm} className="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider" style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary)" }}>
+                      {webhook.permissions.map((perm) => (
+                        <span
+                          key={perm}
+                          className="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider"
+                          style={{
+                            backgroundColor: "var(--cd-primary-subtle)",
+                            color: "var(--cd-primary)",
+                          }}
+                        >
                           {perm}
                         </span>
                       ))}
@@ -235,17 +406,23 @@ export default function WebhookDetailsPage() {
                 )}
               </div>
 
-              <div className="rounded-2xl border p-6 flex flex-col gap-4 shadow-sm" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}>
+              <div
+                className="rounded-2xl border p-6 flex flex-col gap-4 shadow-sm"
+                style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+              >
                 <div className="flex justify-between items-center text-[10px]">
                   <span className="text-[var(--cd-text-muted)] font-medium">Created</span>
-                  <span className="font-bold text-[var(--cd-text)]">{format(new Date(webhook.createdAt), "MMM d, yyyy")}</span>
+                  <span className="font-bold text-[var(--cd-text)]">
+                    {format(new Date(webhook.createdAt), "MMM d, yyyy")}
+                  </span>
                 </div>
                 <div className="flex justify-between items-center text-[10px]">
                   <span className="text-[var(--cd-text-muted)] font-medium">Internal ID</span>
-                  <span className="font-mono text-[9px] opacity-40 text-[var(--cd-text)]">{webhook.id}</span>
+                  <span className="font-mono text-[9px] opacity-40 text-[var(--cd-text)]">
+                    {webhook.id}
+                  </span>
                 </div>
               </div>
-
             </div>
           </div>
         </div>
diff --git a/src/features/Webhooks/v1/pages/WebhookListPage.tsx b/src/features/Webhooks/v1/pages/WebhookListPage.tsx
index 8bda0a5..4b0dbbd 100644
--- a/src/features/Webhooks/v1/pages/WebhookListPage.tsx
+++ b/src/features/Webhooks/v1/pages/WebhookListPage.tsx
@@ -1,5 +1,10 @@
 import { useState } from "react";
-import { useWebhooks, useUpdateWebhook, useDeleteWebhook, useBulkWebhookAction } from "../hooks/useWebhooks";
+import {
+  useWebhooks,
+  useUpdateWebhook,
+  useDeleteWebhook,
+  useBulkWebhookAction,
+} from "../hooks/useWebhooks";
 import { DEFAULT_WEBHOOK_FILTERS } from "../constants/webhook.constants";
 import type { Webhook, WebhookFilters } from "../Webhook.types";
 import WebhookHeader from "../components/layout/WebhookHeader";
@@ -16,35 +21,38 @@ import { Plus } from "lucide-react";
 export default function WebhookListPage() {
   const navigate = useNavigate();
   const { toasts, addToast, dismiss } = useToast();
-  
+
   const [filters, setFilters] = useState<WebhookFilters>(DEFAULT_WEBHOOK_FILTERS);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
-  
+
   // Total count for header (no filters applied)
-  const { data: allPaginated = { data: [], total: 0, totalPages: 0 } } = useWebhooks(DEFAULT_WEBHOOK_FILTERS);
+  const { data: allPaginated = { data: [], total: 0, totalPages: 0 } } =
+    useWebhooks(DEFAULT_WEBHOOK_FILTERS);
   const allWebhooks = allPaginated.data;
   const totalCount = allPaginated.total;
-  
+
   // Filtered data
   const { data: paginatedData, isLoading, isError, refetch } = useWebhooks(filters);
   const webhooks = paginatedData?.data || [];
   const totalPages = paginatedData?.totalPages || 0;
-  
+
   const updateWebhook = useUpdateWebhook();
   const deleteWebhook = useDeleteWebhook();
   const bulkAction = useBulkWebhookAction();
-  
+
   const [webhookToDelete, setWebhookToDelete] = useState<Webhook | null>(null);
-  const [bulkActionToConfirm, setBulkActionToConfirm] = useState<"delete" | "enable" | "disable" | null>(null);
+  const [bulkActionToConfirm, setBulkActionToConfirm] = useState<
+    "delete" | "enable" | "disable" | null
+  >(null);
 
-  const activeCount = allWebhooks.filter(w => w.status === "active").length;
+  const activeCount = allWebhooks.filter((w) => w.status === "active").length;
 
   const handleToggleStatus = async (webhook: Webhook) => {
     const newStatus = webhook.status === "active" ? "inactive" : "active";
     try {
-      await updateWebhook.mutateAsync({ 
-        id: webhook.id, 
-        payload: { status: newStatus } 
+      await updateWebhook.mutateAsync({
+        id: webhook.id,
+        payload: { status: newStatus },
       });
       addToast("success", "Status updated", `Webhook is now ${newStatus}`);
     } catch {
@@ -53,9 +61,7 @@ export default function WebhookListPage() {
   };
 
   const handleToggleSelect = (id: string) => {
-    setSelectedIds(prev => 
-      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
-    );
+    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]));
   };
 
   const handleSelectAll = (ids: string[]) => {
@@ -66,14 +72,14 @@ export default function WebhookListPage() {
     const action = actionOverride || bulkActionToConfirm;
     if (!action) return;
     try {
-      await bulkAction.mutateAsync({ 
-        ids: selectedIds, 
-        action 
+      await bulkAction.mutateAsync({
+        ids: selectedIds,
+        action,
       });
       addToast(
-        "success", 
-        "Bulk Action Successful", 
-        `Successfully ${action}d ${selectedIds.length} webhooks.`
+        "success",
+        "Bulk Action Successful",
+        `Successfully ${action}d ${selectedIds.length} webhooks.`,
       );
       setSelectedIds([]);
     } catch {
@@ -85,7 +91,7 @@ export default function WebhookListPage() {
 
   const handlePageChange = (newPage: number) => {
     if (newPage >= 1 && newPage <= totalPages) {
-      setFilters(f => ({ ...f, page: newPage }));
+      setFilters((f) => ({ ...f, page: newPage }));
     }
   };
 
@@ -102,14 +108,8 @@ export default function WebhookListPage() {
   };
 
   return (
-    <div
-      className="w-full min-h-screen flex flex-col"
-      style={{ backgroundColor: "var(--cd-bg)" }}
-    >
-      <WebhookHeader 
-        totalCount={totalCount} 
-        activeCount={activeCount} 
-      />
+    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+      <WebhookHeader totalCount={totalCount} activeCount={activeCount} />
 
       <div className="flex-1 flex flex-col">
         {isError ? (
@@ -119,7 +119,10 @@ export default function WebhookListPage() {
               title="Failed to load webhooks"
               description="Something went wrong while fetching webhooks."
               action={
-                <button onClick={() => void refetch()} className="cd-btn cd-btn-secondary px-6 py-2.5 rounded-xl border">
+                <button
+                  onClick={() => void refetch()}
+                  className="cd-btn cd-btn-secondary px-6 py-2.5 rounded-xl border"
+                >
                   Retry
                 </button>
               }
@@ -149,16 +152,16 @@ export default function WebhookListPage() {
               totalCount={totalCount}
               filteredCount={paginatedData?.total || 0}
             />
-            
+
             <main className="mx-auto w-full max-w-[1440px] px-4 py-5 sm:px-8 sm:py-8 lg:px-10 flex flex-col gap-6">
               {/* Desktop View */}
               <div className="hidden md:block">
-                <div 
-                  className="overflow-hidden rounded-xl border transition-all duration-300" 
-                  style={{ 
-                    backgroundColor: "var(--cd-surface)", 
+                <div
+                  className="overflow-hidden rounded-xl border transition-all duration-300"
+                  style={{
+                    backgroundColor: "var(--cd-surface)",
                     borderColor: "var(--cd-border-subtle)",
-                    boxShadow: "0 18px 60px -36px var(--cd-shadow-md)"
+                    boxShadow: "0 18px 60px -36px var(--cd-shadow-md)",
                   }}
                 >
                   <WebhookTable
@@ -177,8 +180,8 @@ export default function WebhookListPage() {
                         title="No Matches Found"
                         description="We couldn't find any webhooks matching your current filters or search term."
                         action={
-                          <button 
-                            onClick={() => setFilters(DEFAULT_WEBHOOK_FILTERS)} 
+                          <button
+                            onClick={() => setFilters(DEFAULT_WEBHOOK_FILTERS)}
                             className="cd-btn cd-btn-secondary px-6 py-2 rounded-xl border text-sm font-medium"
                           >
                             Clear All Filters
@@ -189,7 +192,7 @@ export default function WebhookListPage() {
                   )}
                 </div>
               </div>
-              
+
               {/* Mobile View */}
               <div className="block md:hidden">
                 <WebhookCardList
@@ -204,7 +207,10 @@ export default function WebhookListPage() {
 
               {/* Pagination UI */}
               {totalPages > 1 && (
-                <div className="flex items-center justify-between px-2 py-4" style={{ color: "var(--cd-text)" }}>
+                <div
+                  className="flex items-center justify-between px-2 py-4"
+                  style={{ color: "var(--cd-text)" }}
+                >
                   <div className="text-sm text-[var(--cd-text-muted)]">
                     Showing page {filters.page} of {totalPages}
                   </div>
@@ -213,7 +219,11 @@ export default function WebhookListPage() {
                       onClick={() => handlePageChange(filters.page - 1)}
                       disabled={filters.page === 1}
                       className="px-4 py-2 text-sm border rounded-lg transition-colors disabled:opacity-50"
-                      style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+                      style={{
+                        backgroundColor: "var(--cd-surface)",
+                        borderColor: "var(--cd-border-subtle)",
+                        color: "var(--cd-text)",
+                      }}
                     >
                       Previous
                     </button>
@@ -221,7 +231,11 @@ export default function WebhookListPage() {
                       onClick={() => handlePageChange(filters.page + 1)}
                       disabled={filters.page === totalPages}
                       className="px-4 py-2 text-sm border rounded-lg transition-colors disabled:opacity-50"
-                      style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+                      style={{
+                        backgroundColor: "var(--cd-surface)",
+                        borderColor: "var(--cd-border-subtle)",
+                        color: "var(--cd-text)",
+                      }}
                     >
                       Next
                     </button>
@@ -241,7 +255,7 @@ export default function WebhookListPage() {
         onConfirm={() => void handleDelete()}
         onCancel={() => setWebhookToDelete(null)}
         isLoading={deleteWebhook.isPending}
-        danger
+        variant="danger"
       />
 
       <ConfirmModal
@@ -252,11 +266,11 @@ export default function WebhookListPage() {
         onConfirm={() => void handleBulkAction()}
         onCancel={() => setBulkActionToConfirm(null)}
         isLoading={bulkAction.isPending}
-        danger
+        variant="danger"
       />
 
-      <BulkActionBar 
-        selectedCount={selectedIds.length} 
+      <BulkActionBar
+        selectedCount={selectedIds.length}
         onClear={() => setSelectedIds([])}
         onAction={(action) => {
           if (action === "delete") {
diff --git a/src/features/Webhooks/v1/pages/WebhookLogsPage.tsx b/src/features/Webhooks/v1/pages/WebhookLogsPage.tsx
index afeb2d9..b4b5932 100644
--- a/src/features/Webhooks/v1/pages/WebhookLogsPage.tsx
+++ b/src/features/Webhooks/v1/pages/WebhookLogsPage.tsx
@@ -4,25 +4,37 @@ import { ArrowLeft, Activity } from "lucide-react";
 import { useWebhook } from "../hooks/useWebhooks";
 import { useWebhookLogs, useRetryWebhookDelivery } from "../hooks/useWebhookLogs";
 import { DEFAULT_LOG_FILTERS } from "../constants/webhook.constants";
-import type { WebhookLogFilters } from "../Webhook.types";
+import type { WebhookEvent, WebhookLogFilters } from "../Webhook.types";
 import LogsTable from "../components/table/LogsTable";
 import LogsCardList from "../components/table/LogsCardList";
 import { ToastContainer, useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
 import { PillDropdown } from "../components/layout/WebhookFilters";
 
-const LOG_STATUS_DOTS: Record<string, string> = { all: "bg-gray-400", success: "bg-emerald-500", failed: "bg-red-500" };
+const LOG_STATUS_DOTS: Record<string, string> = {
+  all: "bg-gray-400",
+  success: "bg-emerald-500",
+  failed: "bg-red-500",
+};
 const LOG_STATUS_STYLES: Record<string, { bg: string; color: string; border: string }> = {
-  success: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)", border: "var(--cd-success-subtle)" },
-  failed: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)", border: "var(--cd-danger-subtle)" },
+  success: {
+    bg: "var(--cd-success-subtle)",
+    color: "var(--cd-success)",
+    border: "var(--cd-success-subtle)",
+  },
+  failed: {
+    bg: "var(--cd-danger-subtle)",
+    color: "var(--cd-danger)",
+    border: "var(--cd-danger-subtle)",
+  },
 };
 
 export default function WebhookLogsPage() {
   const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
   const { toasts, addToast, dismiss } = useToast();
-  
+
   const [filters, setFilters] = useState<WebhookLogFilters>(DEFAULT_LOG_FILTERS);
-  
+
   const { data: webhook } = useWebhook(id);
   const { data: paginatedData, isLoading } = useWebhookLogs(id, filters);
   const logs = paginatedData?.data || [];
@@ -41,30 +53,53 @@ export default function WebhookLogsPage() {
 
   const handlePageChange = (newPage: number) => {
     if (newPage >= 1 && newPage <= totalPages) {
-      setFilters(f => ({ ...f, page: newPage }));
+      setFilters((f) => ({ ...f, page: newPage }));
     }
   };
 
   return (
-    <div className="flex h-full w-full flex-col overflow-auto cd-page" style={{ backgroundColor: "var(--cd-bg)" }}>
+    <div
+      className="flex h-full w-full flex-col overflow-auto cd-page"
+      style={{ backgroundColor: "var(--cd-bg)" }}
+    >
       {/* Header */}
       <div
         className="flex flex-col border-b px-5 py-6 sm:px-8 lg:px-10"
         style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
       >
-        <div className="flex items-center gap-3 mb-2 text-sm font-medium" style={{ color: "var(--cd-text-muted)" }}>
-          <Link to="/org/dashboard/webhooks" className="hover:text-[var(--cd-text)] transition-colors">Webhooks</Link>
+        <div
+          className="flex items-center gap-3 mb-2 text-sm font-medium"
+          style={{ color: "var(--cd-text-muted)" }}
+        >
+          <Link
+            to="/org/dashboard/webhooks"
+            className="hover:text-[var(--cd-text)] transition-colors"
+          >
+            Webhooks
+          </Link>
           <span>/</span>
-          <Link to={`/org/dashboard/webhooks/${id}`} className="hover:text-[var(--cd-text)] transition-colors">{webhook?.name || 'Loading...'}</Link>
+          <Link
+            to={`/org/dashboard/webhooks/${id}`}
+            className="hover:text-[var(--cd-text)] transition-colors"
+          >
+            {webhook?.name || "Loading..."}
+          </Link>
           <span>/</span>
           <span style={{ color: "var(--cd-text)" }}>Logs</span>
         </div>
         <div className="flex items-center gap-4 mt-2">
-          <button onClick={() => navigate(-1)} className="p-2 rounded-lg transition-colors hover:bg-[var(--cd-hover)]" style={{ color: "var(--cd-text-muted)" }}>
+          <button
+            onClick={() => navigate(-1)}
+            className="p-2 rounded-lg transition-colors hover:bg-[var(--cd-hover)]"
+            style={{ color: "var(--cd-text-muted)" }}
+          >
             <ArrowLeft size={20} />
           </button>
           <div>
-            <h1 className="text-2xl font-bold flex items-center gap-3" style={{ color: "var(--cd-text)" }}>
+            <h1
+              className="text-2xl font-bold flex items-center gap-3"
+              style={{ color: "var(--cd-text)" }}
+            >
               <Activity size={24} style={{ color: "var(--cd-primary)" }} /> Delivery Logs
             </h1>
           </div>
@@ -72,28 +107,31 @@ export default function WebhookLogsPage() {
       </div>
 
       {/* Filter Bar */}
-      <div className="border-b px-5 py-3 sm:px-8 lg:px-10 flex gap-4" style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "var(--cd-border-subtle)" }}>
+      <div
+        className="border-b px-5 py-3 sm:px-8 lg:px-10 flex gap-4"
+        style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "var(--cd-border-subtle)" }}
+      >
         <PillDropdown<"all" | "success" | "failed">
           label="Status"
           value={filters.status}
           dotMap={LOG_STATUS_DOTS}
           styleMap={LOG_STATUS_STYLES}
-          onChange={(v) => setFilters(f => ({ ...f, status: v, page: 1 }))}
+          onChange={(v) => setFilters((f) => ({ ...f, status: v, page: 1 }))}
           options={[
             { value: "all", label: "All Statuses" },
             { value: "success", label: "Success" },
             { value: "failed", label: "Failed" },
           ]}
         />
-        <PillDropdown<string>
+        <PillDropdown<WebhookEvent | "all">
           label="Event"
           value={filters.event}
           dotMap={{ all: "bg-gray-400" }}
           styleMap={{}}
-          onChange={(v) => setFilters(f => ({ ...f, event: v, page: 1 }))}
+          onChange={(v) => setFilters((f) => ({ ...f, event: v, page: 1 }))}
           options={[
             { value: "all", label: "All Events" },
-            ...(webhook?.events.map(ev => ({ value: ev, label: ev })) || []),
+            ...(webhook?.events.map((ev) => ({ value: ev, label: ev })) || []),
           ]}
         />
       </div>
@@ -101,10 +139,13 @@ export default function WebhookLogsPage() {
       <div className="flex-1 p-5 sm:p-8 lg:p-10 flex flex-col gap-4">
         {/* Desktop View */}
         <div className="hidden md:block">
-          <div className="rounded-xl border overflow-hidden shadow-sm" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}>
-            <LogsTable 
-              logs={logs} 
-              isLoading={isLoading} 
+          <div
+            className="rounded-xl border overflow-hidden shadow-sm"
+            style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+          >
+            <LogsTable
+              logs={logs}
+              isLoading={isLoading}
               onRetry={handleRetry}
               isRetrying={retryMutation.isPending}
             />
@@ -123,7 +164,10 @@ export default function WebhookLogsPage() {
 
         {/* Pagination UI */}
         {totalPages > 1 && (
-          <div className="flex items-center justify-between px-2 py-4" style={{ color: "var(--cd-text)" }}>
+          <div
+            className="flex items-center justify-between px-2 py-4"
+            style={{ color: "var(--cd-text)" }}
+          >
             <div className="text-sm text-[var(--cd-text-muted)]">
               Showing page {filters.page} of {totalPages}
             </div>
@@ -132,7 +176,11 @@ export default function WebhookLogsPage() {
                 onClick={() => handlePageChange(filters.page - 1)}
                 disabled={filters.page === 1}
                 className="px-4 py-2 text-sm border rounded-lg transition-colors disabled:opacity-50"
-                style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+                style={{
+                  backgroundColor: "var(--cd-surface)",
+                  borderColor: "var(--cd-border-subtle)",
+                  color: "var(--cd-text)",
+                }}
               >
                 Previous
               </button>
@@ -140,7 +188,11 @@ export default function WebhookLogsPage() {
                 onClick={() => handlePageChange(filters.page + 1)}
                 disabled={filters.page === totalPages}
                 className="px-4 py-2 text-sm border rounded-lg transition-colors disabled:opacity-50"
-                style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)", color: "var(--cd-text)" }}
+                style={{
+                  backgroundColor: "var(--cd-surface)",
+                  borderColor: "var(--cd-border-subtle)",
+                  color: "var(--cd-text)",
+                }}
               >
                 Next
               </button>
@@ -148,7 +200,7 @@ export default function WebhookLogsPage() {
           </div>
         )}
       </div>
-      
+
       <ToastContainer toasts={toasts} onDismiss={dismiss} />
     </div>
   );
diff --git a/src/features/template/LoginUserTemplate.tsx b/src/features/template/LoginUserTemplate.tsx
index 9face81..38e2479 100644
--- a/src/features/template/LoginUserTemplate.tsx
+++ b/src/features/template/LoginUserTemplate.tsx
@@ -1,8 +1,26 @@
+import useAuthStore from "../Auth/v1/Store/Auth.Store";
 import SideBar from "../SideBar/v1/Section/SideBar";
-import { Outlet } from "react-router";
+import { Outlet, redirect } from "react-router";
 import BotamNavBar from "../SideBar/v1/Section/BotamNavBar";
 
+import { useMemo } from "react";
+
 const Organisation_Template = () => {
+
+  let user = useAuthStore((state) => state.user);
+
+  useMemo(() => {
+
+    console.log("User in Organisation_Template-->:", user);
+   
+
+      if (user?.role) {
+        if (user.role !== "organization") {
+          redirect("/");
+        }
+      }
+  }, [user]);
+
   return (
     <div className="flex w-screen min-h-screen overflow-x-hidden items-stretch cd-page">
       <SideBar />
diff --git a/src/layouts/MemberLayout/MemberLayout.tsx b/src/layouts/MemberLayout/MemberLayout.tsx
index 6c937c6..a39872e 100644
--- a/src/layouts/MemberLayout/MemberLayout.tsx
+++ b/src/layouts/MemberLayout/MemberLayout.tsx
@@ -3,11 +3,13 @@ import { Outlet } from "react-router-dom";
 import Sidebar from "./Components/Sidebar";
 import Header from "./Components/Header";
 import MobileSidebar from "./Components/MobileSidebar";
+import { SidebarProvider } from "@/context/SidebarContext";
 
 export default function MemberLayout() {
   return (
-    <div
-      className="
+    <SidebarProvider>
+      <div
+        className="
         relative
 
         min-h-screen
@@ -25,10 +27,10 @@ export default function MemberLayout() {
 
         transition-colors duration-300
       "
-    >
-      {/* Background Gradient */}
-      <div
-        className="
+      >
+        {/* Background Gradient */}
+        <div
+          className="
           absolute inset-0
 
           bg-gradient-to-br
@@ -41,11 +43,11 @@ export default function MemberLayout() {
           dark:via-[#09090b]
           dark:to-[#111827]
         "
-      />
+        />
 
-      {/* Top Glow */}
-      <div
-        className="
+        {/* Top Glow */}
+        <div
+          className="
           pointer-events-none
 
           absolute -top-40 -left-40
@@ -60,11 +62,11 @@ export default function MemberLayout() {
 
           blur-3xl
         "
-      />
+        />
 
-      {/* Bottom Glow */}
-      <div
-        className="
+        {/* Bottom Glow */}
+        <div
+          className="
           pointer-events-none
 
           absolute bottom-0 right-0
@@ -79,11 +81,11 @@ export default function MemberLayout() {
 
           blur-3xl
         "
-      />
+        />
 
-      {/* Extra Glow */}
-      <div
-        className="
+        {/* Extra Glow */}
+        <div
+          className="
           pointer-events-none
 
           absolute top-1/3 right-1/4
@@ -96,16 +98,16 @@ export default function MemberLayout() {
 
           blur-3xl
         "
-      />
+        />
 
-      {/* Sidebar */}
-      <div className="relative z-20">
-        <Sidebar />
-      </div>
+        {/* Sidebar */}
+        <div className="relative z-20">
+          <Sidebar />
+        </div>
 
-      {/* Main Area */}
-      <div
-        className="
+        {/* Main Area */}
+        <div
+          className="
           relative z-10
 
           flex-1
@@ -113,13 +115,13 @@ export default function MemberLayout() {
 
           min-w-0
         "
-      >
-        {/* Header */}
-        <Header />
+        >
+          {/* Header */}
+          <Header />
 
-        {/* Page Content */}
-        <main
-          className="
+          {/* Page Content */}
+          <main
+            className="
             flex-1
             overflow-y-auto
 
@@ -134,23 +136,24 @@ export default function MemberLayout() {
             sm:py-5
             lg:py-6
           "
-        >
-          <div
-            className="
+          >
+            <div
+              className="
               w-full
 
               max-w-[1450px]
 
               mx-auto
             "
-          >
-            <Outlet />
-          </div>
-        </main>
-
-        {/* Mobile Sidebar */}
-        <MobileSidebar />
+            >
+              <Outlet />
+            </div>
+          </main>
+
+          {/* Mobile Sidebar */}
+          <MobileSidebar />
+        </div>
       </div>
-    </div>
+    </SidebarProvider>
   );
 }
diff --git a/src/main.tsx b/src/main.tsx
index eb90262..7d0ea38 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,20 +1,31 @@
-
 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";
 
 const queryClient = new QueryClient();
 const container = document.getElementById("root");
 const root = createRoot(container!);
 
 root.render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          <SidebarProvider>
+            <PermissionBootstrap />
+            <App />
+          </SidebarProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </Provider>
+  </React.StrictMode>,
   <QueryClientProvider client={queryClient}>
     <ThemeProvider>
-      <SidebarProvider>
-        <App />
-      </SidebarProvider>
+      <App />
     </ThemeProvider>
   </QueryClientProvider>,
 );
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/routes/MemberRoutes.tsx b/src/routes/MemberRoutes.tsx
index 7ee45c9..381ec20 100644
--- a/src/routes/MemberRoutes.tsx
+++ b/src/routes/MemberRoutes.tsx
@@ -1,66 +1,63 @@
-import { Route, Routes } from 'react-router-dom'
-import LoginPage from '@/features/Auth/v1/Pages/LoginPage'
-
-import SignUpPage from '@/features/Auth/v1/Pages/SignUpPage'
-
-import AnalyticsPage from '@/features/Member/v1/Pages/Analytics'
-import DashboardPage from '@/features/Dashboard/Member/v1/Page/DashboardPage'
-import MemberLayout from '@/layouts/MemberLayout/MemberLayout'
-import NotificationsPage from '@/features/Member/v1/Pages/Notifications'
-import SettingsPage from '@/features/Member/v1/Pages/Settings'
-import TasksPage from '@/features/Member/v1/Pages/Tasks'
-import WorkspacePage from '@/features/Member/v1/Pages/WorkSpace'
-import { Contact } from 'lucide-react'
-import ViewEvent from '@/features/Events/v1/Pages/ViewEvent'
-import BillingPage from '@/features/Member/v1/Pages/Billing'
-import MessagesPage from '@/features/Member/v1/Pages/Messages'
-
+import { Route, Routes } from "react-router-dom";
+import LoginPage from "@/features/Auth/v1/Pages/LoginPage";
+
+import SignUpPage from "@/features/Auth/v1/Pages/SignUpPage";
+
+import AnalyticsPage from "@/features/Member/v1/Pages/Analytics";
+import DashboardPage from "@/features/Dashboard/Member/v1/Page/DashboardPage";
+import MemberLayout from "@/layouts/MemberLayout/MemberLayout";
+import NotificationsPage from "@/features/Member/v1/Pages/Notifications";
+import SettingsPage from "@/features/Member/v1/Pages/Settings";
+import TasksPage from "@/features/Member/v1/Pages/Tasks";
+import WorkspacePage from "@/features/Member/v1/Pages/WorkSpace";
+import { Contact } from "lucide-react";
+import ViewEvent from "@/features/Events/v1/Pages/ViewEvent";
+import BillingPage from "@/features/Member/v1/Pages/Billing";
+import MessagesPage from "@/features/Member/v1/Pages/Messages";
 
 const MemberRoutes = () => {
   return (
     <Routes>
-          {/* Public Routes */}
-          <Route path="/" element={<LoginPage />} />
-
-          <Route path="/signup" element={<SignUpPage />} />
+      {/* Public Routes */}
+      <Route path="/" element={<LoginPage />} />
 
-         
+      <Route path="/signup" element={<SignUpPage />} />
 
-          {/* Member Routes */}
+      {/* Member Routes */}
 
-          <Route path="/member" element={<MemberLayout />}>
-            {/* Dashboard */}
-            <Route index element={<DashboardPage />} />
+      <Route path="/member" element={<MemberLayout />}>
+        {/* Dashboard */}
+        <Route index element={<DashboardPage />} />
 
-            <Route path="dashboard" element={<DashboardPage />} />
+        <Route path="dashboard" element={<DashboardPage />} />
 
-            {/* Member Modules */}
-            <Route path="analytics" element={<AnalyticsPage />} />
+        {/* Member Modules */}
+        <Route path="analytics" element={<AnalyticsPage />} />
 
-            <Route path="notifications" element={<NotificationsPage />} />
+        <Route path="notifications" element={<NotificationsPage />} />
 
-            <Route path="settings" element={<SettingsPage />} />
+        <Route path="settings" element={<SettingsPage />} />
 
-            <Route path="tasks" element={<TasksPage />} />
+        <Route path="tasks" element={<TasksPage />} />
 
-            <Route path="workspace" element={<WorkspacePage />} />
+        <Route path="workspace" element={<WorkspacePage />} />
 
-            <Route path="messages" element={<MessagesPage />} />
+        <Route path="messages" element={<MessagesPage />} />
 
-            <Route path="billing" element={<BillingPage />} />
+        <Route path="billing" element={<BillingPage />} />
 
-            {/* Events */}
-            <Route path="events" element={<ViewEvent />} />
+        {/* Events */}
+        <Route path="events" element={<ViewEvent />} />
 
-            {/* Contact */}
-            <Route path="contact" element={<Contact />} />
+        {/* Contact */}
+        <Route path="contact" element={<Contact />} />
 
-            {/* 404 */}
-            <Route
-              path="*"
-              element={
-                <div
-                  className="
+        {/* 404 */}
+        <Route
+          path="*"
+          element={
+            <div
+              className="
                   flex items-center justify-center
 
                   h-[60vh]
@@ -70,19 +67,19 @@ const MemberRoutes = () => {
                   text-gray-500
                   dark:text-zinc-400
                 "
-                >
-                  404 Not Found
-                </div>
-              }
-            />
-          </Route>
-
-          {/* Unauthorized */}
-          <Route
-            path="/unauthorized"
-            element={
-              <div
-                className="
+            >
+              404 Not Found
+            </div>
+          }
+        />
+      </Route>
+
+      {/* Unauthorized */}
+      <Route
+        path="/unauthorized"
+        element={
+          <div
+            className="
                 flex items-center justify-center
 
                 h-screen
@@ -91,13 +88,13 @@ const MemberRoutes = () => {
 
                 text-red-500
               "
-              >
-                Unauthorized Access
-              </div>
-            }
-          />
-        </Routes>
-  )
-}
-
-export default MemberRoutes
\ No newline at end of file
+          >
+            Unauthorized Access
+          </div>
+        }
+      />
+    </Routes>
+  );
+};
+
+export default MemberRoutes;
diff --git a/src/routes/OrgRoute.tsx b/src/routes/OrgRoute.tsx
index e39049d..c395fc3 100644
--- a/src/routes/OrgRoute.tsx
+++ b/src/routes/OrgRoute.tsx
@@ -25,52 +25,55 @@ const WebhookLogsPage = lazy(() => import("@/features/Webhooks/v1/pages/WebhookL
 
 const OrgRoute = () => {
   return (
-    <Suspense fallback={<div className="flex h-screen items-center justify-center">Loading...</div>}>
+    <Suspense
+      fallback={<div className="flex h-screen items-center justify-center">Loading...</div>}
+    >
       <Routes>
+        <Route path="/org" element={<Organisation_Template />}>
+          {/* Dashboard */}
+          <Route index element={<DashBoardPage />} />
 
-           <Route path="/org" element={<Organisation_Template />}>
-        {/* Dashboard */}
-        <Route index element={<DashBoardPage />} />
+          <Route path="dashboard" element={<DashBoardPage />} />
 
-        <Route path="dashboard" element={<DashBoardPage />} />
+          <Route path="member" element={<MemberPage />} />
 
-        <Route path="member" element={<MemberPage />} />
+          {/* Events */}
+          <Route path="events" element={<ViewEvent />} />
 
-        {/* Events */}
-        <Route path="events" element={<ViewEvent />} />
+          <Route path="projects" element={<ProjectsPage />} />
 
-        <Route path="projects" element={<ProjectsPage />} />
+          <Route path="create-event" element={<CreateNewEvent />} />
 
-        <Route path="create-event" element={<CreateNewEvent />} />
+          <Route path="tasks" element={<TaskManagementPage />} />
+          <Route path="tasks/create" element={<CreateTaskPage />} />
+          <Route path="tasks/:taskId" element={<TaskDetailPage />} />
+          <Route path="tasks/:taskId/edit" element={<EditTaskPage />} />
 
-        <Route path="tasks" element={<TaskManagementPage />} />
-        <Route path="tasks/create" element={<CreateTaskPage />} />
-        <Route path="tasks/:taskId" element={<TaskDetailPage />} />
-        <Route path="tasks/:taskId/edit" element={<EditTaskPage />} />
+          {/* Webhooks */}
+          <Route
+            path="dashboard/webhooks/*"
+            element={
+              <ProtectedRoute
+                user={dashboardData.user}
+                allowedRoles={["CommunityOwner", "Admin", "Organizer"]}
+              >
+                <Routes>
+                  <Route index element={<WebhookListPage />} />
+                  <Route path="create" element={<CreateWebhookPage />} />
+                  <Route path=":id" element={<WebhookDetailsPage />} />
+                  <Route path=":id/edit" element={<EditWebhookPage />} />
+                  <Route path=":id/logs" element={<WebhookLogsPage />} />
+                </Routes>
+              </ProtectedRoute>
+            }
+          />
 
-        {/* Webhooks */}
-        <Route 
-          path="dashboard/webhooks/*" 
-          element={
-            <ProtectedRoute user={dashboardData.user} allowedRoles={["CommunityOwner", "Admin", "Organizer"]}>
-              <Routes>
-                <Route index element={<WebhookListPage />} />
-                <Route path="create" element={<CreateWebhookPage />} />
-                <Route path=":id" element={<WebhookDetailsPage />} />
-                <Route path=":id/edit" element={<EditWebhookPage />} />
-                <Route path=":id/logs" element={<WebhookLogsPage />} />
-              </Routes>
-            </ProtectedRoute>
-          } 
-        />
-
-        {/* Contact */}
-        <Route path="contact" element={<Contact />} />
-
-        {/* Add Member */}
-        <Route path="add-member" element={<AddMemberPage />} />
-      </Route>
+          {/* Contact */}
+          <Route path="contact" element={<Contact />} />
 
+          {/* Add Member */}
+          <Route path="add-member" element={<AddMemberPage />} />
+        </Route>
       </Routes>
     </Suspense>
   );
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;
diff --git a/src/utils/axios.utils.ts b/src/utils/axios.utils.ts
new file mode 100644
index 0000000..fc976bb
--- /dev/null
+++ b/src/utils/axios.utils.ts
@@ -0,0 +1,43 @@
+import axios, { AxiosError, AxiosRequestConfig } from "axios";
+
+interface RetryAxiosRequestConfig extends AxiosRequestConfig {
+  _retry?: boolean;
+}
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+/**
+ * RESPONSE INTERCEPTOR
+ * Auto refresh token on 401
+ */
+api.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    const originalRequest = error.config as RetryAxiosRequestConfig;
+
+    // Check if error is 401 and we haven't already tried to refresh
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      try {
+        // Attempt to refresh token
+        await api.post("/auth/refresh");
+        // Retry original request
+        return api(originalRequest);
+      } catch (refreshError) {
+        // If refresh fails, reject with original error
+        return Promise.reject(refreshError);
+      }
+    }
+
+    // For all other errors, reject as usual
+    return Promise.reject(error);
+  },
+);
+
+export default api;
diff --git a/src/utils/telemetry.ts b/src/utils/telemetry.ts
index f95bdd5..bcb6680 100644
--- a/src/utils/telemetry.ts
+++ b/src/utils/telemetry.ts
@@ -8,13 +8,13 @@ export const Telemetry = {
     // e.g. posthog.capture(actionName, metadata)
     console.info(`[Telemetry Action]: ${actionName}`, metadata || {});
   },
-  
+
   trackError: (errorName: string, error: any, metadata?: Record<string, any>) => {
     // e.g. Sentry.captureException(error)
     console.error(`[Telemetry Error]: ${errorName}`, error, metadata || {});
   },
-  
+
   trackFormError: (formName: string, errors: Record<string, any>) => {
     console.warn(`[Telemetry Form Error]: Validation failed in ${formName}`, errors);
-  }
+  },
 };
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 7b0828b..d0de870 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";